A little custom web store for Nike shoes. Used to demonstrate a number of concepts in HTML and CSS.
"Fork" this repository, then "clone or download" (green button) this store repo and work on the tasks below.
- Style the
.navand its children to make it look a bit more like a production-ready navigation menu you might see in a real web store- We modeled the Apple homepage navigation
- Apply a
@mediaquery at the breakpoint of your choice to turn.all-productsfrom a 1-column static layout of blocks, into a 2-column grid.- Definitely use
min-widthto determine your breakpoint, designing from smallest to largest ("mobile first")
- Definitely use
- Now create a bigger breakpoint and go for a 4-column grid, lining up all of the four products.
- Do all 3 layouts co-exist nicely?
- Set the
.navto befixedto the top of theviewport- Collapse the
.nav-listso that it drops over top of the content - Ensure there is no content on the page that becomes inaccessible
- Collapse the
- Set the
.product-detailsto overlap it'simgwithin the.productcontainer- Give it a semi-transparent background and stretch it over the entire
.product - Align the text elements to the center, both vertically and horizontally
- Use
z-indexto ensure the.navalways stays above our.product-details
- Give it a semi-transparent background and stretch it over the entire
- Hide the
.product-detailsusingopacity: 0;and when someone hovers over the.product, set the.product-detailsof that item back toopacity: 0;- Animate it with
transition
- Animate it with
- Apply the
reset.cssto this project by pasting a copy of it into our/stylesfolder and attaching it toindex.html, by pasting the followinglinkinto the<head>just before our stylesheet (styles.css):<link rel="stylesheet" href="styles/reset.css">- Compare the before and after by commenting in/out the reset
<link> - Make the necessary adjustments to
styles.cssto ensure the page looks as good or better than it did pre-reset
- Compare the before and after by commenting in/out the reset
- Add a "hamburger" menu button (the three-line icon) to the
.nav- Start by using an image inside of a button (an
.svgscales well), you can find a free-use version through a google image search - Next, challenge yourself by drawing your own "hamburger" button only using HTML and CSS (no image)! The benefit of drawing it yourself is that you can then animate the top and bottom lines to rotate into an "X" to close the menu once open! Use the following HTML to achieve that:
<button type="button" name="hamburger" class="btn hamburger"> <div></div> <div></div> <div></div> </button> - Start by using an image inside of a button (an
- Align the button to the right side of the
.navin your default (smallest) viewport layout, while keeping the logo in the middle- Try this using
position - Try this using
grid- If you usegridand apply it to the.nav, the.nav-listwill now be part of the grid too! Be sure to consider that and applygrid-columnif necessary to stretch the.nav-listacross any columns you created to setup the.logoand.hamburger- Which method do you prefer?
- Try this using
- Ensure that when the screen hits your larger breakpoints, the
.navchanges its layout to better suit the new increased available space- Remove the
.hamburgerbutton using CSS - Expose the
.nav-listand align its children into a single row and align it to the right - Align the
.logoover to the left - Do you still prefer
position>grid, orgrid>position?
- Remove the
- Clean up and style any odds/ends that are left unstyled to date (the footer, etc) and let's call this example a wrap!