https://github.com/jdegand/monogram

Frontend Practice Challenge - Monogram
https://github.com/jdegand/monogram

frontend-practice

Last synced: 7 months ago
JSON representation

Frontend Practice Challenge - Monogram

• Host: GitHub
• URL: https://github.com/jdegand/monogram
• Owner: jdegand
• License: mit
• Created: 2021-10-25T20:19:13.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2021-10-26T20:28:31.000Z (over 4 years ago)
• Last Synced: 2025-01-22T09:13:19.546Z (over 1 year ago)
• Topics: frontend-practice
• Language: HTML
• Homepage: https://jdegand.github.io/monogram/
• Size: 1.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Monogram




   Solution for a challenge from  Frontendpractice.com.





  


    

      Github Pages

    

     | 

    

      Frontend Practice    

    

  



## Table of Contents

- [Overview](#overview)

  - [Built With](#built-with)

- [Features](#features)

- [Useful Resources](#useful-resources)

## Overview

![](monogram-desktop.png)

![](monogram-mobile.png)

![](monogram-mobile-top-panel.png)

![](monogram-mobile-side-panel.png)

### 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](https://www.frontendpractice.com/project/monogram) was to build an application to complete the following user stories:

- [x] User story: Recreate the layout

- [x] 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](https://web.archive.org/web/20210818062301/https://monogramcc.com/shop/) - Monogram website design

- [Font Awesome](https://fontawesome.com/v5.15/icons) - Icons

- [YouTube](https://www.youtube.com/watch?v=AActXSWxsRo) - Lazy Loading

- [W3 Schools](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click) - Dropdown Navbar

- [W3 Schools](https://www.w3schools.com/tags/tag_picture.asp) - Picture

- [Image Color Picker](https://imagecolorpicker.com/) - Image Color Picker

- [Tutorial Republic](https://www.tutorialrepublic.com/faq/how-to-change-image-on-hover-with-css.php) - Change image on hover

- [Stack Overflow](https://stackoverflow.com/questions/16989585/css-3-slide-in-from-left-transition) - Slide animation

- [Codepen](https://codepen.io/blackjacques/pen/GrNMxv) - Slide animation

- [Demo2s](https://www.demo2s.com/html-css/css-animation-to-move-image-from-left-to-right-and-back.html) - Slide animation

- [Blog](https://newbedev.com/html-how-to-animation-elements-to-slide-left-to-right-css-code-example) - Slide animation

- [MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation) - Client Side Validation