Design project element
mirdaki opened this issue · 19 comments
Design the look of an individual project item. Mock up with HTML and CSS what it would look like with some example content (don't worry about actually getting the information, that's issue #10). It should have a spot for the name of the project, a description, the project lead, links to the GitHub and other project contributors, and an optional image. It should resize for desktop and mobile devices.
So there's a spot for the title, project lead, project description, image, github link, and contributors. I filled it all in with random stuff about the migos just so you can see it in action.
Nice job! It has everything we need and is well laid out. Could you look into different font choices (each part can be a different font too) to make it feel a little more polished? This is a good resource to start
Thanks! Okay will do
I changed the fonts and moved the git and contribution section to the middle (I could move it back, just a change so you could decide whether you prefer it on the side or the middle)... are these fonts okay or should I keep looking? What do you think of the placement for the git and contribution, middle or left hand side?
On the fonts: I think the title font is a bit to block and rough (not sure if that's the right word lol) for a project (makes sense for an album though). Try a few different combinations and post what you like.
On the GitHub link and contributions I think center is fine. One thing we might have to deal with is if the project dosen't have a picture. If that happens the element should adjust appropriately.
This is a different font for the title, it's a more simple, sleek and thin look.
Also, in the case that there is no image, you simply have to put the description in a different div leaving the column divs empty, I labeled each portion of code with short comments saying what goes where, I included a screenshot of a chunk of the code so you sort of get the idea of what I was going for. I'm less explicit with what classes in css go to what but I feel those are sort of self explanatory and could be figured out by looking at what code implements what style class.
I do like title font better. Good job with the comments too. It does look like the GitHub link and contributors isn't quite centered without the picture though. Also can I ask why you're using divs around the h1 and h4?
Ah nice catch, I had them wrapped in divs because I was experimenting with some other organizational styles but then decided against it. I removed them for cleaner code. I'll work on the alignment of the GitHub link and contributors. If we decide that we want those attributes on the left instead of the middle then there's no issue and they remain in the same spot regardless on if there's an image or not. If we want those attributes centered it becomes a little more complicated and I'd need to reformat some stuff a little bit. Do you want me to keep those centered or put them back on the left?
Lets try centering for now
I think I got it.
Nice! Now could you make a list of these to represent different projects to simulate a full page. After that you can merge your code with the dev branch. You could name your files something like project-page.html and project-page.css so they don't get confused for another part.
I filled in the code with random information and bs just so you could see how it looks as a full page. Do you want me to submit it with the example content so they have an idea of what it looks like and where things go?
Yep! Have a mix of them with and without images
Yes sirrrr I did that. How do I split the files up making one css and one html?
Nevermind I looked it up! I'll merge now
Nice job!! I'll close this issue now, want another one?
Yeah sure! Did you take a look at the files I submitted?