- Danh sách sản phẩm trong giỏ hàng
- Tổng giá tiền
- Nút chuyển sang trang thanh toán
Code HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cara</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="css/style.css"> </head> <body> <header id="header"> <a href="#"><img src="img/logo.png" class="logo" alt=""></a> <ul id="navbar"> <li><a href="index.html">Home</a></li> <li><a href="shop.html">Shop</a></li> <li><a href="blog.html">Blog</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> <li><a class="active" href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a></li> <li><a href="user.html"><i class="fa-solid fa-user"></i></a></li> </ul> </header> <section id="page-header" class="about-header"> <h2>#let's_talk</h2> <p>LEAVE A MESSAGE, We love to hear from you!</p> </section> <section id="cart" class="section-p1"> <table width="100%"> <thead> <tr> <td>Remove</td> <td>Image</td> <td>Product</td> <td>Price</td> <td>Quantidy</td> <td>Subtotal</td> </tr> </thead> <tbody> <tr> <td><a href="#"></a><i class="fa-regular fa-circle-xmark"></i></td> <td><img src="img/products/f1.jpg" alt=""></td> <td>Cartoon Astronaut T-Shirts</td> <td>$118.19</td> <td><input type="number" value="1"></td> <td>$118.19</td> </tr> <tr> <td><a href="#"></a><i class="fa-regular fa-circle-xmark"></i></td> <td><img src="img/products/f2.jpg" alt=""></td> <td>Cartoon Astronaut T-Shirts</td> <td>$118.19</td> <td><input type="number" value="1"></td> <td>$118.19</td> </tr> <tr> <td><a href="#"></a><i class="fa-regular fa-circle-xmark"></i></td> <td><img src="img/products/f3.jpg" alt=""></td> <td>Cartoon Astronaut T-Shirts</td> <td>$118.19</td> <td><input type="number" value="1"></td> <td>$118.19</td> </tr> </tbody> </table> </section> <section id="cart-add" class="section-p1"> <div class="coupon"> <h3>Apply Coupon</h3> <div> <input type="text" placeholder="Enter Your Coupon"> <button class="normal">Apply</button> </div> </div> <div class="subtotal"> <h3>Cart Total</h3> <table> <tr> <td>Cart Subtotal</td> <td>$335</td> </tr> <tr> <td>Shipping</td> <td>Free</td> </tr> <tr> <td><strong>Total</strong></td> <td><strong>$335</strong></td> </tr> </table> <button class="normal">Proceed to checkout</button> </div> </section> <section id="newsletter" class="section-p1 section-m1"> <div class="newstext"> <h4>Sign Up For Newsletters</h4> <p>Get E-mail updates about our latest shop and <span>special offers</span></p> </div> <div class="form"> <input type="text" placeholder="Your email address"> <button class="normal">Sign up</button> </div> </section> <footer class="section-p1"> <div class="col"> <img class="logo" src="img/logo.png" alt=""> <h4>Contact</h4> <p><strong>Address:</strong> Cao Dang Cong Nghiep - Hueic</p> <p><strong>Phone:</strong> +84000111222</p> <p><strong>Hours:</strong> 8AM - 21PM, Mon - Sat</p> <div class="follow"> <h4>Follow us</h4> <div class="icon"> <i class="fa-brands fa-facebook-f"></i> <i class="fa-brands fa-twitter"></i> <i class="fa-brands fa-instagram"></i> <i class="fa-brands fa-pinterest-p"></i> <i class="fa-brands fa-youtube"></i> </div> </div> </div> <div class="col"> <h4>About</h4> <a href="#">About us</a> <a href="#">Delivery Information</a> <a href="#">Privacy Policy</a> <a href="#">Terms & Conditions</a> <a href="#">Contact Us</a> </div> <div class="col"> <h4>My Account</h4> <a href="#">Sign In</a> <a href="#">View Cart</a> <a href="#">My Wishlist</a> <a href="#">Track My Oder</a> <a href="#">Help</a> </div> <div class="col install"> <h4>Install App</h4> <p>From App Store or Google Play</p> <div class="row"> <img src="img/pay/app.jpg" alt=""> <img src="img/pay/play.jpg" alt=""> </div> <p>Secured Payment Gateaways</p> <img src="img/pay/pay.png" alt=""> </div> </footer> </body> </html>