DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Order summary component | FrontendMentor Challenge #1
Amrin
Amrin

Posted on

Order summary component | FrontendMentor Challenge #1

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.

order card project img

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>
Enter fullscreen mode Exit fullscreen mode

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%; 
}
Enter fullscreen mode Exit fullscreen mode

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;     
}
Enter fullscreen mode Exit fullscreen mode

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%); 
}
Enter fullscreen mode Exit fullscreen mode

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; 
    }
} 
Enter fullscreen mode Exit fullscreen mode

Here we designed the mobile version.

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

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

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

That’s it for today. If this article was helpful share it with your friends.

Connect with me on Twitter.

Thanks for reading.

Top comments (2)

Collapse
 
alessandrogiuzio profile image
Alessandro

Nice job Amrin!

Collapse
 
coderamrin profile image
Amrin

thanks Alessandro

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout πŸ˜†