responsive pricing cards using html and css with source code

Responsive Pricing Cards using HTML & CSS – Coding Torque

Share your love

Hello Guys! Welcome to Coding Torque. In this blog, we are going to make responsive pricing cards using HTML and CSS. You must create this project if you are a beginner and learning HTML and CSS. Let’s get started 🚀.

Before we start, here are some JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript

 

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

 

HTML Code 

Starter Template

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome Icons  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
        integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
        crossorigin="anonymous" />

    <title>Responsive pricing cards using HTML CSS and JavaScript - @code.scientist x @codingtorque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag

<div class="container">
    <h5 class="badge">Pricing Plans</h5>
    <h1 class="heading">Choose Your Best Pricing Plan</h1>
    <div class="card_group">
        <div class="pricing-card">
            <i class="fab fa-telegram-plane"></i>
            <span>Basic</span>
            <h4 class="price">$4.99</h4>
            <ul class="package_list">
                <li>Unlimited Website</li>
                <li>Unlimited Storage</li>
                <li>Free SSL Certificate</li>
                <li>24/7 Support</li>
            </ul>
            <a href="#" class="get_started_btn">Get Started</a>
        </div>
        <div class="pricing-card">
            <i class="fas fa-plane"></i>
            <span>Intermediate</span>
            <h4 class="price">$12.99</h4>
            <ul class="package_list">
                <li>Unlimited Website</li>
                <li>Unlimited Storage</li>
                <li>Free SSL Certificate</li>
                <li>24/7 Support</li>
            </ul>
            <a href="#" class="get_started_btn">Get Started</a>
        </div>
        <div class="pricing-card">
            <i class="fas fa-rocket"></i>
            <span>Advanced</span>
            <h4 class="price">$19.99</h4>
            <ul class="package_list">
                <li>Unlimited Website</li>
                <li>Unlimited Storage</li>
                <li>Free SSL Certificate</li>
                <li>24/7 Support</li>
            </ul>
            <a href="#" class="get_started_btn">Get Started</a>
        </div>
    </div>
</div>

 

CSS Code 

Create a file style.css and paste the code below.

@import url("https://fonts.googleapis.com/css2?family=Baloo 2&family=Roboto:wght@300&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", cursive;
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 5rem 10rem;
}

.badge {
    text-transform: uppercase;
    color: deeppink;
    letter-spacing: 1px;
    font-size: 11px;
}

.heading {
    font-size: 26px;
    margin: 20px 0;
}

.card_group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.pricing-card {
    margin: 20px 30px;
    height: 400px;
    width: 275px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transition: 0.5s ease-in-out;
    padding: 16px 14px;
    border-radius: 10px;
    border: 2px solid deeppink;
}

.pricing-card i {
    color: deeppink;
    height: 60px;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border-radius: 50%;
    box-shadow: 0 0 34px -12px gray;
}

.pricing-card span {
    color: deeppink;
    margin: -10px 0;
    font-weight: bold;
    font-size: 14px;
}

.price {
    font-size: 30px;
    font-family: "Baloo 2";
}

.package_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}

.package_list li {
    list-style: none;
    margin: 6px 0;
    color: gray;
    font-size: 14px;
}

.get_started_btn {
    border: 2px solid deeppink;
    color: white;
    background: linear-gradient(45deg, #bc4e9c, #f80759);
    padding: 8px 25px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s ease-in-out;
}

.get_started_btn:hover {
    background: transparent;
    color: deeppink;
}

Output Till Now

responsive pricing cards using html and css with source code
Written by: Piyush Patil
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpful💖
Share your love

Related Posts