FCC Product Landing Page - Flexbox & Grid layout

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

This is nice, but i suggest some variations.

I made some changes: [deleted]


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

Nav bar:

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


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).

1 Like

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:

1 Like

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.

1 Like

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.

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.

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

1 Like