Pricing Card using HTML and CSS Source Code

Hey, developers welcome to Day 5 of our 90Days 90Projects challenge. And in Day 5 we are going to create pricing cards using HTML and CSS.

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

Preview

pricing card ui, pricing card ui design, pricing card using html and css, pricing card codepen, pricing card bootstrap, pricing card design, pricing card 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> Pricing Card </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h2 class="price-heading"> Pricing </h2>
    <div class="pricing-container">
        <div class="pricing-item">
            <h3 class="pricing-kit">Personal</h3>
            <p class="pricing"><sup>$</sup>15 <sub>/MO</sub> </p>
            <ul class="offers">
                <li>2 websites</li>
                <li>30GB SSD</li>
                <li>1 Domain</li>
                <li>1 Email</li>
                <li>1x CPU & RAM</li>
            </ul>
            <button class="order-btn">order now</button>
        </div>
        <div class="pricing-item">
            <h3 class="pricing-kit">Premium</h3>
            <p class="pricing"><sup>$</sup>30 <sub>/MO</sub> </p>
            <ul class="offers">
                <li>50 websites</li>
                <li>60GB SSD</li>
                <li>5 Domain</li>
                <li>20 Email</li>
                <li>2x CPU & RAM</li>
            </ul>
            <button class="order-btn">order now</button>
        </div>
        <div class="pricing-item">
            <h3 class="pricing-kit">Ultimate</h3>
            <p class="pricing"><sup>$</sup>100 <sub>/MO</sub> </p>
            <ul class="offers">
                <li>100 websites</li>
                <li>200GB SSD</li>
                <li>10 Domain</li>
                <li>10 Email</li>
                <li>2x CPU & RAM</li>
            </ul>
            <button class="order-btn">order now</button>
        </div>
    </div>
</body>
<!-- Pricing Card design using HTML CSS by raju_webdev -->
</html>



CSS Code

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

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

body {
    background-color: darkorchid;

}

.price-heading {
    text-align: center;
    font-size: 3rem;
    margin: 1rem 0;
    color: #fff;
}

.pricing-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.pricing-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 5rem 2rem 5rem;
    background-color: white;
    margin: 0 1rem;
    overflow: hidden;
    cursor: pointer;
    transition: .2s all linear;
    margin-bottom: 2rem;
    border-radius: 0 0 0.5rem 0.5rem;
}

.pricing-item:hover {
    transform: scale(1.01);
    box-shadow: 0 1rem 1rem 0rem #753a93;
}

.pricing-item li {
    list-style: none;
}

.pricing {
    font-size: 1.5rem;
    margin: 1rem 0;
    color: skyblue;
    font-weight: bold;
}

.pricing-kit {
    font-size: 1.3rem;
    background-color: skyblue;
    padding: .7rem 1.5rem;
    border-radius: 0 0 2rem 2rem;
}

.pricing-item:hover .pricing-kit {
    box-shadow: 0 0 0 50rem skyblue;
}

.pricing-item:hover .order-btn {
    background-color: skyblue;
    color: white;
    font-weight: bold;
    border-color: white;
}

.pricing-item:hover .pricing {
    color: black;
    transition: .4s linear;
}

.offers li {
    font-size: 1.2rem;
    margin: 0.5rem 0;
}

.order-btn {
    border: none;
    border: 2px solid skyblue;
    background-color: transparent;
    color: skyblue;
    cursor: pointer;
    margin-top: 2rem;
    padding: .7rem 1rem;
    border-radius: 2rem;
    font-weight: bold;
}

.order-btn:hover {
    background-color: skyblue;
    color: white;
    font-weight: bold;
    border-color: white;
}

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