Name: Order summary component | FrontendMentor Challenge #1
Rating: 1.3 (3065 reviews)
Author: coderamrin

Hey there. Welcome to my Frontendmentor challenge series.

This is Challenge No#1.

In this article, we are going to build the Order summary component
project.

Let’s get started

If you prefer video tutorial watch it here

Before starting:

download the starter files from here.
open the files in your code editor.

Part#1: HTML

First, we are going to write the markup. For the sake of simplicity, I’m not going to explain the markup. I’ll just share them here.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" rel="stylesheet">

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="styles.css"> 
  <title>Frontend Mentor | Order summary card</title>
</head>
<body>
  <div class="summeryContainer">
    <img src="images/illustration-hero.svg" alt="" class="hero">  
    <div class="summeryInfo container">
      <h2 class="summeryTitle">
        Order Summary      
      </h2>
      <p class="summeryDescription">
        You can now listen to millions of songs, audiobooks, and podcasts on any 
        device anywhere you like!      
      </p>      
    </div>
    <div class="planContainer container">
      <div class="plan">
        <img src="images/icon-music.svg" alt="" class="icon"> 
        <div class="planInfo">
          <h3 class="planTitle">Annual Plan</h3>
          <p class="planPrice">
            $59.99/year              
          </p>
        </div>
      </div>
      <a href="#" class="changeBtn"> Change </a>  
    </div>
    <button class="proceedBtn btn container"> 
      Proceed to Payment       
    </button>
    <button class="cancelBtn btn container">  
      Cancel Order        
    </button>
  </div>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Coder Amrin</a>.
  </div>
</body>
</html>

Read it once, cause we need this to markup to design it.

The next part is the CSS.

Part#2: CSS

Now we are going to design the component with CSS.

* {
    box-sizing: border-box;    
    margin: 0; 
}

:root {
    --p-pale-blue: hsl(225, 100%, 94%);
    --p-dark-blue: hsl(245, 75%, 52%);

    --n-pale-blue: hsl(225, 100%, 98%); 
    --n-desaturated-blue: hsl(224, 23%, 55%); 
    --n-dark-blue: hsl(223, 47%, 23%);  
}

html, body {
    font-family: 'Red Hat Display', sans-serif; 
    height: 100%; 
}

Here I added some reset styles to remove the browser's default styles. And added all the colors to variables (that colors are given in the style-guide file)

body {
    font-family: ;
    background-color: var(--p-pale-blue);  
    background-image: url(/images/pattern-background-desktop.svg);  
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;     
}

Here we added the background color and image to body. And added flexbox to center everything horizontally and vertically.

.container {
    width: 70%;
    text-align: center; 
    margin: 0 auto;
}

.summeryContainer {
    width: 450px;
    background-color: #fff; 
    border-radius: 1rem; 
    text-align: center;
    color: var(--n-dark-blue);
    margin-bottom: 1rem; 
}

.summeryDescription {
    color: var(--n-desaturated-blue);
    padding-bottom: 1rem;  
    font-size: 16px; 
}

.summeryTitle {
    padding: 2rem 0 1rem 0; 
    font-weight: 900;  
}

.hero {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.planContainer {
    display: flex;
    align-items: center; 
    justify-content: space-between;
    background-color: var(--n-pale-blue);
    padding: 1rem;  
    border-radius: 1rem; 
    margin-bottom: 2rem;  
}

.plan {
    display: flex;
}

.planInfo {
    padding-left: 1rem; 
    text-align: left; 
}

.btn {
    display: inline-block;  
    margin: auto;   
    font-size: 1rem; 
    outline: none;
    border: none; 
    background: none;  
    padding: 1rem 1.5rem;
    border-radius: 1rem; 
    font-weight: 700;
    cursor: pointer;     
}

.changeBtn {
    color: var(--p-dark-blue); 
}

.proceedBtn {
    background-color: var(--p-dark-blue);
    color: #fff; 
}

.proceedBtn:hover {
    background-color: var(--n-dark-blue);
}

.cancelBtn {
    margin-bottom: 1rem;
    color: var(--n-desaturated-blue);
}

.attribution { 
    font-size: 11px; 
    text-align: center; 
}

.attribution a { 
    color: hsl(228, 45%, 44%); 
}

Here we designed the components desktop version.

@media screen and (max-width: 375px) {
    body {
            background-image: url(/images/pattern-background-mobile.svg);
        }

    .container {
        width: 80%; 
    } 

    .summeryContainer {
        width: 320px; 
        margin: auto; 
    }

    .hero {
        width: 320px; 
    }  

    .planTitle, 
    .changeBtn{
        font-size: .9rem; 
    }
}

Here we designed the mobile version.

Live Preview: https://coderamrin.github.io/order_summary_component/

Source Code: https://github.com/Coderamrin/order_summary_component

Order summary component | FrontendMentor Challenge #1

Let’s get started

If you prefer video tutorial watch it here

Before starting:

Part#1: HTML

Part#2: CSS

If you want to get 5 best resources to improve as a developer and my best video and article of the week in your Inbox subscribe to my Newsletter

Subscribe Now!

Conclusion