Pricing Card Design using HTML and CSS

0
























Hello Developers, we present to you a modern and visually appealing pricing table that showcases four distinct plans: Free, Basic, Standard, and Premium. This pricing table snippet, meticulously crafted using HTML and CSS, provides a clear and attractive display of your pricing options, making it easy for users to compare features and choose the plan that best suits their needs. The pricing table is designed to be user-friendly and fully responsive, ensuring optimal viewing across all devices, whether on a desktop, tablet, or smartphone. The clean and professional layout enhances the overall user experience, with each plan clearly separated and distinct, yet harmoniously integrated into the overall design. The Free plan offers a cost-effective entry point, while the Basic, Standard, and Premium plans scale up with additional features and benefits, catering to a variety of user requirements and preferences. By incorporating this HTML and CSS pricing table snippet into your website, you are not only providing essential information but also showcasing a commitment to quality and professional web design. This snippet demonstrates your attention to detail and your dedication to offering a seamless and aesthetically pleasing user experience. Engage your audience and drive conversions with this elegant and functional pricing table, designed to meet the high standards of contemporary web development.

How to make Pricing card 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>Responsive Pricing card Using HTML & CSS</title> <meta name="description" content="Responsive Pricing 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,list"> <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"> <table> <tr> <th>PRICING TABLE</th> <th style="background-color: rgb(3, 245, 165);">FREE <div class="line"></div><h2>$0.00</h2> <h5>per month</h5></th> <th style="background-color:rgb(106, 106, 223);">BASIC <div class="line"></div><h2>$9.99</h2> <h5>per month</h5></th> <th style="background-color: rgb(206, 183, 49);">STANDARD <div class="line"></div><h2>$15.99</h2> <h5>per month</h5></th> <th style="background-color: rgb(235, 87, 87);">PREMIUM <div class="line"></div><h2>$24.99</h2> <h5>per month</h5></th> </tr> <tr> <td>Some Options</td> <td>✅</td> <td>✅</td> <td>✅</td> <td>✅</td> </tr> <tr> <td>Some Options</td> <td>✅</td> <td>✅</td> <td>✅</td> <td>✅</td> </tr> <tr> <td>Some Options</td> <td>❌</td> <td>✅</td> <td>✅</td> <td>✅</td> </tr> <tr> <td>Some Options</td> <td>❌</td> <td>✅</td> <td>✅</td> <td>✅</td> </tr> <tr> <td>Some Options</td> <td>❌</td> <td>❌</td> <td>✅</td> <td>✅</td> </tr> <tr> <td>Some Options</td> <td>❌</td> <td>❌</td> <td>❌</td> <td>✅</td> </tr> <tr> <td></td> <td><button><span>BUY NOW</span></button></td> <td><button><span>BUY NOW</span></button></td> <td><button><span>BUY NOW</span></button></td> <td><button><span>BUY NOW</span></button></td> </tr> </table> </div> </div> <div class="credit">Made with <span>❤ </span>by<a href="https://www.learningrobo.com/">learningrobo</a></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;
}

body {
    color: #fff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #000;
}

.container {
    display: flex;
    background: rgb(255, 255, 255);
    margin: auto;
    height: 100vh;
    width: 100vw;
    justify-content: center; 
    align-items: center; 
    font-family: 'Roboto', sans-serif;
}

.p1 {
    height: 470px;
    width: 900px;
    background-color: #555;
    display: flex;
    margin: auto;
    border-radius: 10px;
    justify-content: center; 
    align-items: center; 
}

.p1 table {
    border: 2px solid #222;
    border-collapse: collapse;
    width: 100%;
}

table th {
    background-color: #222; 
    color: #fff;
    text-align: center;
    padding:10px;
}
table td {
    text-align: center;
    padding: 10px;
}

table td:first-child {
    text-align: left;
}

table td button {
    background-color: #ff66b2; 
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

table td button:hover {
    background-color: #ff3385; 
    transform: scale(1.1);
    border: 1px solid aquamarine;
}
table, th, td {
    border:2px solid rgb(255, 255, 255);
    border-collapse: collapse;

}
.line{
    border: 1px solid grey;
    width: 80%;
    margin: auto;
}
@media screen and (max-width: 680px) {
    .p1{
        height: auto;
        width: auto;
    }
}
.credit a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 800;
}
  
.credit {
    color: #ffffff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:#ffffff;
    font-size:20px;
}
We hope you would like this Pricing Card Design using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Pricing Card 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.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
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.




Tags:

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome