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
  • Useful resources
• Author

Overview

The challenge

build out this order summary card component and get it looking as close to the design as possible.

The users should be able to:

• See hover states for interactive elements

Screenshot

Links

• Solution URL: [https://christ-kevin.github.io/order-summary-component-main/]
• Live Site URL: [https://christ-kevin.github.io/order-summary-component-main/]

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Styled Components - For styles

What I learned

I'm really confident and happy cause my DOM looks perfect. No errors, no warnings

        <h1>proud of this html</h1>
        <div>
            <img src="images/illustration-hero.svg" alt="hero">
        </div>

.proud-of-this-css {
  body{
  ...
       /* background */
     background-image: url(/images/pattern-background-mobile.svg);
     background-repeat: no-repeat;
     background-size: auto;
     /* pale blue */
     background-color: hsl(225, 100%, 94%);
   ...
   }
}

Continued development

make images responsive

Useful resources

• Example resource 1 - This helped me to learn how to use .svg files in img tags. I'd recommend it to anyone still learning this concept.

Author

• LinkedIn - Christ Watat
• Frontend Mentor - @Christ-Kevin
• Twitter - @WatatK