Files
giao_dien_web_mau/demo-thoitrang-2/product-detail.html
2023-04-13 10:48:43 +07:00

280 lines
14 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
</head>
<body>
<div class="product-detail">
<div class="global-breadcrumb">
<div class="container">
<div id="breadcrumb" class="breadcrumb">
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="home">
<a href="/" itemprop="item" class="nopad-l">
<span itemprop="name">Trang chủ</span>
<i>/</i>
</a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
<a href="/linh-kien-may-tinh/" itemprop="item">
<span itemprop="name">
Linh Kiện Máy Tính
</span> <span class="last-bre"> </span>
</a>
<meta itemprop="position" content="2">
</li>
</ol>
<div class="name">Beige Midi Woven Dress</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="container">
<div class="main-product-detail d-flex">
<div class="product-image-detail">
<div id="sync1" class="owl-theme owl-carousel custom-nav owl-loaded owl-drag">
<a class="item" href="./assets/images/image-big-detail-1.png" data-fancybox="gallery">
<img src="./assets/images/image-big-detail-1.png" alt="">
</a>
<a class="item">
<img src="./assets/images/image-big-detail-2.png" alt="">
</a>
<a class="item">
<img src="./assets/images/image-big-detail-3.jpg" alt="">
</a>
<a class="item">
<img src="./assets/images/image-big-detail-4.jpg" alt="">
</a>
<a class="item">
<img src="./assets/images/image-big-detail-5.jpg" alt="">
</a>
<a class="item">
<img src="./assets/images/image-big-detail-6.jpg" alt="">
</a>
</div>
<div id="sync2" class="owl-theme owl-carousel custom-nav owl-loaded owl-drag">
<a href="./assets/images/image-big-detail-1.png" class="item">
<img src="./assets/images/image-small-detail-1.png" alt="">
</a>
<a href="./assets/images/image-big-detail-2.png" class="item">
<img src="./assets/images/image-small-detail-2.png" alt="">
</a>
<a href="./assets/images/image-big-detail-3.jpg" class="item">
<img src="./assets/images/image-small-detail-3.png" alt="">
</a>
</div>
</div>
<div class="product-info-detail">
<h1 class="name">Beige Midi Woven Dress</h1>
<div class="d-flex align-items">
<div class="sku">MSP: 68220804001DI0210</div>
<div class="total-review d-flex align-items">
<i class="icon_star star5"></i>
<span>(1)</span>
</div>
</div>
<div class="main-price d-flex align-items">
<b class="price">1.148.000đ</b>
<del class="old-price">2.296.000đ</del>
</div>
<a href="javascript:void()" class="click-size">
<i class="icon_2023 size"></i>
<span>Hướng dẫn kích thước</span>
</a>
<div class="product-btn-cart">
<div class="btn-buy">
<a href="javascript:void(0)" class="buy-go-cart btn-buyNow js-buyNow" data-id="7882"
data-name="">
Mua ngay
</a>
</div>
<div class="btn-buy showrrom">
<a href="javascript:void(0)" class="showrrom">
<i class="icon_2023 map"></i>
<span>TÌM SẢN PHẨM TẠI SHOWROOM</span>
</a>
</div>
</div>
<div class="note-detail">
<div>
<p>MIỄN PHÍ GIAO HÀNG TOÀN QUỐC</p>
<span>(Cho hóa đơn từ 300.000đ)</span>
</div>
<div>
<p>ĐỔI TRẢ DỄ DÀNG</p>
<span>(Đổi trả trong 7 ngày với lỗi do nhà sản xuất)</span>
</div>
<div>
<p>TỔNG ĐÀI BÁN HÀNG 1800 1162</p>
<span>(Miễn phí từ 8h00 - 21:00 mỗi ngày)</span>
</div>
</div>
</div>
</div>
<div class="content-product-detail">
<div class="list-tab d-flex align-items" id="title_tab_scroll_pro">
<a href="#tabdesc" class="item-tab active">chi tiết sản phẩm</a>
<a href="#tabinfo" class="item-tab">HƯỚNG DẪN BẢO QUẢN</a>
<a href="#tabreview" class="item-tab">REVIEW</a>
</div>
<div class="content-tab nd active" id="tabdesc">
<p>- Áo sọc sát nách cổ lọ thiết kế tối giản, trẻ trung</p>
<p>- Trang phục phù hợp dạo phố, đi chơi, đi học....</p>
<p>- Kích thước áo: S - M - L</p>
<p>- Chiều dài: </p>
<p>S: 51 cm - M: 52 cm - L: 53 cm</p>
<p><strong>Hướng dẫn sử dụng</strong><br /> - Giặt tay bằng nước lạnh</p>
<p>- Không ngâm, không tẩy </p>
<p>- Giặt riêng các sản phẩm khác màu</p>
<p>- Không vắt</p>
<p>- Là ủi ở nhiệt độ thấp.</p>
<p>- Khuyến kích giặt khô</p>
</div>
</div>
<div class="product-related">
<div class="title">Sản phẩm liên quan</div>
<div class="box-related d-flex">
<div class="left">
<img src="./assets/images/image-big-detail-1.png" alt="product" class="image-product-related">
</div>
<div class="right">
<div class="product-list d-flex">
<div class="product-item">
<a href="" class="image-product">
<img src="./assets/images/product-deal.png" alt="">
</a>
<div class="box-sale saleoff">- 17%</div>
<a href="" class="product-title">
Cream Cropped Woven Vest (Áo vest)
</a>
<div class="info-product d-flex align-items">
<div class="product-price-main d-flex align-items">
<b class="price">
37.490.000 đ
</b>
<del class="old-price">38.490.000 đ</del>
</div>
<a href="javascript" class="buy-cart">
<i class="icon_2023 cart"></i>
</a>
</div>
</div>
<div class="product-item">
<a href="" class="image-product">
<img src="./assets/images/product-deal.png" alt="">
</a>
<div class="box-sale saleoff">- 17%</div>
<a href="" class="product-title">
Cream Cropped Woven Vest (Áo vest)
</a>
<div class="info-product d-flex align-items">
<div class="product-price-main d-flex align-items">
<b class="price">
37.490.000 đ
</b>
<del class="old-price">38.490.000 đ</del>
</div>
<a href="javascript" class="buy-cart">
<i class="icon_2023 cart"></i>
</a>
</div>
</div>
<div class="product-item">
<a href="" class="image-product">
<img src="./assets/images/product-deal.png" alt="">
</a>
<div class="box-sale saleoff">- 17%</div>
<a href="" class="product-title">
Cream Cropped Woven Vest (Áo vest)
</a>
<div class="info-product d-flex align-items">
<div class="product-price-main d-flex align-items">
<b class="price">
37.490.000 đ
</b>
<del class="old-price">38.490.000 đ</del>
</div>
<a href="javascript" class="buy-cart">
<i class="icon_2023 cart"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-list-size">
<div class="title text-center">Hướng dẫn chọn kích thước</div>
<a href="javascript:void()" class="click-close">
<i class="fa fa-times"></i>
</a>
<table border="1">
<tr>
<td><b>Thông số/ Cỡ</b></td>
<td><b>S (27)</b></td>
<td><b>M (28)</b></td>
<td><b>L (29)</b></td>
<td><b>XL (30)</b></td>
<td><b>XXL (31)</b></td>
</tr>
<tr>
<td><b>Chiều cao (cm)</b></td>
<td>150 - 155</td>
<td>155 - 163</td>
<td>160 - 165</td>
<td>162 - 166</td>
<td>163 - 168</td>
</tr>
<tr>
<td><b>Cân nặng (kg)</b></td>
<td>41 - 46</td>
<td>47 - 52</td>
<td>53 - 58</td>
<td>59 - 64</td>
<td>65 - 69</td>
</tr>
<tr>
<td><b>Vòng ngực (cm)</b></td>
<td>79 - 82</td>
<td>82 - 87</td>
<td>88 - 94</td>
<td>94 - 99</td>
<td>99 - 104</td>
</tr>
<tr>
<td><b>Rộng mông (cm)</b></td>
<td>88 - 90</td>
<td>90 - 94</td>
<td>94 - 98</td>
<td>98 - 102</td>
<td>102 - 107</td>
</tr>
</table>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script src="./assets/js/main.js"></script>
</html>