Just check your work, and I would it’s kind of nice, that green background got me!(but since I like lime, I wish it was lime, but my opinion is not important about design)
The very first issue I could tell you is about the top navigation’s link colours. I think that pink(nice colour) is so light, and has low contrast with white background, so could be a little hard(takes low attention) to read.
I suggest you bring the more darker pink colour for top nav link colours.
About the welcome section, I think it could be part of your design to make it fill one screen height for this section, but I think it’s too much! becasue it has not enough content for this section, and it’s kind of waste of space if you ask me. now for a large screen monitor(let say 32") it’s even much more. you assume it’s a green big section, with some text at center.
I suggest you come with less spacing, just a suggestion.
Same I suggest you make the icons on welcome section a little larger, I think they are a little small. Same about the font size.
One issue I think you better to fix, is about overriding the font-size using absolute unit pixel, for instance you set
First please don’t, and use em to make a font size section larger or smaller. Now let me tell you why.
User would override and specify default font-size with hers/his browser, for example I set 40px, and you set 20px. 30px is 1em for my browser, and 20px is 1em for your browser.
H1 tag has
font-size:2.0em ins some section(
1.5em). It means browser may double the default font-size to calculate the H1 tag.
So now as I set the default font-size as 40px, I supposed to have 80px for H!, but the page overridden the H1 with 40px. So what happens? becasue you found 40px big enough with your config, you thought it’s the same size with other’s screen, but it’s false. Because that H1 is just like a normal text for me.
This is not about H! tag, this i about setting the font-size using
em, not px.
I think the contact section elements are a little small! Since your product section is so sharp and big enough, but contact section is not. my suggestion:
You also used default value instead of placeholder for textarea, please don’t.
After the contact section, there is too much space till the footer, I think it’s too much!
About the layout, it’s broken for mobile. When screen is small, your logo(M at top-right) overlap on navigation link, same the icons in welcome section causes the horizontal scrolling becasue they need more space(this is because you set 70px as grid gap, so that’s so much for mobile I believe, use relative units instead). please check:
Another very small design issue is about the box you used for product section. It seems you applied the background colour(the light gray) for content container, rather than box container. It’s not critical, but better be fixed, check:
check the left box, has less height of right box.
Tip: instead of setting background colour for
.project-tile, it’s better to set for box parent
I think logo could be better has some space from screen top and left edge. it’s starts from 0,0. Actually I suggest you place the logo with navigation panel if applicable.
Since your top navigation is fixed, I suggest you add one bottom border for navigation. Sam a very smooth shadow. When background colour is the same as top navigation, user could find the top navigation as inline content, rather fixed top content. my suggestion:
I think it’s a good work. Please note my suggestions are not issues, but you may fix the layout issue.
Keep going on great work, happy programming.