Product Bill Card using HTML and CSS

0















Hello Developers, Learning Robo offers a dynamic and visually appealing product card snippet that presents the information at a glance. This product card snippet was precisely created using HTML and CSS. A bill table snippet with HTML and CSS is a great way to present your bill data in a visually appealing and clear way. Using HTML structure and CSS styling features, you can make bill tables that effectively convey information and improve usability. With CSS, you can add hover effects and a responsive design so that your tables are interactive and can be accessed on different devices. This bill table is also fully responsive, so you can display your data on any device, whether it’s a desktop, laptop, tablet or smartphone. With this HTML and CSS-powered product card snippet, you're not only sharing information, but also making a statement about your commitment to professionalism and modern web design. Impress, engage and connect with the world through this creative and informative product card snippet. Note: CSS is located in a separate file attached to the HTML file.

How to make Product Bill Card 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> <head> <title>Table UI design - learningrobo</title> <meta name="description" content="Table UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="table,responsive,learningrobo.com,html & css projects,project"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="section1"> <div class="card"> <div class="cardin2"> <table> <caption>Online Market Bill</caption> <tr> <th>Item name</th> <th>Quantity</th> <th>Price</th> </tr> <tr> <td>Dhal</td> <td>3 kg</td> <td>200$</td> </tr> <tr> <td>Wheet</td> <td>2 kg</td> <td>150$</td> </tr> <tr> <td>Maida</td> <td>1 kg</td> <td>100$</td> </tr> <tr> <td>Pepper</td> <td>1 kg</td> <td>100$</td> </tr> <tr> <td>Washing Soap</td> <td>1 nos</td> <td>10$</td> </tr> <tr> <td>Washing Powder</td> <td>1</td> <td>60$</td> </tr> <tr> <td colspan="2">Total</td> <td>720$</td> </tr> </table> <button>Check out</button> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </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
**/
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
*{
    box-sizing: border-box;
}
body{
    font-family: Arial, sans-serif;
    margin:0%;
}
.section1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background: #8A2387;  
    background: -webkit-linear-gradient(to right, #F27121, #E94057, #8A2387); 
    background: linear-gradient(to right, #F27121, #E94057, #8A2387); 
}
.card{
    display: flex;
    flex-direction:column;
    justify-content:space-between;
    border-radius: 10px;
    width:700px;
    height:fit-content;
    background-color:#fff;
    padding:20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.cardin2{
    display: flex;
    flex-direction:column;
    align-items: center;
    height:fit-content;
    padding:5px; 
}
.cardin2 table{
    margin:10px 0px;
    width:100%;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.cardin2 table th{
    text-align: left;
    background-color: #ddd;
}
.cardin2 table,th,td{
    padding:10px;
}
.cardin2 table th:first-child{
    border-radius:10px 0 0 10px;
}
.cardin2 table th:last-child{
    border-radius:0 10px 10px 0;
}
.cardin2 table tr:last-child td:first-child{
    text-align:right;
}
.cardin2 table tr td:last-child{
    text-align:right;
}
.cardin2 button{
    margin:5px 5px 0 auto;
    border:none;
    padding:15px 25px;
    font-size:16px;
    background-color:rgb(77, 164, 77);
    border-radius:10px;
    color:#fff;
    transition:.5s;
}
.cardin2 button:hover{
    transform: scale(1.05);
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}
@media only screen and (max-width: 630px){
    .card{
        width:98%;
    }
    .cardin2{
        justify-content: center;
    }
}
.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;
}
We hope you would like this Product Bill Card using HTML and CSS.

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

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

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