Pricing component with toggle-Design to HTML/CSS

Photo by Joey Banks on Unsplash

In this post we are going to create the Pricing component with toggle from Frontend mentor.

Pricing component

After downloading the resources, I had extracted the zip file and copied it in the Frontend-mentor-challenges folder. After that opened the index.html file with Live Server.

index.html

Next, we will be removing the unnecessary things from the index.html file and adding the structure.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | Price Component</title>
<link rel="stylesheet" href="style.css" />
<script src="main.js" defer></script>
</head>
<body>
<div class="container">
<h1>Our Pricing</h1>
<div class="toggle-container">
<span>Annually</span>
<span>
<input type="checkbox" name="toggle" id="toggle" unchecked />
<label for="toggle">
<div class="ball"></div>
</label>
</span>
<span>Monthly</span>
</div>
<div id="flexy" class="flex">
<div class="price-box">
<h4>Basic</h4>
<p>
<span class="monthly">
&dollar;19.99
</span>
</p>
<ul>
<li>500 GB Storage</li>
<li>2 Users Allowed</li>
<li>Send up to 3 GB</li>
</ul>
<button>Learn More</button>
</div>
<div class="price-box price-box-premium">
<h4>Professional</h4>
<p>
<span class="monthly">
&dollar;24.99
</span>
</p>
<ul>
<li>1 TB Storage</li>
<li>5 Users Allowed</li>
<li>Send up to 10 GB</li>
</ul>
<button>Learn More</button>
</div>
<div class="price-box">
<h4>Master</h4>
<p>
<span class="monthly">
&dollar;39.99
</span>
</p>
<ul>
<li>2 TB Storage</li>
<li>10 Users Allowed</li>
<li>Send up to 20 GB</li>
</ul>
<button>Learn More</button>
</div>
</div>
</div>
</body>
</html>

Now, we will start with our styles in the new style.css file. We will set the basic styling first, which will contain the general styles.

@import url('https://fonts.googleapis.com/css?family=Montserrat:700&display=swap');* {
box-sizing: border-box;
}
body {
background-color: hsl(240, 78%, 98%);
color: hsl(232, 13%, 33%);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif;
text-align: center;
min-height: 100vh;
}
.container {
margin: auto;
max-width: 100%;
width: 1200px;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
}
h1 {
color: hsl(233, 13%, 49%);
}
.toggle-container {
color: hsl(234, 14%, 74%);
margin-bottom: 40px;
}

Now, our project is looking much better.

Our Pricing

Now, we will put the rest of the styles for price-box and buttons.

.price-box {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
color: hsl(233, 13%, 49%);
padding: 30px;
margin: 10px;
}
.price-box h4 {
margin: 0;
}
.price-box p {
color: hsl(232, 13%, 33%);
font-size: 4em;
margin: 15px 0;
width: 250px;
}
.price-box ul {
border-top: 1px solid hsl(234, 14%, 74%);
padding: 0;
list-style-type: none;
}
.price-box ul li {
border-bottom: 1px solid hsl(234, 14%, 74%);
font-size: 14px;
padding: 15px 0;
}
.price-box button {
background-image: linear-gradient(
to right,
hsl(236, 72%, 79%),
hsl(237, 63%, 64%)
);
border: none;
border-radius: 5px;
color: #fff;
font-family: 'Montserrat', sans-serif;
letter-spacing: 2px;
padding: 15px;
margin-top: 10px;
width: 100%;
text-transform: uppercase;
}

Now, our project is looking much better and is almost complete.

Almost done

It’s time to style the premium middle box, with different styles.

.price-box.price-box-premium {
background-image: linear-gradient(
to right,
hsl(236, 72%, 79%),
hsl(237, 63%, 64%)
);
color: #fff;
transform: scale(1.15);
}
.price-box.price-box-premium > * {
transform: scale(0.869);
}
.price-box.price-box-premium button {
background-image: none;
background-color: #fff;
color: hsl(237, 63%, 64%);
}
.price-box.price-box-premium ul,
.price-box.price-box-premium ul li {
border-color: #f0f0f0;
}
.price-box.price-box-premium p {
color: #fff;
}

Now, our premium box is looking awesome.

Premium box

Now, we will add the background patterns. Add the below code after the body in style.css file.

body::before {
content: '';
background-image: url('./images/bg-top.svg');
background-repeat: no-repeat;
background-position: top right;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
z-index: -1;
}
body::after {
content: '';
background-image: url('./images/bg-bottom.svg');
background-repeat: no-repeat;
background-position: bottom left;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
}

Now, the background patterns are looking good.

Background pattern

Now, we will do the toggle button, but let’s first add the HTML for annually in our index.html file.

index.html

After that in style.css file add styles for monthly and annually, which we are going to control from javascript.

style.css

In the main.js file just add the event listener to add and remove the class show-monthly, once the user click on the checkbox.

const toggle = document.getElementById('toggle');
const flexy = document.getElementById('flexy');
toggle.addEventListener('change', e => {
flexy.classList.toggle('show-monthly');
});

Now, our checkbox functionality is working fine and showing us the annual and monthly fees.

Annual or monthly

We will now use the pill toggle instead of the the checkbox, as per the design.

.toggle-container {
display: flex;
align-items: center;
justify-content: center;
}
.toggle-container label {
background-image: linear-gradient(
to right,
hsl(236, 72%, 79%),
hsl(237, 63%, 64%)
);
border-radius: 50px;
cursor: pointer;
display: inline-block;
margin: 0 10px;
position: relative;
height: 30px;
width: 60px;
}
.toggle-container label .ball {
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 2.5px;
left: 2.5px;
height: 25px;
width: 25px;
transition: transform 0.4s ease;
}
.toggle-container input {
position: absolute;
left: -9999px;
}
.toggle-container input:checked + label .ball {
transform: translateX(30px);
}

And now the toggle looks great and also works great in our app.

The toggle

Next, we will make our app responsive by using little media query.

@media screen and (max-width: 768px) {
.flex {
flex-direction: column;
}
.price-box.price-box-premium {
transform: scale(1);
}
.price-box.price-box-premium > * {
transform: scale(1);
}
}

Now, our app is perfect and looking great in both screens. You can find the code for the same here.

Pricing

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Week of 8 Jun — 14 Jun

How The Shell Works?

Gojek Academy #LearnAtHome : Honest Review

CS373 Spring 2022: Varun Nayak Blog 2

Enforce HTTPS on Azure Web App

Azure DevOps Guide Visual Studio (REPOS)

Don’t want to install Ubuntu VM on your Mac? Read this!

Signed and Unsigned Numbers

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Introduction to web API and how JavaScript is concerned.. 30daysofjavascript ==> Day 22

DOM Manipulation: Simple Click Counter

JavaScript Array length — the definitive guide

Applying Inline Styles with React.js