Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
6.6 kB
1
Indexable
Never
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <title>Flower Order</title>
        <style>
            @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700');
            body {
                font-family: 'Roboto Condensed', sans-serif;
                color: #262626;
                margin: 5% 0;
            }
            .container {
                width: 100%;
                padding-right: 15px;
                padding-left: 15px;
                margin-right: auto;
                margin-left: auto;
            }
            @media (min-width: 1200px) {
                .container {
                    max-width: 1140px;
                }
            }
            .d-flex {
                display: flex;
                flex-direction: row;
                background: #f6f6f6;
                border-radius: 0 0 5px 5px;
                padding: 25px;
            }
            form {
                flex: 3;
                margin-right: 15px;
            }
            .Yorder {
                flex: 2;
                margin-top: 15px;
                height: 600px;
                padding: 20px;
                border: 1px solid #dadada;
            }
            .title {
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0, #5195A8), color-stop(100, #70EAFF));
                background: -moz-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
                background: -ms-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
                background: -o-linear-gradient(top left, #5195A8 0%, #70EAFF 100%);
                background: linear-gradient(to bottom right, #5195A8 0%, #70EAFF 100%);
                border-radius: 5px 5px 0 0;
                padding: 20px;
                color: #f6f6f6;
            }
            h2 {
                margin: 0;
                padding-left: 15px;
            }
            label {
                display: block;
                margin: 15px;
            }
            input[type="email"],
            input[type="text"],
            input[type="tel"],
            textarea {
                width: 100%;
                height: 30px;
                padding: 5px 10px;
                margin-bottom: 10px;
                border: 1px solid #dadada;
                color: #888;
            }
            select {
                width: 100%;
                height: 45px;
                padding: 5px 10px;
                margin-bottom: 10px;
            }
            table {
                margin: 0;
                padding: 0;
                width: 100%;
            }
            th {
                border-bottom: 1px solid #dadada;
                padding: 10px 0;
            }
            td {
                border-bottom: 1px solid #dadada;
                padding: 25px 0;
            }
            p {
                display: block;
                color: #888;
                margin: 0;
                padding-left: 25px;
            }
            .Yorder>div {
                padding: 15px 0;
            }
            .subtotal {
                text-align: left;
                color: #2d2d2a;
            }
            .payment-options {
                margin-top: 20px;
            }
            button {
                width: 100%;
                margin-top: 10px;
                padding: 10px;
                border: none;
                border-radius: 30px;
                background: #52ad9c;
                color: #fff;
                font-size: 15px;
                font-weight: bold;
            }
            button:hover {
                cursor: pointer;
                background: #428a7d;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="title">
                <h2>Flower Order</h2>
            </div>
            <div class="d-flex">
                <form action="" method="">
                    <label>
                        <span class="fname">Full Name<span class="required"></span></span>
                        <input type="text" name="fname" required>
                    </label>

                    <label>
                        <span>Address<span class="required"></span></span>
                        <input type="text" name="houseadd" placeholder="House number and street name" required>
                    </label>

                    <label>
                        <span>Phone Number<span class="required"></span></span>
                        <input type="tel" name="city" required>
                    </label>

                    <label>
                        <span>Email Address<span class="required"></span></span>
                        <input type="email" name="city" required>
                    </label>

                    <label>
                        <span>Note</span>
                        <textarea name="note" placeholder="Note" ></textarea>
                    </label>
                </form>
                <div class="Yorder">
                    <table>
                        <tr>
                            <th colspan="2">Your order</th>
                        </tr>
                        <tr>
                            <td class="subtotal">Product Name x 2 (Qty)</td>
                        </tr>
                        <tr>
                            <td>Subtotal</td>
                            <td>$8.00</td>
                        </tr>
                        <tr>
                            <td>Shipping</td>
                            <td>Free shipping</td>
                        </tr>
                    </table><br>
                    <div class="payment-options">
                        <input type="radio" name="dbt" value="dbt" checked>Direct Bank Transfer
                        <p>Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order will not be shipped until the funds have cleared in our account.</p>
                        <input type="radio" name="dbt" value="cd">Cash on Delivery
                    </div>

                    <button type="button">Place Order</button>
                </div>
            </div>
        </div>
    </body>
</html>