Pasted

<!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">
    <title>Invoice Demo Template</title>
 
    <!-- Pure CSS -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
 
    <style>
        .right {
            float: right;
        }
 
        .text_right {
            text-align: right;
        }
 
        .text_left {
            text-align: left;
        }
 
        .text_center {
            text-align: center;
        }
 
        address {
            margin-bottom: 20px;  
            line-height: 1.4;
        }
 
        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 4px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
        }
 
        .panel_heading {
            padding: 10px 15px;
            border-bottom: 1px solid transparent;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
        }
 
        .panel_default {
            background-color: #ddd;
        }
 
        .panel_default > .panel_heading {
            color: black;
            background-color: #f5f5f5;
            border-color: #ddd;
        }
 
        .panel_title {
            margin: 0px !important;
            font-size: 16px;
            color: inherit;
        }
 
        .panel_body {
            padding: 15px;
            background-color: #fff;
        }
 
        table {
            width: 100%;
        }
 
        .thick_line {
            border-top: 2px solid black !important;
        }
 
        .no_line {
            border-top: none !important;
        }
 
        .address_section {
            margin-top: 10px;
            border-top: 1px solid black;
        }
        #details {
            width: 100%;
        }
        tfoot {
            font-weight: 700;
            border-top: 1px solid black;
        }
 
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            text-align: center;
        }
    </style>
 
</head>
 
<body>
    <!--container -->
    <div class="pure-g">
        <!-- Left column -->
        <div class="pure-u-2-24">
            <div class="pure-u-1">
                &nbsp;
            </div>
        </div>
        <!-- Center column -->
        <div class="pure-u-20-24">
            <div class="pure-g">
                <div class="pure-u-1-2">
                    <img class="pure-img" id="imglogo" src="https://dummyimage.com/160x120/000/fff" alt="Logo" />
                </div>
                <div class="pure-u-1-2">
                    <h2 class="right">Invoice #<span id="invoicenum"></span></h2>
                </div>
            </div>
            <div class="pure-g address_section">
                <div class="pure-u-1-2">
                    <strong>Bill From:</strong>
                    <address id="billfrom">
                        John Smith<br>
                        1234 Main<br>
                        Apt. 4B<br>
                        Springfield, ST 54321
                    </address>
                </div>
                <div class="pure-u-1-2 text_right">
                    <strong>Bill To:</strong>
                    <address id="billto">
                        Jane Smith<br>
                        1234 Main<br>
                        Apt. 4B<br>
                        Springfield, ST 54321
                    </address>
                </div>
            </div>
            <div class="pure-g">
                <div class="pure-u-1-2">
                    <strong>Date:</strong>
                    <span id="invoicedate"></span>
                </div>
                <div class="pure-u-1-2 text_right">
                    <strong>Due Date:</strong>
                    <span id="invoicedudate"></span>
                </div>
 
            </div>
            <div class="pure-g">
                <div class="pure-u-1 panel panel_default">
                    <div class="panel_heading">
                        <h3 class="panel_title"><strong>Invoice summary</strong></h3>
                    </div>
                    <div class="panel_body">
                        <div class="table_responsive">
                            <table id="productItems" class="pure-table pure-table-bordered">
                                <thead>
                                    <tr>
                                        <td><strong>Item</strong></td>
                                        <td class="text_center"><strong>Price</strong></td>
                                        <td class="text_center"><strong>Quantity</strong></td>
                                        <td class="text_right"><strong>Totals</strong></td>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr id="totalrow">
                                        <td>&nbsp;</td>
                                        <td>&nbsp;</td>
                                        <td class="text-center"><strong>Subtotal</strong></td>
                                        <td class="text-right">$670.99</td>
                                    </tr>
                                </tfoot>
                                <tbody>
                                    <tr id="productrow">
                                        <td>BS-200</td>
                                        <td class="text_center">$10.99</td>
                                        <td class="text_center">1</td>
                                        <td class="text_right">$10.99</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pure-g">
                <div id="details" class="pure-u-1">
                    Pure has a mobile-first responsive grid system that can be used declaratively through CSS class names. It's a robust and flexible grid that builds on top of the default grid.
                </div>
            </div>
        </div>
        <!-- Right column -->
        <div class="pure-u-2-24">
            <div class="pure-u-1">
                &nbsp;
            </div>
        </div>
    </div>
    <footer class="footer">
        <p>Footer</p>
    </footer>
</body>
 
</html>