Pricing Card UI design using HTML and CSS




































Hello Developers, We present to you a dynamic and visually appealing responsive pricing card design that displays your pricing information at a glance. This responsive pricing card design snippet has been meticulously crafted using HTML and CSS. With HTML and CSS, you can create pricing card sections that present your data in an aesthetically pleasing and clear way. By utilizing HTML for structure and CSS for styling, you can enhance the visual appeal of the cards, incorporating features like hover effects and animations. Since this markup is responsive, your pricing cards will be interactive and accessible on any device, be it a desktop, laptop, tablet, or smartphone. By adopting this HTML & CSS pricing card snippet, you are not only sharing your pricing information but also demonstrating your commitment to professionalism and modern web design principles. These cards allow you to showcase your pricing options in a dynamic and creative way, making it easy to communicate the value of your offerings to the world. Show off your commitment to innovation with this beautifully designed responsive pricing card snippet.

How to make Pricing card UI design using html and css.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <title>Pricing Card UI design - learningrobo</title> <meta name="description" content="Responsive Profile card Using HTML & CSSt. Made by learningrobo.com"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="responsive,learningrobo.com,html & css projects,project,pricing card"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="styles.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap" rel="stylesheet"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="p1"> <div class="d1"> <div class="title1"> <h1>SIMPLE</h1> </div> <div class="sub2"> <h5>$</h5> <h1>19</h1> <h5>99 <sub>/month</sub></h5> </div> <div class="sub3"> <ul> <li>✅10 Email Accounts</li> <br> <li>✅500GB Space</li> <br> <li>✅1 Domain Name</li> <br> <li>✅400GB Bandwidth</li> <br> </ul> </div> <div class="but"> <button><span>Add to cart</span></button> </div> </div> <div class="d2"> <div class="title2"> <h1>STANDARD</h1> </div> <div class="sub2"> <h5>$</h5> <h1>39 </h1> <h5>99 <sub>/month</sub></h5> </div> <div class="sub3"> <ul> <li>✅15 Email Accounts</li> <br> <li>✅1TB Space</li> <br> <li>✅1 Domain Name</li> <br> <li>✅500GB Bandwidth</li> <br> </ul> </div> <div class="but"> <button><span>Add to cart</span></button> </div> </div> <div class="d3"> <div class="title3"> <h1>PREMIUM</h1> </div> <div class="sub2"> <h5>$</h5> <h1>69</h1> <h5>99 <sub>/month</sub></h5> </div> <div class="sub3"> <ul> <li>✅30 Email Accounts</li> <br> <li>✅2TB Space</li> <br> <li>✅2 Domain Name</li> <br> <li>✅600GB Bandwidth</li> <br> </ul> </div> <div class="but"> <button><span>Add to cart</span></button> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by<a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
*{
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100vw;
    display: flex;
    background-color: rgb(232, 232, 232);
    margin: 0;
    justify-content: center;
    font-family: 'Roboto', sans-serif;
    flex-direction: column;
}
.p1{
    height: 500px ;
    width: 900px;
    background-color: transparent;
    display: flex;
    margin: auto;
    justify-content: space-evenly;
    border-radius: 10px;
}
.d1{
    height: 89%;
    width: 30%;
    background-color: rgb(255, 255, 255);
    display: flex;
    margin: auto;
    box-shadow: 10px 10px rgb(160, 154, 160);
    flex-direction: column;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.d2{
    height: 89%;
    width: 30%;
    background-color: rgb(255, 255, 255);
    display: flex;
    margin: auto;
    box-shadow: 10px 10px rgb(160, 154, 160);
    flex-direction: column;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.d3{
    height: 89%;
    width: 30%;
    background-color: rgb(255, 255, 255);
    display: flex;
    margin: auto;
    box-shadow: 10px 10px rgb(160, 154, 160);
    flex-direction: column;
    border-radius: 10px;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}
.title1  {
    height: 15%;
    width: auto;
    display: flex;
    justify-content: center;
    background: linear-gradient(to right,rgb(233, 151, 255),rgb(155, 147, 255));
    align-items: center;
    border-radius: 10px;
    color: white;
}
.title2 {
    height: 15%;
    width: auto;
    display: flex;
    justify-content: center;
    background: linear-gradient(to right,rgb(255, 151, 152),rgb(220, 147, 255));
    align-items: center;
    border-radius: 10px;
    color: white;
}
.title3  {
    height: 15%;
    width: auto;
    display: flex;
    justify-content: center;
    background: linear-gradient(to right,rgb(255, 157, 151),rgb(255, 218, 147));
    align-items: center;
    border-radius: 10px;
    color: white;
}
.sub2{
    display: flex;
    height: 20%;
    width: auto;
    justify-content: center;
}
.line{
    border: 1px solid white;
    width: 80%;
    
}
.sub3{
    height: 40%;
    display: flex;
    flex-direction: column;
}
.sub3 ul li{
    list-style-type: none;
}
.but{
    height: auto;
    width: auto;
    display: flex;
}
.but button{
    display: flex;
    margin: auto;
    justify-content: center;
    border: 2px solid #606060;
    height: 50px;
    width: 200px;
    text-align: center;
    background-color: rgb(255, 255, 255);
    border-radius: 30px;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    cursor: pointer;
}
.but button span{
    display: flex;
    margin: auto;
    justify-content: center;
    text-align: center;
    font-size: 15px;
}
.but button:hover{
    background-color: grey;
    color: rgb(255, 255, 255);
    transform: scale(1.1);
    border: 2px solid rgb(219, 219, 219);
}
.d1:hover{
    transform: scale(1.1);
}
.d2:hover{
    transform: scale(1.1);
}
.d3:hover{
    transform: scale(1.1);
}
@media screen and (max-width: 900px){
    .container{
        height: auto;
        width: auto;
    }
    .p1{
        display: flex;
        flex-direction: column;
        height: 1700px;
        width: 500px;
    }
    .d1{
        display: flex;
        height: 500px;
        width: 300px;
    }
    .d2{
        display: flex;
        height: 500px;
        width: 300px;
    }
    .d3{
        display: flex;
        height: 500px;
        width: 300px;
    }
}
.credit a {
    text-decoration: none;
    color: #121212;
    font-weight: 800;
}
  
.credit {
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:#000;
    font-size:20px;
}     
We hope you would like this Pricing card UI design using html and css.

Thank you for reading our blog. If you face any problem in Creating a Pricing card UI design using html and css., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.




Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome