GracilianoOG / fementor-order-summary

Order Summary Challenge provided by Frontend Mentor. Made with HTML, CSS and SASS/SCSS.

Home Page:https://gracilianoog.github.io/fementor-order-summary/dist/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

πŸ’» Order Summary | Frontend Mentor

πŸ“– Description

This is a Order Summary card component made with HTML, CSS and SASS, based on the challenge provided by Frontend Mentor. It was made with the free assets provided, which means the Figma/Sketch files weren't included.

This is my first time coding with SASS, it's not that hard but sure has plenty of resources to explore. I was a little confused at first, but watching a video from FreeCodeCamp and reading the docs helped me a lot.

It's a little complicated to make it look as equal as the design using only images, but it's a very neat challenge to do so.

πŸ”¨ Features

  • HTML
  • CSS
  • SASS/SCSS
  • BEM Convention
  • Flexbox
  • Responsiveness
  • Coded with Visual Studio Code

πŸ–ΌοΈ Screenshot

You can check the project's repository here or the live preview here.

πŸ’» Desktop Layout

Desktop Layout

πŸ“± Mobile Layout

Mobile Layout

πŸ”— Links

About

Order Summary Challenge provided by Frontend Mentor. Made with HTML, CSS and SASS/SCSS.

https://gracilianoog.github.io/fementor-order-summary/dist/


Languages

Language:SCSS 100.0%