Trang sản phẩm (product.html)
Trang sản phẩm hiển thị chi tiết về một sản phẩm cụ thể, bao gồm hình ảnh, mô tả, giá cả và nút thêm vào giỏ hàng.
Nội dung chính:
- Thanh điều hướng
- Hình ảnh sản phẩm
- Thông tin chi tiết sản phẩm
- Nút thêm vào giỏ hàng
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 class="active" 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 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="prodetails" class="section-p1">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="single-pro-img">
<img src="img/products/f1.jpg" alt="" id="MainImg" width="100%">
<div class="small-img-group">
<div class="col-sm-3">
<img src="img/products/f1.jpg" alt="" class="small-img" width="100%">
</div>
<div class="col-sm-3">
<img src="img/products/f2.jpg" alt="" class="small-img" width="100%">
</div>
<div class="col-sm-3">
<img src="img/products/f3.jpg" alt="" class="small-img" width="100%">
</div>
<div class="col-sm-3">
<img src="img/products/f4.jpg" alt="" class="small-img" width="100%">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="single-pro-details">
<h6>Home / T-Shirt</h6>
<h4>Men's Fashion T Shirt</h4>
<h2>$139.00</h2>
<select>
<option>Select Size</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
<option>XXL</option>
</select>
<input type="number" value="1">
<button class="normal">Add To Cart</button>
<h4>Product Details</h4>
<span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis excepturi beatae
facere
rerum nostrum. Sunt velit eius minus officia, soluta dolor pariatur dolorum maiores laborum
odio
sequi totam ipsum corrupti.</span>
</div>
</div>
</div>
</div>
</section>
<section id="product1" class="section-p1">
<h2>New Arrivals</h2>
<p>Summer Collection New Morden Design</p>
<div class="prod-cont">
<div class="prod">
<img src="img/products/n1.jpg" alt="">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut T-Shirts</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<a href="#"><i class="fa-solid fa-cart-shopping cart"></i></a>
</div>
<div class="prod">
<img src="img/products/n2.jpg" alt="">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut T-Shirts</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<a href="#"><i class="fa-solid fa-cart-shopping cart"></i></a>
</div>
<div class="prod">
<img src="img/products/n3.jpg" alt="">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut T-Shirts</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<a href="#"><i class="fa-solid fa-cart-shopping cart"></i></a>
</div>
<div class="prod">
<img src="img/products/n4.jpg" alt="">
<div class="des">
<span>adidas</span>
<h5>Cartoon Astronaut T-Shirts</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<h4>$78</h4>
</div>
<a href="#"><i class="fa-solid fa-cart-shopping cart"></i></a>
</div>
</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>