FCC Product Landing Page - Flexbox & Grid layout

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: https://codepen.io/Mike-was-here123/pen/OBbPgp


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