Responsive Pricing Table

Hey, developer today is Day 79 of our 90Projects in 90Days. And today in this challenge, we are going to Create Responsive Pricing Tables.

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.

Preview

Google Homepage HTML and CSS code, raju webdev, geeks help, google search page html code,google homepage clone, HTML code for Google search page


Image Resources: Download Now

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> Pricing Table </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="table-container">
        <div class="table-item">
            <h2 class="price">$99</h2>
            <h2 class="heading"> BUDGET </h2>
            <h3 class="plan"> Monthly Plan </h3>
            <img src="./image.jpg" alt="">
            <article class="content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur a incidunt vitae nobis, sunt ea
                    assumenda possimus. Cum repellendus accusamus quia quis. Fugiat!</p>
            </article>
            <button class="btn"> Choose Plan </button>
        </div>
        <div class="table-item">
            <h2 class="price">$199</h2>
            <h2 class="heading"> STANDARD </h2>
            <h3 class="plan"> Monthly Plan </h3>
            <img src="./image.jpg" alt="">
            <article class="content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur a incidunt vitae nobis, sunt ea
                    assumenda possimus. Cum repellendus accusamus quia quis. Fugiat!</p>
            </article>
            <button class="btn"> Choose Plan </button>
        </div>
        <div class="table-item">
            <h2 class="price">$299</h2>
            <h2 class="heading"> PREMIUM </h2>
            <h3 class="plan"> Monthly Plan </h3>
            <img src="./image.jpg" alt="">
            <article class="content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur a incidunt vitae nobis, sunt ea
                    assumenda possimus. Cum repellendus accusamus quia quis. Fugiat!</p>
            </article>
            <button class="btn"> Choose Plan </button>
        </div>
        <div class="table-item">
            <h2 class="price">$399</h2>
            <h2 class="heading"> CRYSTAL </h2>
            <h3 class="plan"> Monthly Plan </h3>
            <img src="./image.jpg" alt="">
            <article class="content">
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur a incidunt vitae nobis, sunt ea
                    assumenda possimus. Cum repellendus accusamus quia quis. Fugiat!</p>
            </article>
            <button class="btn"> Choose Plan </button>
        </div>
    </div>

</body>
</html>


CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.table-container {
    width: 100%;
    display: flex;
    padding: 20px;
    flex-wrap: wrap;
}

.table-item {
    border: 1px solid rgb(184, 171, 171);
    display: flex;
    border-radius: 10px;
    margin: 20px 10px;
    width: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s;
}

.table-item:hover {
    transform: scale(1.1);
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.164);
}

.table-item img {
    width: 90%;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.price {
    color: #fff;
    background-color: #1b263c;
    padding: 10px;
    display: none;
    transition: all 0.4s;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    width: 100%;
    text-align: center;
}

.heading {
    margin: 10px;
}

.plan {
    color: #737373;
}

article {
    text-align: center;
    margin: 20px 8px;
}

button {
    width: auto;
    background-color: #1b263c;
    padding: 10px;
    color: #fff;
    margin: 10px 0;
    font-weight: 400;
    cursor: pointer;
    border: none;
    transition: all 0.5s;
}

button:hover {
    width: 100%;
}

.table-item:hover .price {
    display: block;
    transition: all 0.4s;
}


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