<body>
    <div class="update-notification">
        <p><strong>Important Notice:</strong> My website is still under development,Some features may not be available-DEV[kissi]</p>
    </div>
   
    <header>
        <nav>
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/cart">Cart</a></li>
                <li><a href="/checkout">Checkout</a></li>
            </ul>
        </nav>
    </header>

    <h1>KISSI'S CLOTHING LINE</h1>
    <h2><em><marquee>HOME FOR YOUR QUALITY OUTFITS</marquee></em></h2>

    
    <div class="products">
        <div class="product">
            <img src="OIP.jpeg" alt="Stylish Shirt">
            <h3>Stylish Shirt</h3>
            <p>₵29.99</p>
            <a href="/product/1" class="btn">View Product</a>
        </div>
        <div class="product">
            <img src="cool hoodie.jpeg" alt="Cool Hoodie">
            <h3>Cool Hoodie</h3>
            <p>₵49.99</p>
            <a href="/product/2" class="btn">View Product</a>
        </div>
    </div>

    
    <div class="product-detail">
        <img src="stylish shirt.jpeg" alt="Stylish Shirt">
        <h3>Stylish Shirt</h3>
        <p>₵29.99</p>
        <button>Add to Cart</button>
    </div>

   
    <div class="cart">
        <h2>Your Cart</h2>
        <ul>
            <li>
                <span>Stylish Shirt - ₵29.99</span>
            </li>
            <li>
                <span>Cool Hoodie - ₵49.99</span>
            </li>
        </ul>
        <a href="/checkout" class="btn">Proceed to Checkout</a>
    </div>

    
    <div class="checkout">
        <h2>Checkout</h2>
        <form action="/submit-order" method="POST">
            <label for="name">Full Name</label>
            <input type="text" id="name" name="name" required>

            <label for="address">Shipping Address</label>
            <input type="text" id="address" name="address" required>

            <label for="payment">Payment Information</label>
            <input type="text" id="payment" name="payment" required>

            <button type="submit">Place Order</button>
        </form>
    </div>

   
    <div class="signature">
        <h3>Website Developed By:</h3>
        <p><strong>Kissi Dev ©2024</strong></p>
    </div>

</body>
</html>

        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f7f7f7;
            color: #333;
            line-height: 1.6;
        }

        header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }

        nav ul {
            list-style-type: none;
            display: flex;
            justify-content: center;
        }

        nav ul li {
            margin-right: 30px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: #ff6347;
        }

      
        h1 {
            text-align: center;
            margin-top: 50px;
            font-size: 2.5em;
            color: #333;
        }

        h2 {
            text-align: center;
            font-size: 1.3em;
            margin-top: 20px;
            font-style: italic;
            color: #444;
        }

        .products {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .product {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .product:hover {
            transform: translateY(-10px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }

        .product img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .product h3 {
            font-size: 1.5em;
            margin: 10px 0;
            color: #333;
        }

        .product p {
            font-size: 1.1em;
            margin-bottom: 10px;
            color: #555;
        }

        .btn {
            background-color: #333;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #ff6347;
        }

       
        .product-detail {
            text-align: center;
            padding: 50px 20px;
            background-color: #fff;
            margin: 30px auto;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            max-width: 600px;
        }

        .product-detail img {
            max-width: 400px;
            margin-bottom: 20px;
            border-radius: 8px;
        }

        .product-detail h3 {
            font-size: 2em;
            margin: 20px 0;
            color: #333;
        }

        .product-detail button {
            padding: 10px 20px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.1em;
            transition: background-color 0.3s;
        }

        .product-detail button:hover {
            background-color: #ff6347;
        }

       
        .cart ul {
            list-style-type: none;
            padding: 0;
            margin-top: 20px;
        }

        .cart ul li {
            padding: 10px;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .remove-btn {
            background-color: #ff6347;
            color: white;
            padding: 5px 10px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s;
        }

        .remove-btn:hover {
            background-color: #cc4e2b;
        }

        
        .checkout form {
            width: 100%;
            max-width: 500px;
            margin: 50px auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .checkout label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }

        .checkout input {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 1em;
        }

        .checkout button {
            padding: 10px 20px;
            background-color: #333;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.1em;
            width: 100%;
            transition: background-color 0.3s;
        }

        .checkout button:hover {
            background-color: #ff6347;
        }

        
        .signature {
            text-align: center;
            padding: 20px;
            background-color: #fff;
            margin: 50px auto;
            max-width: 600px;
            font-style: italic;
        }

        .signature h3 {
            font-size: 1.5em;
            color: #333;
        }

        .signature p {
            font-size: 1.2em;
            color: #555;
        }

        
        @media (max-width: 768px) {
            .products {
                flex-direction: column;
                align-items: center;
            }

            header {
                padding: 10px;
            }

            h1 {
                font-size: 2em;
            }

            .product-detail {
                padding: 30px;
                width: 90%;
            }

            .cart ul li {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    </style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.