Frontend Mentor - Order summary card solution

This is a solution to the Order summary card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

A Project that builds more confidence in the layout skills of CSS Grid and Flexbox and spacing utilities.

trying to align different elements with different styles across the card component.

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Mobile

Desktop

Links

• Solution URL: Solution URL
• Live Site URL: Live Site URL

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

There was nothing new in this project it's similar to the other projects that are part of the Getting Started on Fronted Mentor roadmap.

However it helps to solidify the layout/spacing skills used frequently when designing web pages.

Continued development

Getting more practice in regards to simple layouts before moving to more complex/responsive ones.

Author

• Frontend Mentor - @ilyesab