Responsive pricing table HTML & CSS

Hey, developers welcome to Day 55 of our 90Days 90Projects challenge. And in Day 55 we are going to create a Responsive pricing table HTML & CSS.


So to run this code you just need to copy the HTML and CSS code and run it into your code Editor. 

Preview

Responsive Profile Card using HTML CSS


HTML Code

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Responsive Table </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="cards">
            <div class="card bg-orange">
                <div class="content">
                    <span class="rate"> Basic </span>
                    <h4 class="price"><sup>$</sup>99/Mon </h4>
                </div>
                <div class="bottom-card">
                    <ul>
                        <li> HTML Simplified </li>
                        <li> CSS Master Series </li>
                        <li> JavaScript Doctory </li>
                        <li> 90 Days of Projects </li>
                        <li> ReactJS MasterMind </li>
                    </ul>
                    <a href="#" class="btn bg-orange"> buy now </a>
                </div>
            </div>
            <div class="card bg-purple">
                <div class="content">
                    <span class="rate"> Medium </span>
                    <h4 class="price"><sup>$</sup>199/Mon </h4>
                </div>
                <div class="bottom-card">
                    <ul>
                        <li> HTML Simplified </li>
                        <li> CSS Master Series </li>
                        <li> JavaScript Doctory </li>
                        <li> 90 Days of Projects </li>
                        <li> ReactJS MasterMind </li>
                    </ul>
                    <a href="#" class="btn bg-purple"> buy now </a>
                </div>
            </div>
            <div class="card bg-pink">
                <div class="content">
                    <span class="rate"> Advance </span>
                    <h4 class="price"><sup>$</sup>299/Mon </h4>
                </div>
                <div class="bottom-card">
                    <ul>
                        <li> HTML Simplified </li>
                        <li> CSS Master Series </li>
                        <li> JavaScript Doctory </li>
                        <li> 90 Days of Projects </li>
                        <li> ReactJS MasterMind </li>
                    </ul>
                    <a href="#" class="btn bg-pink"> buy now </a>
                </div>
            </div>
        </div>
    </div>

</body>

</html>


CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.container {
    display: flex;
    padding: 1rem;
    justify-content: center;
}

.cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card {
    margin: 1rem;
    width: 240px;
    height: 400px;
    cursor: pointer;
    transition: 0.1s;
    position: relative;
    border-radius: 10px 10px 0 0;
}

.content {
    color: #f8f1f1;
    padding: 25px 0;
    font-size: 18px;
    text-align: center;
}

.content h4 {
    margin: 10px 0;
}

.price {
    color: #fff;
    font-size: 28px;
}

.bottom-card {
    width: 100%;
    height: 280px;
    padding: 10px;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 1px 19px rgb(0 0 0 / 50%);
}

.bg-orange {
    background-color: #e65b00;
}

.bg-purple {
    background-color: rgb(134, 9, 172);
}

.bg-pink {
    background-color: rgb(220, 4, 112);
}

.bottom-card ul {
    margin-top: 2rem;
    text-align: center;
}

ul li {
    color: #6a5454;
    list-style: none;
    line-height: 26px;
}

.card:hover {
    transform: scale(1.02);
}

.card:hover .bottom-card {
    box-shadow: 0 0px 11px rgb(0 0 0 / 50%);
}

.card:hover ul li {
    color: #000;
}

.btn {
    padding: 10px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    position: absolute;
    text-align: center;
    font-size: 14px;
    color: #fff;
    bottom: 30px;
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad