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
• Acknowledgments

Overview

The challenge

Users should be able to:

• See hover states for interactive elements

Screenshot

Mobile design:

Desktop design:

Links

• Solution URL: (https://www.frontendmentor.io/challenges/order-summary-component-QlPmajDUj/hub/order-summary-WzOGBNlas)

• Live Site URL: (https://purplehippo911.github.io/Order_summary/)

My process

First I started to add the image and the rest of the card, then I started with the background

Built with

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

What I learned

Use this section to recap over some of your major learnings while working through this project. Writing these out and providing code samples of areas you want to highlight is a great way to reinforce your own knowledge.

To see how you can add code snippets, see below:

<div class="main_image">
  <img
    src="images/illustration-hero.svg"
    alt="illustration of a girl listening to music"
  />
</div>
<h1 class="card_title">Order Summary</h1>
<p class="card_info">
  You can now listen to millions of songs, <br />
  audiobooks, and podcasts on any device <br />
  anywhere you like!
</p>

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
  background-color: var(--Pale_blue);
  text-align: center;
  background-image: url(/images/pattern-background-desktop.svg);
  background-repeat: no-repeat;
  font-family: "Red Hat Display", sans-serif;
}

Continued development

I think that I should try to learn CSS Grid and Flexbox, so I can get more comfortable with positioning elements, so I can get a good looking layout faster and easier. I want to continue getting better on JS so that I can begin on the challenges involving it, because I feel that I am comfortable with CSS and HTML.

Useful resources

• w3Schools - This helped me when I forgot some of the elements in css.

Author

• Frontend Mentor - @foxynoxy
• Discord- [mashedapples222#7574]

Acknowledgments

I got some inspiration from @aldhairescobar and @Any28Flo. Be sure to check out their solutions.

• Github@aldhairescobar

• Github@Any28Flo