Monogram

Solution for a challenge from Frontendpractice.com.

Github Pages | Frontend Practice

Table of Contents

• Overview
  • Built With
• Features
• Useful Resources

Overview

Built With

• Grid

• Flex

• Site has error where images won't load when cookies are blocked. But images will load after a page refresh

• Nav doesn't cover first section's background image because I used fixed instead of absolute

Features

The challenge was to build an application to complete the following user stories:

• User story: Recreate the layout
• User story: Build the slide out panel that appears when clicking the shopping cart in the menu.
• User story: Create a hero image slider that changes the image after X amount of seconds. (Outdated)

Useful Resources

• Monogram - Monogram website design
• Font Awesome - Icons
• YouTube - Lazy Loading
• W3 Schools - Dropdown Navbar
• W3 Schools - Picture
• Image Color Picker - Image Color Picker
• Tutorial Republic - Change image on hover
• Stack Overflow - Slide animation
• Codepen - Slide animation
• Demo2s - Slide animation
• Blog - Slide animation
• MDN Docs - Client Side Validation