FCC Product Landing Page - Flexbox & Grid layout

FCC Product Landing Page - Flexbox & Grid layout
0

#1

Just finished this up. Uses a little grid layout until subgrid is implemented fully and can be used in prodcution.


#2

This is nice, but i suggest some variations.

I made some changes: [deleted]

body:

margin: 0; because codepen has a default 20 pixel padding.

Nav bar:

Added box-shadow of 2px 2px 5px; for depth

hero:

Added background image:

  • background-image: url('http://k-axe.com/wp-content/uploads/2016/01/wilderness-axe-banner.jpg');

Added a cool scroll behind effect with:

  • background-attachment: fixed;

And gave the text a shadow and also gave it a color of white:

  • text-shadow: 2px 2px 5px black;
  • color: white;

Also made the height of 600px;

  • height: 600px;

And the final product is this:

I also went through and removed a lot of the margins and padding. I then added that box shadow to every button:


Hide that nav bar on smaller screens using media query’s and display: none;,

@media screen and (max-width: 500px) {
  /* code goes here, max width may vary */
}

Hope this help’s. I’ll delete the forked example pen i made in 3 days time (or sooner).


#3

I had been on a professional project that took me away from FCC for a spell and I am just seeing this.

I could, and probably will, go in and clean that up. I know it could use a little tinkering. I was on a time crunch on getting the personal stuff done before I was dragged away.

Thanks for putting the time into this @michaelnicol, I appreciate your work. I took your changes and implemented them. :+1:


#4

You should also take a look into the mobile “version” of the page. Now it looks like:


so your navigation occupy 80% of the screen height or so.


#5

i feel as if responsive nav bars are too complicated this early in the learning process, just add display:none; to the nav bar on smaller screen using media queries in css.


#6

I’ve been doing this for close to 20 years now, responsive design since Ethan Marcotte coined the term I follow(ed) very closely. The responsive menu wasn’t a big problem. It was cleaning up rushed code.

I made changes and have the final product up.


#7

Looking back at it, the nav bar still looks way too big when your first load up the page (not even the responsive part)