Create Invoice Template design using html & css

By Super Admin | Jan 13, 2021 | Laravel
Share : Whatsapp

https://www.fundaofwebit.com/post/how-to-create-html-invoice-template-design-using-html-css

How to create or build Invoice Template design using html & css.

In this article, we are going to do about how to make an invoice template design using html css for confirm order.

i have designed an invoice template as given below picture:



The code for above invoice picture given below :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fabcart</title>
    <style>
        body{
            background-color#F6F6F6
            margin0;
            padding0;
        }
        h1,h2,h3,h4,h5,h6{
            margin0;
            padding0;
        }
        p{
            margin0;
            padding0;
        }
        .container{
            width80%;
            margin-rightauto;
            margin-leftauto;
        }
        .brand-section{
           background-color#0d1033;
           padding10px 40px;
        }
        .logo{
            width50%;
        }

        .row{
            displayflex;
            flex-wrapwrap;
        }
        .col-6{
            width50%;
            flex0 0 auto;
        }
        .text-white{
            color#fff;
        }
        .company-details{
            floatright;
            text-alignright;
        }
        .body-section{
            padding16px;
            border1px solid gray;
        }
        .heading{
            font-size20px;
            margin-bottom08px;
        }
        .sub-heading{
            color#262626;
            margin-bottom05px;
        }
        table{
            background-color#fff;
            width100%;
            border-collapsecollapse;
        }
        table thead tr{
            border1px solid #111;
            background-color#f2f2f2;
        }
        table td {
            vertical-alignmiddle !important;
            text-aligncenter;
        }
        table thtable td {
            padding-top08px;
            padding-bottom08px;
        }
        .table-bordered{
            box-shadow0px 0px 5px 0.5px gray;
        }
        .table-bordered td.table-bordered th {
            border1px solid #dee2e6;
        }
        .text-right{
            text-alignend;
        }
        .w-20{
            width20%;
        }
        .float-right{
            floatright;
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="brand-section">
            <div class="row">
                <div class="col-6">
                    <h1 class="text-white">FABCART</h1>
                </div>
                <div class="col-6">
                    <div class="company-details">
                        <p class="text-white">assdad asd  asda asdad a sd</p>
                        <p class="text-white">assdad asd asd</p>
                        <p class="text-white">+91 888555XXXX</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="body-section">
            <div class="row">
                <div class="col-6">
                    <h2 class="heading">Invoice No.: 001</h2>
                    <p class="sub-heading">Tracking No. fabcart2025 </p>
                    <p class="sub-heading">Order Date: 20-20-2021 </p>
                    <p class="sub-heading">Email Address: customer@gfmail.com </p>
                </div>
                <div class="col-6">
                    <p class="sub-heading">Full Name:  </p>
                    <p class="sub-heading">Address:  </p>
                    <p class="sub-heading">Phone Number:  </p>
                    <p class="sub-heading">City,State,Pincode:  </p>
                </div>
            </div>
        </div>

        <div class="body-section">
            <h3 class="heading">Ordered Items</h3>
            <br>
            <table class="table-bordered">
                <thead>
                    <tr>
                        <th>Product</th>
                        <th class="w-20">Price</th>
                        <th class="w-20">Quantity</th>
                        <th class="w-20">Grandtotal</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Product Name</td>
                        <td>10</td>
                        <td>1</td>
                        <td>10</td>
                    </tr>
                    <tr>
                        <td colspan="3" class="text-right">Sub Total</td>
                        <td> 10.XX</td>
                    </tr>
                    <tr>
                        <td colspan="3" class="text-right">Tax Total %1X</td>
                        <td> 2</td>
                    </tr>
                    <tr>
                        <td colspan="3" class="text-right">Grand Total</td>
                        <td> 12.XX</td>
                    </tr>
                </tbody>
            </table>
            <br>
            <h3 class="heading">Payment Status: Paid</h3>
            <h3 class="heading">Payment Mode: Cash on Delivery</h3>
        </div>

        <div class="body-section">
            <p>&copy; Copyright 2021 - Fabcart. All rights reserved. 
                <a href="https://www.fundaofwebit.com/" class="float-right">www.fundaofwebit.com</a>
            </p>
        </div>      
    </div>      

</body>
</html>


hope it helps you.