Nabendu Biswas

Aug 25, 2021

5 min read

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');

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;
}

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;

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;
}

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');

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;
}

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;
}

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

Pricing