upload
This commit is contained in:
340
buildpc-detail.html
Normal file
340
buildpc-detail.html
Normal file
@@ -0,0 +1,340 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BESTPC - Trang chủ</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./src/assets/css/font.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="page-buildpc pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Tạo máy tính riêng của bạn
|
||||
</p>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Tham khảo giá sản phẩm
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h1 class="text-2xl mb-5 block font-bold">Tham khảo giá sản phẩm</h1>
|
||||
|
||||
<div class="flex gap-[20px] mb-[30px]">
|
||||
<div class="w-[450px] p-[15px] rounded-[8px] border border-[#d7d7d7]">
|
||||
<div class="swiper" id="js-slider-build-big">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img src="./src/assets/images/big-product-detail.png"
|
||||
class="block w-full h-[400px] object-contain" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./src/assets/images/big-product-detail-3.jpg"
|
||||
class="block w-full h-[400px] object-contain" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img src="./src/assets/images/big-product-detail-4.jpg"
|
||||
class="block w-full h-[400px] object-contain" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-[12px] w-[80%] mx-[auto]">
|
||||
<div thumbsSlider="" class="swiper " id="js-slider-build-small">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
|
||||
<img src="./src/assets/images/small-product-detail.png"
|
||||
class="w-full block h-[80px] object-contain " alt="">
|
||||
</div>
|
||||
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
|
||||
<img src="./src/assets/images/small-product-detail.png"
|
||||
class="w-full block h-[80px] object-contain" alt="">
|
||||
</div>
|
||||
<div class="swiper-slide h-[80px] border border-neutral-200 rounded-[4px]">
|
||||
<img src="./src/assets/images/small-product-detail.png"
|
||||
class="w-full block h-[80px] object-contain" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-small" id="btn-slider-small">
|
||||
<div class="swiper-button-next right-[-15px] w-[25px] h-[25px]">
|
||||
</div>
|
||||
<div class="swiper-button-prev left-[-15px] w-[25px] h-[25px] text-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-review mt-3">
|
||||
<div class="flex items-center justify-center">
|
||||
<b>Người đánh giá</b>
|
||||
<div class="flex items-center ml-[10px]">(40 ratings, 4.9 <i
|
||||
class="icon-star star-small ml-1"></i>)</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
|
||||
<p class="w-[11%] text-[var(--color-hover)] font-bold">5 sao</p>
|
||||
<div class="relative w-[79%]">
|
||||
<div class="block w-full h-[11px] bg-gray-500"></div>
|
||||
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||||
</div>
|
||||
<p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
|
||||
<p class="w-[11%] text-[var(--color-hover)] font-bold">4 sao</p>
|
||||
<div class="relative w-[79%]">
|
||||
<div class="block w-full h-[11px] bg-gray-500"></div>
|
||||
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||||
</div>
|
||||
<p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
|
||||
<p class="w-[11%] text-[var(--color-hover)] font-bold">3 sao</p>
|
||||
<div class="relative w-[79%]">
|
||||
<div class="block w-full h-[11px] bg-gray-500"></div>
|
||||
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||||
</div>
|
||||
<p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
|
||||
<p class="w-[11%] text-[var(--color-hover)] font-bold">2 sao</p>
|
||||
<div class="relative w-[79%]">
|
||||
<div class="block w-full h-[11px] bg-gray-500"></div>
|
||||
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||||
</div>
|
||||
<p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-[10px] w-full mb-1">
|
||||
<p class="w-[11%] text-[var(--color-hover)] font-bold">1 sao</p>
|
||||
<div class="relative w-[79%]">
|
||||
<div class="block w-full h-[11px] bg-gray-500"></div>
|
||||
<div class="absolute left-0 top-0 h-full w-[90%] bg-[#ff960b]"></div>
|
||||
</div>
|
||||
<p class="text-[var(--color-hover)] w-[9%] font-bold">97%</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-565px)]">
|
||||
<div class="grid grid-cols-7 gap-[5px] items-center pb-2.5 border-b-[1px] border-[#ababab]">
|
||||
<b>Nhà cung cấp</b>
|
||||
<b>Giá gốc</b>
|
||||
<b>Khuyến mãi</b>
|
||||
<b>Tình trạng</b>
|
||||
<b>Giao hàng</b>
|
||||
<b class="col-span-2">Thành tiền</b>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div
|
||||
class="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
|
||||
<a href="" class="block">
|
||||
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||||
class="w-full block h-[28px] object-contain" alt="">
|
||||
</a>
|
||||
<div class="price font-bold">3.700.000Vnđ</div>
|
||||
<div class="saleoff text-center font-bold">20%</div>
|
||||
<div class="status text-blue-500 font-bold">Còn hàng</div>
|
||||
<div class="ship underline">Liên hệ</div>
|
||||
<div class="flex items-center justify-between col-span-2">
|
||||
<div class="total-price font-bold">3.000.000Vnđ</div>
|
||||
<a href=""
|
||||
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="item grid grid-cols-7 items-center gap-[5px] py-2.5 border-b-[1px] border-[#ebebeb]">
|
||||
<a href="" class="block">
|
||||
<img src="./src/assets/images/logo-hacom.png" width="100%" height="100%"
|
||||
class="w-full block h-[28px] object-contain" alt="">
|
||||
</a>
|
||||
<div class="price font-bold">3.700.000Vnđ</div>
|
||||
<div class="saleoff text-center font-bold">20%</div>
|
||||
<div class="status text-red-500 font-bold">Còn hàng</div>
|
||||
<div class="ship underline text-green-500">free</div>
|
||||
<div class="flex items-center justify-between col-span-2">
|
||||
<div class="total-price font-bold">3.000.000Vnđ</div>
|
||||
<a href=""
|
||||
class="block w-[115px] h-[40px] font-bold bg-blue-600 text-center text-white leading-[40px] rounded-[4px] hover:bg-blue-800">Mua
|
||||
ngay</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex gap-[20px]">
|
||||
<div class="w-[450px]">
|
||||
<h3 class="title text-2xl font-bold pb-2.5 border-b-[1px] border-[#ababab]">Thông số kỹ thuật</h3>
|
||||
<div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Manufacturer</b>
|
||||
<p>AMD</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Part #</b>
|
||||
<ul>
|
||||
<li>100-1000001084WOF</li>
|
||||
<li>AMD Ryzen 7 9800X3D</li>
|
||||
<li>100-100001084WOF</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Series</b>
|
||||
<p>AMD Ryzen 7</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Microarchitecture</b>
|
||||
<p>Zen 5</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Core Family</b>
|
||||
<p>Granite Ridge</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Socket</b>
|
||||
<p>AM5</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Core</b>
|
||||
<p>8</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Thread Count</b>
|
||||
<p>16</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Performance Core Clock</b>
|
||||
<p>4.7 GHz</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>Performance Core Boost Clock</b>
|
||||
<p>5.2 GHz</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>L2 Cache</b>
|
||||
<p>8 MB</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>L3 Cache</b>
|
||||
<p>96 MB</p>
|
||||
</div>
|
||||
<div class="item py-2 border-b-[1px] border-neutral-200">
|
||||
<b>TDP</b>
|
||||
<p>120 W</p>
|
||||
</div>
|
||||
<div class="item py-2">
|
||||
<b>Integrated Graphics</b>
|
||||
<p>Radeon</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-470px)]">
|
||||
<div class="flex items-center justify-between pb-2.5 border-b-[1px] border-[#ababab]">
|
||||
<h3 class="title text-2xl font-bold">Đánh giá
|
||||
</h3>
|
||||
<a href=""
|
||||
class="inline-block py-1 px-5 bg-blue-600 text-white font-bold rounded-[4px] hover:bg-blue-800">Xem
|
||||
tất
|
||||
cả bình luận</a>
|
||||
</div>
|
||||
<div class="list mt-3">
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px"
|
||||
alt="avartar">
|
||||
<div class="mt-[10px]">
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 view"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
var swiper_small = new Swiper("#js-slider-build-small", {
|
||||
loop: true,
|
||||
spaceBetween: 10,
|
||||
slidesPerView: 3,
|
||||
freeMode: true,
|
||||
watchSlidesProgress: true,
|
||||
navigation: {
|
||||
nextEl: "#btn-slider-build-small .swiper-button-next",
|
||||
prevEl: " #btn-slider-build-small .swiper-button-prev",
|
||||
},
|
||||
});
|
||||
var swiper_big = new Swiper("#js-slider-build-big", {
|
||||
loop: true,
|
||||
spaceBetween: 10,
|
||||
navigation: {
|
||||
nextEl: "#btn-slider-build-big .swiper-button-next",
|
||||
prevEl: " #btn-slider-build-big .swiper-button-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper_small,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
489
buildpc.html
489
buildpc.html
@@ -539,9 +539,498 @@
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="backgroundPopup" class="" onclick="closeBuildpc()"></div>
|
||||
<div class="fixed w-[1400px] hidden bg-white left-[50%] top-[50%] translate-x-[-50%] translate-y-[-50%] z-[999]"
|
||||
id="js-modal-popup">
|
||||
<div class="header-popup p-[10px] bg-[var(--color-global)] flex items-center justify-between">
|
||||
<b class="w-[205px] mr-[15px] text-white">Chọn linh kiện</b>
|
||||
|
||||
<div class="w-[calc(100%-275px)] relative input-search">
|
||||
<form action="/search" enctype="text/plain" method="get"
|
||||
class="relative w-full h-[45px] bg-white rounded-[3px] overflow-hidden">
|
||||
<input type="text" name="q" placeholder="Bạn cần tìm linh kiện gì..."
|
||||
class="search-input w-full h-full p-[0_10px] outline-none rounded-[8px] text-base"
|
||||
onclick="$('.autocomplete-suggestions').show();">
|
||||
<button type="submit" class="absolute right-[10px] top-[5px] w-[40px] h-[35px] pl-[10px]"><i
|
||||
class="icon_2025 search "></i></button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<a href="javascript:void(0)" onclick="close_pupup()" class="w-[54px] flex items-center justify-end">
|
||||
<i class="icon_2025 close brightness-0 invert-[1]"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="content-popup p-[10px] bg-white">
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="left w-[205px]">
|
||||
<b class="">230 sản phẩm</b>
|
||||
<div
|
||||
class="mt-3 title-filter flex items-center justify-between px-[20px] bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
|
||||
<b class="text-xl">Bộ lọc</b>
|
||||
<i class="icon_2025 filter"></i>
|
||||
</div>
|
||||
<div class="list-filter h-[calc(100vh-208px)] overflow-auto">
|
||||
<div class="item-filter mb-2.5">
|
||||
<h3
|
||||
class="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
|
||||
Lọc theo
|
||||
</h3>
|
||||
<div class="mt-2.5 text-base leading-8 text-black">
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
||||
cho Máy tính dành
|
||||
cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle2" class="checkbox">
|
||||
<label for="vehicle2" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
||||
cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle3" class="checkbox">
|
||||
<label for="vehicle3" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
||||
cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle4" class="checkbox">
|
||||
<label for="vehicle4" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
||||
cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle5" class="checkbox">
|
||||
<label for="vehicle5" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
||||
cho</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle6" class="checkbox">
|
||||
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">Máy tính dành
|
||||
cho</label>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-filter mb-2.5">
|
||||
<h3
|
||||
class="text-lg font-[500] uppercase leading-loose text-black py-[5px] border-b-[1px] border-[#D3D3D3]">
|
||||
Lọc theo
|
||||
</h3>
|
||||
<div class="mt-2.5 grid grid-flow-col grid-rows-9 text-base leading-8 text-black">
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle1" class="checkbox">
|
||||
<label for="vehicle1" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">All</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle2" class="checkbox">
|
||||
<label for="vehicle2" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">32gb</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle3" class="checkbox">
|
||||
<label for="vehicle3" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">64bg</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle4" class="checkbox">
|
||||
<label for="vehicle4" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">16bg</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle5" class="checkbox">
|
||||
<label for="vehicle5" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">12gb</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle6" class="checkbox">
|
||||
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">4gb</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle6" class="checkbox">
|
||||
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">2gb</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle6" class="checkbox">
|
||||
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">24gb</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle2" class="checkbox">
|
||||
<label for="vehicle2" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">32gb</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle3" class="checkbox">
|
||||
<label for="vehicle3" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">64bg</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle4" class="checkbox">
|
||||
<label for="vehicle4" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">16bg</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle5" class="checkbox">
|
||||
<label for="vehicle5" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">12gb</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle6" class="checkbox">
|
||||
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">4gb</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle6" class="checkbox">
|
||||
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">2gb</label>
|
||||
</a>
|
||||
<a href="" class="item flex items-center ">
|
||||
<input type="checkbox" id="vehicle6" class="checkbox">
|
||||
<label for="vehicle6" class="ml-2 line-clamp-1 w-[calc(100%-28px)]">24gb</label>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right w-[calc(100%-220px)]">
|
||||
<div class="flex gap-[15px]">
|
||||
<a href="" class="text-[var(--color-hover)]">Chọn tất cả</a>
|
||||
<a href="">Bỏ chọn tất cả</a>
|
||||
<a href="">So sánh sản phẩm đã chọn</a>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 relative z-[9] grid grid-cols-11 bg-[#f1f1f1] rounded-[4px_4px_0_0] h-[52px] w-full leading-[52px]">
|
||||
<b class="col-span-3 text-center">Tên</b>
|
||||
<b>Dung lượng</b>
|
||||
<b>Thế hệ</b>
|
||||
<b>Bộ nhớ</b>
|
||||
<b>Độ ồn</b>
|
||||
<b>Màu sắc</b>
|
||||
<b>Đánh giá</b>
|
||||
<b class="col-span-2">Thành tiền</b>
|
||||
</div>
|
||||
<div class="list mt-3 h-[calc(100vh-208px)] overflow-auto">
|
||||
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div class="col-span-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
||||
<a href=""
|
||||
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||||
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||||
class="block w-full h-full object-contain" alt="">
|
||||
</a>
|
||||
<a href=""
|
||||
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
||||
Ryzen 7 9800x3D 4.7
|
||||
GHz 8-Core Processor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
8bg
|
||||
</div>
|
||||
<div class="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div class="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon_star star4"></i>
|
||||
<span class="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center justify-between">
|
||||
<div class="price">3.400.000đ</div>
|
||||
<a href=""
|
||||
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div class="col-span-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
||||
<a href=""
|
||||
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||||
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||||
class="block w-full h-full object-contain" alt="">
|
||||
</a>
|
||||
<a href=""
|
||||
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
||||
Ryzen 7 9800x3D 4.7
|
||||
GHz 8-Core Processor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
8bg
|
||||
</div>
|
||||
<div class="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div class="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon_star star4"></i>
|
||||
<span class="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center justify-between">
|
||||
<div class="price">3.400.000đ</div>
|
||||
<a href=""
|
||||
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div class="col-span-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
||||
<a href=""
|
||||
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||||
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||||
class="block w-full h-full object-contain" alt="">
|
||||
</a>
|
||||
<a href=""
|
||||
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
||||
Ryzen 7 9800x3D 4.7
|
||||
GHz 8-Core Processor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
8bg
|
||||
</div>
|
||||
<div class="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div class="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon_star star4"></i>
|
||||
<span class="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center justify-between">
|
||||
<div class="price">3.400.000đ</div>
|
||||
<a href=""
|
||||
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div class="col-span-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
||||
<a href=""
|
||||
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||||
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||||
class="block w-full h-full object-contain" alt="">
|
||||
</a>
|
||||
<a href=""
|
||||
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
||||
Ryzen 7 9800x3D 4.7
|
||||
GHz 8-Core Processor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
8bg
|
||||
</div>
|
||||
<div class="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div class="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon_star star4"></i>
|
||||
<span class="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center justify-between">
|
||||
<div class="price">3.400.000đ</div>
|
||||
<a href=""
|
||||
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div class="col-span-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
||||
<a href=""
|
||||
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||||
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||||
class="block w-full h-full object-contain" alt="">
|
||||
</a>
|
||||
<a href=""
|
||||
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
||||
Ryzen 7 9800x3D 4.7
|
||||
GHz 8-Core Processor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
8bg
|
||||
</div>
|
||||
<div class="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div class="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon_star star4"></i>
|
||||
<span class="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center justify-between">
|
||||
<div class="price">3.400.000đ</div>
|
||||
<a href=""
|
||||
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div class="col-span-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
||||
<a href=""
|
||||
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||||
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||||
class="block w-full h-full object-contain" alt="">
|
||||
</a>
|
||||
<a href=""
|
||||
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
||||
Ryzen 7 9800x3D 4.7
|
||||
GHz 8-Core Processor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
8bg
|
||||
</div>
|
||||
<div class="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div class="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon_star star4"></i>
|
||||
<span class="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center justify-between">
|
||||
<div class="price">3.400.000đ</div>
|
||||
<a href=""
|
||||
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div class="col-span-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
||||
<a href=""
|
||||
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||||
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||||
class="block w-full h-full object-contain" alt="">
|
||||
</a>
|
||||
<a href=""
|
||||
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
||||
Ryzen 7 9800x3D 4.7
|
||||
GHz 8-Core Processor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
8bg
|
||||
</div>
|
||||
<div class="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div class="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon_star star4"></i>
|
||||
<span class="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center justify-between">
|
||||
<div class="price">3.400.000đ</div>
|
||||
<a href=""
|
||||
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div class="col-span-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
||||
<a href=""
|
||||
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||||
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||||
class="block w-full h-full object-contain" alt="">
|
||||
</a>
|
||||
<a href=""
|
||||
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
||||
Ryzen 7 9800x3D 4.7
|
||||
GHz 8-Core Processor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
8bg
|
||||
</div>
|
||||
<div class="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div class="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon_star star4"></i>
|
||||
<span class="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center justify-between">
|
||||
<div class="price">3.400.000đ</div>
|
||||
<a href=""
|
||||
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div class="col-span-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
||||
<a href=""
|
||||
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||||
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||||
class="block w-full h-full object-contain" alt="">
|
||||
</a>
|
||||
<a href=""
|
||||
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
||||
Ryzen 7 9800x3D 4.7
|
||||
GHz 8-Core Processor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
8bg
|
||||
</div>
|
||||
<div class="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div class="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon_star star4"></i>
|
||||
<span class="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center justify-between">
|
||||
<div class="price">3.400.000đ</div>
|
||||
<a href=""
|
||||
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item grid grid-cols-11 items-center py-[10px] border-b-[1px] border-[#dedede]">
|
||||
<div class="col-span-3">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" class="checkbox w-[24px] mx-[20px]" />
|
||||
<a href=""
|
||||
class="image w-[50px] h-[50px] block border border-neutral-200 p-1 mr-[10px]">
|
||||
<img src="./src/assets/images/lienkien-ram.png" width="100%" height="100%"
|
||||
class="block w-full h-full object-contain" alt="">
|
||||
</a>
|
||||
<a href=""
|
||||
class="name-product w-[calc(100%-140px)] hover:text-[var(--color-hover)]">AMD
|
||||
Ryzen 7 9800x3D 4.7
|
||||
GHz 8-Core Processor</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
8bg
|
||||
</div>
|
||||
<div class="">5</div>
|
||||
<div>GDDR5</div>
|
||||
<div class="text-center">5db</div>
|
||||
<div>Đen</div>
|
||||
<div class="flex items-center">
|
||||
<i class="icon_star star4"></i>
|
||||
<span class="ml-[5px]">(125)</span>
|
||||
</div>
|
||||
<div class="col-span-2 flex items-center justify-between">
|
||||
<div class="price">3.400.000đ</div>
|
||||
<a href=""
|
||||
class="block w-[60px] h-[40px] leading-[40px] text-center text-white font-bold bg-[var(--color-hover)] rounded-[4px]">Add</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
138
form_classified.html
Normal file
138
form_classified.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BESTPC - Trang chủ</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./src/assets/css/font.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="page-form-classifieds bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Tin rao vặt
|
||||
</p>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Đăng tin
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="bg-white px-3 pt-5 pb-12">
|
||||
<form action="">
|
||||
<div class="flex gap-[30px]">
|
||||
<div class="w-[25%]">
|
||||
<h3 class="text-xl font-bold mb-3">Hình ảnh và Video sản phẩm</h3>
|
||||
|
||||
<div class="box-upload mb-2">
|
||||
<input id="js-file-upload-id" type="hidden" value="">
|
||||
<div id="js-container-selector" class="mb-5">
|
||||
<a id="js-select-file" href="javascript:void(0);" class="btn-upload flex flex-col items-center justify-center dz-clickable w-full h-[280px] bg-[#f6f6f6] rounded-[12px] border-[1px] border-dashed
|
||||
border-[var(--color-global)] hover:border-[2px] hover:border-solid">
|
||||
<img src="./src/assets/images/icon_upload_image.png"
|
||||
class="w-[50px] h-[50px] block mb-2 object-contain" width="100%"
|
||||
height="100%" alt="">
|
||||
<b class="text-center">Có thể đăng tối đa 6 hình ảnh</b>
|
||||
</a>
|
||||
</div>
|
||||
<div id="js-container-selector">
|
||||
<a id="js-select-file" href="javascript:void(0);" class="btn-upload flex flex-col items-center justify-center dz-clickable w-full h-[280px] bg-[#f6f6f6] rounded-[12px] border-[1px] border-dashed
|
||||
border-[var(--color-global)] hover:border-[2px] hover:border-solid">
|
||||
<img src="./src/assets/images/icon_upload_video.png"
|
||||
class="w-[50px] h-[50px] block mb-2 object-contain" width="100%"
|
||||
height="100%" alt="">
|
||||
<b class="text-center">Có thể đăng tối đa 6 hình ảnh</b>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="w-[75%]">
|
||||
<h3 class="text-xl font-bold mb-3">Nhập thông tin sản phẩm</h3>
|
||||
|
||||
<div class="relative select-arrow">
|
||||
<select name="" id="">
|
||||
<option value="">CHọn danh mục tin đăng</option>
|
||||
<option value="">Hà nội</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<b class="block mb-3"></b>
|
||||
<div class="form-input mt-[20px]">
|
||||
<input type="text" name="title" placeholder="Tình trạng" />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="form-input mt-[20px]">
|
||||
<input type="text" name="title" placeholder="Cấu hình" />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="form-input mt-[20px]">
|
||||
<input type="text" name="title" placeholder="Địa chỉ" />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="form-input mt-[20px]">
|
||||
<textarea class="h-[230px]" type="text" name="title"
|
||||
placeholder="Thông tin sản phẩm"></textarea>
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="form-input mt-[20px]">
|
||||
<textarea class="h-[230px]" type="text" name="title"
|
||||
placeholder="Mô tả chi tiết"></textarea>
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="form-input mt-[20px]">
|
||||
<input type="text" name="title" placeholder="Giá bán" />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-5 flex items-center justify-end">
|
||||
<a href=""
|
||||
class="block text-center w-[245px] px-10 py-2.5 border border-[#000] rounded-[4px] mr-2 font-bold hover:bg-gray-500 hover:text-white">Lưu
|
||||
bản nháp</a>
|
||||
<a href=""
|
||||
class="block text-center w-[245px] px-10 py-2.5 border border-[] rounded-[4px] bg-[var(--color-global)] text-white font-bold hover:bg-purple-900">Đăng
|
||||
tin</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
513
page-classified-detail.html
Normal file
513
page-classified-detail.html
Normal file
@@ -0,0 +1,513 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BESTPC - Trang chủ</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./src/assets/css/font.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page-classifieds bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Tin rao vặt
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="bg-white px-3 pt-2.5 pb-12">
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="w-[40%]">
|
||||
<div class="relative">
|
||||
<div class="swiper border border-[#B1B1B1 rounded-[12px]" id="js-slider-big">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="item">
|
||||
<img src="./src/assets/images/big-image-rao-vat.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="item">
|
||||
<img src="./src/assets/images/big-image-rao-vat.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="item">
|
||||
<img src="./src/assets/images/big-image-rao-vat.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="item">
|
||||
<img src="./src/assets/images/big-image-rao-vat.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="item">
|
||||
<img src="./src/assets/images/big-image-rao-vat.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="btn-slider-big">
|
||||
<div class="swiper-button-next right-0"></div>
|
||||
<div class="swiper-button-prev left-0"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-[12px]">
|
||||
<div thumbsSlider="" class="swiper mySwiper" id="js-slider-small">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item video">
|
||||
<img src="./src/assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<img src="./src/assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<img src="./src/assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<img src="./src/assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<img src="./src/assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<a href="javascript:void(0)" class="item">
|
||||
<img src="./src/assets/images/thumb-image-rao-vat.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-small" id="btn-slider-small">
|
||||
<div class="swiper-button-next right-0 w-[30px] h-[30px]"></div>
|
||||
<div class="swiper-button-prev left-0 w-[30px] h-[30px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[60%]">
|
||||
<div class="flex justify-between mb-2">
|
||||
<h1 class="text-2xl font-bold w-[calc(100%-200px)]">iphone 11 vs 11 Pro 11 Pro Max 64GB
|
||||
256GB
|
||||
likenew</h1>
|
||||
|
||||
<a href="javavsript:void(0)"
|
||||
class="flex items-center w-[150px] h-[40px] justify-center border rounded-full border-[#999999] group hover:bg-red-500">
|
||||
<span class="font-[500] mr-[5px] text-lg group-hover:text-white">Xem sau</span>
|
||||
<i class="icon_2025 heart-2 group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="box-spec">
|
||||
<div class="item flex items-center gap-[10px] mb-2">
|
||||
<span class="block w-[24px]"><i class="icon_2025 spec"></i></span>
|
||||
<span class="text-lg text-[#303030]">Cấu hình: Intel Core i5 / 8GB / 256GB /
|
||||
SSD</span>
|
||||
</div>
|
||||
<div class="item flex items-center gap-[10px] mb-2">
|
||||
<span class="block w-[24px]"><i class="icon_2025 faq"></i></span>
|
||||
<p class="text-lg text-[#303030]">Tình trạng: <span
|
||||
class="text-[var(--color-hover)]">Likenew</span></p>
|
||||
</div>
|
||||
<div class="item flex items-center gap-[10px] mb-2">
|
||||
<span class="block w-[24px]"><i class="icon_2025 map-2 ml-[2px]"></i></span>
|
||||
<p class="text-lg text-[#303030]">Địa chỉ: Quận Thanh Xuân</p>
|
||||
</div>
|
||||
<div class="item flex items-center gap-[10px] mb-2">
|
||||
<span class="block w-[24px]"><i class="icon_2025 time-big ml-[2px]" style="background-size: 200px 206px;
|
||||
background-position: -2px -62px;width: 22px;height: 22px;"></i></span>
|
||||
<p class="text-lg text-[#303030]">Ngày đăng 12/04/2025 còn <span>2</span> ngày</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-end my-4">
|
||||
<b class="mr-[10px]">Giá sản phẩm</b>
|
||||
<b class="text-[#D80A00] text-5xl">19.999.000đ</b>
|
||||
</div>
|
||||
|
||||
<a href="tel:"
|
||||
class="w-full h-[60px] block text-center leading-[60px] text-white text-xl bg-[#2EB000] mt-2 mb-1 rounded-[8px] font-bold hover:bg-green-700">
|
||||
Gọi cho người bán 098.234.****
|
||||
</a>
|
||||
|
||||
<div class="p-[15px] border border-[#d3d3d3] rounded-[12px] my-3 flex items-center">
|
||||
<div class="w-1/2 border-r-[1px] border-[#d3d3d3]">
|
||||
<div class="flex">
|
||||
<img src="./src/assets/images/avartar.png" width="100%" height="100%"
|
||||
class="block w-[45px] h-[45px] object-contain rounded-full" alt="">
|
||||
<div class="ml-2">
|
||||
<div class="flex items-end">
|
||||
<b class="mr-2">Thanh Mai</b>
|
||||
<i class="icon_2025 shop-3"></i>
|
||||
</div>
|
||||
|
||||
<div class="status online flex items-center">
|
||||
<i class="w-[8px] h-[8px] block rounded-full bg-[#34a853]"></i>
|
||||
<span class="ml-1 text-[#33c600]">Đang hoạt động</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<div class="flex items-center justify-center">
|
||||
<i class="icon-star star-small mt-[2px]"></i>
|
||||
<b class="ml-1 underline">28 Đánh giá</b>
|
||||
</div>
|
||||
<p class="text-center block text-[#303030]">6 Tin đăng bán</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center m-2 gap-[10px]">
|
||||
<a href=""
|
||||
class="px-4 py-2 bg-[#f6f6f6] rounded-full hover:bg-[var(--color-hover)] hover:text-white">Máy
|
||||
tính này còn không?</a>
|
||||
<a href=""
|
||||
class="px-4 py-2 bg-[#f6f6f6] rounded-full hover:bg-[var(--color-hover)] hover:text-white">Máy
|
||||
tính này còn không?</a>
|
||||
<a href=""
|
||||
class="px-4 py-2 bg-[#f6f6f6] rounded-full hover:bg-[var(--color-hover)] hover:text-white">Máy
|
||||
tính này còn không?</a>
|
||||
</div>
|
||||
|
||||
<div class="mt-2">
|
||||
<h3 class="font-bold text-xl mb-2">Thông tin sản phẩm</h3>
|
||||
<ul class="ml-[20px]">
|
||||
<li class="list-disc">Chính sách bảo hành:>12 tháng</li>
|
||||
<li class="list-disc">Kích cỡ màn hình:>= 21 inch</li>
|
||||
<li class="list-disc">Bộ vi xử lý:Intel Core i5</li>
|
||||
<li class="list-disc">RAM:8 GB</li>
|
||||
<li class="list-disc">Card màn hình:Khác</li>
|
||||
<li class="list-disc">Ổ cứng:256 GB</li>
|
||||
<li class="list-disc">Xuất xứ:Việt Nam</li>
|
||||
<Li class="list-disc">Loại ổ cứng:SSD Thông tin sử dụng:In trên bao bì</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex mt-5 gap-[15px]">
|
||||
<div class="w-[70%]">
|
||||
<div class="box-desc bg-white p-[12px] rounded-[8px]">
|
||||
<h3 class="title text-2xl font-bold block mb-[10px] pb-[10px] border-b-[1px] border-[#B1B1B1]">
|
||||
Mô tả chi
|
||||
tiết</h3>
|
||||
<div id="content-desciption">
|
||||
<div class="content nd overflow-hidden">
|
||||
<p style="text-align: justify;"><strong>Laptop HP Victus 16 R0376TX AY8Z2PA
|
||||
</strong> sở
|
||||
hữu chip xử lý Intel Core i7
|
||||
13700HX cùng VGA RTX 3050 6GB để có được trải nghiệm chơi game, làm việc hiệu
|
||||
quả.
|
||||
Mẫu <a href="https://cellphones.com.vn/laptop/hp/victus.html" title="HP Victus"
|
||||
target="_blank"><strong>HP
|
||||
Victus</strong></a> này còn được trang bị màn hình 16 inch FHD 165Hz
|
||||
giúp
|
||||
tái tạo hình ảnh sắc nét, mượt mà.
|
||||
Kèm theo đó là thiết kế bền bỉ, hiện đại để có thể sử dụng ở nhiều không gian.
|
||||
</p>
|
||||
|
||||
<h2 style="scroll-margin : 154px;"
|
||||
id="laptop-hp-victus-16-r0376tx-ay8z2pa-hieu-nang-manh-me-hien-thi-an-tuong">
|
||||
<strong>
|
||||
Laptop HP Victus 16 R0376TX AY8Z2PA - Hiệu năng mạnh mẽ, hiển thị ấn tượng
|
||||
</strong>
|
||||
</h2>
|
||||
<p style="text-align: justify;">HP Victus 16 R0376TX AY8Z2PA với bộ vi xử lý và card
|
||||
đồ
|
||||
họa rời mạnh mẽ sẽ mang tới trải
|
||||
nghiệm chơi game, làm việc mượt mà, hiệu quả. Hãy cùng tìm hiểu thêm những điểm
|
||||
nổi
|
||||
bật mà mẫu laptop gaming của
|
||||
<strong> HP Victus </strong> này sở hữu trong bài viết sau.
|
||||
</p>
|
||||
<h3 style="scroll-margin : 154px;"
|
||||
id="nang-cao-hieu-suat-xu-ly-voi-chip-core-i7-13700hx"><strong> Nâng cao
|
||||
hiệu
|
||||
suất
|
||||
xử
|
||||
lý với chip Core i7 13700HX</strong></h3>
|
||||
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị
|
||||
con
|
||||
chip xử lý Core i7 13700HX của
|
||||
Intel. Con chip Core i7 16 lõi, 24 luồng này sở hữu khả năng ép xung cực đại lên
|
||||
tới
|
||||
5GHz để luôn có thể xử lý dữ
|
||||
liệu trong thời gian ngắn. Với bộ nhớ đệm 30MB, hiệu suất xử lý các tác vụ phức
|
||||
tạp
|
||||
của laptop sẽ được giảm đi đáng
|
||||
kể.</p>
|
||||
<p style="text-align: justify;"><img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-1.jpg"
|
||||
alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
|
||||
<p style="text-align: justify;">Để nâng cao khả năng xử lý đồ hoạ, HP còn trang bị
|
||||
cho
|
||||
phiên bản <a href="https://cellphones.com.vn/laptop/hp/victus/victus-16.html"
|
||||
title="laptop Victus 16" target="_blank"><strong>laptop Victus
|
||||
16</strong></a>
|
||||
này card đồ hoạ rời NVIDIA GeForce RTX 3050 6GB GDDR6. Nhờ
|
||||
vậy mà người dùng có thể tự tin trải nghiệm các tựa game với mức cấu hình cao.
|
||||
Không
|
||||
dừng ở đó, các nhu cầu chỉnh
|
||||
sửa hình ảnh, dựng phim, tạo hình 3D,...chuyên nghiệp cũng được thực hiện mượt
|
||||
mà.
|
||||
</p>
|
||||
<h3 style="scroll-margin : 154px;"
|
||||
id="tich-hop-o-cung-toc-do-cao-cung-dung-luong-ram-lon"><strong> Tích hợp
|
||||
ổ cứng
|
||||
tốc
|
||||
độ cao cùng dung lượng RAM lớn </strong></h3>
|
||||
<p style="text-align: justify;">HP Victus 16 R0376TX AY8Z2PA được trang bị sẵn 2
|
||||
thanh
|
||||
RAM chuẩn DDR5 có tốc độ bus lên
|
||||
tới 4800MT/s. Với tổng dung lượng RAM 16GB, mẫu laptop gaming HP này sẽ đáp ứng
|
||||
tốt
|
||||
nhu cầu đa nhiệm. Không chỉ các
|
||||
tác vụ cơ bản mà nhu cầu đa nhiệm nâng cao trong công việc cũng sẽ được thực
|
||||
hiện
|
||||
mượt mà mà không cần phải nâng cấp
|
||||
cấu hình. Ngoài ra, laptop HP Victus 16 R0376TX AY8Z2PA còn sở hữu một ổ cứng
|
||||
SSD
|
||||
tốc độ cao có dung lượng
|
||||
512GB. </p>
|
||||
<p style="text-align: justify;"><img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-2.jpg"
|
||||
alt="Cấu hình laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
|
||||
<h3 style="scroll-margin : 154px;" id="thiet-ke-hien-dai-ben-bi"><strong> Thiết kế
|
||||
hiện
|
||||
đại, bền bỉ </strong></h3>
|
||||
<p style="text-align: justify;">Laptop Victus 16 R0376TX AY8Z2PA được HP thiết kế
|
||||
hướng
|
||||
tới phong cách hiện đại, tối
|
||||
giản. Tuy vậy nhưng sản phẩm vẫn mang đậm dấu ấn gaming với tông màu đen thu hút
|
||||
và
|
||||
mạnh mẽ. Kèm theo đó là một tổng
|
||||
thể chắc chắn, bền bỉ cùng phần bản lề kích thước lớn.</p>
|
||||
<p style="text-align: justify;">Với trọng lượng khoảng 2.31kg, người dùng vẫn có thể
|
||||
tiện lợi mang theo phiên bản laptop
|
||||
HP Victus này mà không gặp bất tiện. So với các mẫu laptop gaming khác, đây được
|
||||
coi
|
||||
là một điểm cộng giúp sản phẩm
|
||||
đáp ứng nhu cầu chơi game ở nhiều không gian của người dùng.</p>
|
||||
<p style="text-align: justify;"><img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-3.jpg"
|
||||
alt="Thiết kế laptop HP Victus 16 R0376TX AY8Z2PA" loading="lazy"></p>
|
||||
<p style="text-align: justify;">Để hỗ trợ tốt cả nhu cầu chơi game và làm việc, HP
|
||||
đã
|
||||
trang bị cho laptop Victus 16
|
||||
R0376TX AY8Z2PA bộ bàn phím Full-size. Với phần bàn phím số riêng biệt, người
|
||||
dùng
|
||||
sẽ cải thiện được tốc độ nhập
|
||||
liệu trong khi làm việc. Bàn phím của laptop còn được tích hợp hệ thống đèn nền
|
||||
RGB
|
||||
1 để hỗ trợ việc gõ phím trong
|
||||
điều kiện thiếu sáng.</p>
|
||||
<h3 style="scroll-margin : 154px;" id="hien-thi-sac-net-va-muot-ma"><strong> Hiển
|
||||
thị
|
||||
sắc nét và mượt mà </strong></h3>
|
||||
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA sở hữu không
|
||||
giản
|
||||
hiển thị cực lớn khi được trang bị
|
||||
màn hình có kích thước 16.1 inch. Kèm theo đó là độ phân giải FHD (1920 x 1080p)
|
||||
giúp nội dung hiển thị luôn có được
|
||||
độ rõ nét. Nhờ việc sử dụng tấm nền IPS, người dùng còn có thể điều chỉnh góc
|
||||
nghiêng linh hoạt mà không gây ảnh
|
||||
hưởng tới chất lượng hình ảnh.</p>
|
||||
<p style="text-align: justify;"><img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-4.jpg"
|
||||
alt="Hiển thị sắc nét và mượt mà" loading="lazy"></p>
|
||||
<p style="text-align: justify;">Điểm nổi bật có trên màn hình HP Victus 16 R0376TX
|
||||
AY8Z2PA chính là tần số quét và độ
|
||||
phủ màu. Với độ phủ màu 100% sRGB, mẫu laptop gaming HP này sẽ hỗ trợ người dùng
|
||||
làm
|
||||
các công việc liên quan tới
|
||||
sáng tạo hiệu quả. Tần số quét ở mức 165Hz sẽ giúp màn hình tái hiện các chuyển
|
||||
động
|
||||
một cách uyển chuyển, mượt mà.
|
||||
</p>
|
||||
<p style="text-align: justify;">Ngoài ra, màn hình HP Victus 16 R0376TX AY8Z2PA còn
|
||||
được
|
||||
phủ lớp chống chói và có độ
|
||||
sáng 300 nits để thoải mái sử dụng ở những nơi có ánh sáng mạnh. Với chuẩn Low
|
||||
Blue
|
||||
Light, màn hình còn giảm thiểu
|
||||
lượng ánh sáng xanh phát ra để hạn chế tình trạng mỏi mắt khi sử dụng laptop
|
||||
trong
|
||||
thời gian dài.</p>
|
||||
<h3 style="scroll-margin : 154px;" id="thoi-luong-pin-dai-ket-noi-phong-phu-va-on-dinh">
|
||||
<strong> Thời lượng pin dài, kết
|
||||
nối phong phú và ổn định </strong>
|
||||
</h3>
|
||||
<p style="text-align: justify;">Laptop HP Victus 16 R0376TX AY8Z2PA được trang bị
|
||||
viên
|
||||
pin Li-ion Polymer 4-cell có dung
|
||||
lượng ở mức 70Wh. Với dung lượng này, viên pin có thể duy trì trạng thái hoạt
|
||||
động
|
||||
cho laptop lên tới nhiều giờ với
|
||||
các tác vụ hỗn hợp. Laptop còn được trang bị bộ nguồn 200W Smart AC power
|
||||
adapter để
|
||||
hỗ trợ sạc pin nhanh 50% trong
|
||||
khoảng 30 phút.</p>
|
||||
<p style="text-align: justify;"><img
|
||||
src="https://cdn2.cellphones.com.vn/insecure/rs:fill:0:0/q:90/plain/https://cellphones.com.vn/media/wysiwyg/laptop/HP/Victus/Laptop-hp-victus-16-r0376tx-ay8z2pa-5.jpg"
|
||||
alt="Thời lượng pin dài, kết nối phong phú và ổn định" loading="lazy"></p>
|
||||
<p style="text-align: justify;">Để hỗ trợ việc liên kết có dây và chia sẻ dữ liệu,
|
||||
HP
|
||||
còn trang bị cho mẫu laptop Victus
|
||||
của hàng đầy đủ các cổng kết nối thông dụng. Hai cạnh bên laptop được tích hợp
|
||||
các
|
||||
cổng USB Type-A, USB Type-C,
|
||||
RJ-45, HDMI 2.1, jack audio 3.5mm và bộ chuyển đổi điện xoay chiều thông minh.
|
||||
</p>
|
||||
<p style="text-align: justify;">Laptop Victus 16 R0376TX AY8Z2PA còn được trang bị
|
||||
card
|
||||
wireless Bluetooth 5.3 và Intel
|
||||
Wi-Fi 6E AX211 (2x2). Điều này sẽ đảm bảo được khả năng kết nối với các thiết bị
|
||||
ngoại vi, kết nối mạng ổn định,
|
||||
nhanh chóng cho laptop.</p>
|
||||
<h2 style="scroll-margin : 154px;"
|
||||
id="mua-laptop-hp-victus-16-r0376tx-ay8z2pa-gia-tot-tai-cellphones">
|
||||
<strong> Mua
|
||||
laptop HP Victus 16 R0376TX AY8Z2PA giá tốt tại CellphoneS </strong>
|
||||
</h2>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
Hãy tới ngay các cửa hàng CellphoneS trên cả
|
||||
nước để
|
||||
trải nghiệm và đặt mua <strong>
|
||||
Laptop HP Victus 16 R0376TX AY8Z2PA </strong> . Mẫu laptop gaming HP này
|
||||
còn có
|
||||
mức giá cực kỳ hấp dẫn khi đi
|
||||
kèm nhiều chương trình ưu đãi, hỗ trợ thu cũ - đổi mới,...
|
||||
</li>
|
||||
<li>
|
||||
Với chính sách hỗ trợ trả góp lãi suất thấp,
|
||||
khách hàng
|
||||
sẽ còn dễ dàng sở hữu và trải
|
||||
nghiệm chiếc laptop này. Ngoài ra, CellphoneS còn hỗ trợ giao hàng toàn quốc
|
||||
để
|
||||
khách hàng tiện lợi đặt mua dù ở nơi
|
||||
đâu.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="javascript:void(0)"
|
||||
class="more-all js-viewmore-content item-btn flex items-center mt-1 text-[#ff7a00]"
|
||||
data-content="#content-desciption">
|
||||
Xem thêm <i class="icon_2025 angle-bottom ml-[5px]"></i>
|
||||
</a>
|
||||
</div>
|
||||
<!-- end box desc -->
|
||||
</div>
|
||||
<div class="w-[30%]">
|
||||
<a href="" class="block">
|
||||
<img src="./src/assets/images/banner_canhbao.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||
|
||||
<script>
|
||||
var swiper_small = new Swiper("#js-slider-small", {
|
||||
loop: true,
|
||||
spaceBetween: 12,
|
||||
slidesPerView: 5,
|
||||
freeMode: true,
|
||||
watchSlidesProgress: true,
|
||||
navigation: {
|
||||
nextEl: "#btn-slider-small .swiper-button-next",
|
||||
prevEl: " #btn-slider-small .swiper-button-prev",
|
||||
},
|
||||
});
|
||||
var swiper_big = new Swiper("#js-slider-big", {
|
||||
loop: true,
|
||||
spaceBetween: 10,
|
||||
navigation: {
|
||||
nextEl: "#btn-slider-big .swiper-button-next",
|
||||
prevEl: " #btn-slider-big .swiper-button-prev",
|
||||
},
|
||||
thumbs: {
|
||||
swiper: swiper_small,
|
||||
},
|
||||
});
|
||||
|
||||
collapse_content('#content-desciption', 580);
|
||||
|
||||
// show content
|
||||
function collapse_content(item, contentHeight) {
|
||||
var content = $(item).find($('.content'));
|
||||
if (content.height() >= contentHeight) {
|
||||
$(item).find($(".more-all")).css('display', 'flex');
|
||||
content.css('height', contentHeight);
|
||||
} else {
|
||||
$(this).find($(".more-all")).remove();
|
||||
content.addClass('active');
|
||||
}
|
||||
}
|
||||
|
||||
$(".js-viewmore-content").click(function () {
|
||||
var id = $(this).attr("data-content");
|
||||
var content = $(id).find($('.content'));
|
||||
$(this).toggleClass("active");
|
||||
content.toggleClass("active");
|
||||
|
||||
if ($(this).hasClass("active")) {
|
||||
$(this).html('Thu gọn <i class="icon_2025 angle-top ml-[5px]"></i>');
|
||||
} else {
|
||||
$(this).html('Xem thêm <i class="icon_2025 angle-bottom ml-[5px]"></i>');
|
||||
$('html,body').animate({ scrollTop: $(content).offset().top }, 500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
411
page-classifieds.html
Normal file
411
page-classifieds.html
Normal file
@@ -0,0 +1,411 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BESTPC - Trang chủ</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./src/assets/css/font.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page-classifieds bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Tin rao vặt
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||||
<div class="flex gap-[20px]">
|
||||
<div class="w-[20%]">
|
||||
<h3 class="text-xl uppercase my-4 font-bold">Danh mục</h3>
|
||||
<div class="list">
|
||||
<a href="" class="block mb-2.5 font-bold">Laptop văn phòng</a>
|
||||
<a href="" class=" block mb-2.5">Laptop gaming</a>
|
||||
<a href="" class="block mb-2.5">Pc gaming</a>
|
||||
<a href="" class="block mb-2.5">Máy chủ</a>
|
||||
<a href="" class="block mb-2.5">Linh kiện máy tính</a>
|
||||
<a href="" class="block mb-2.5"> Card màn hình</a>
|
||||
<a href="" class="block mb-2.5">Ổ SSD</a>
|
||||
<a href="" class="block mb-2.5"> Màn hình máy tính</a>
|
||||
<a href="" class="block mb-2.5">Bàn phím, chuột, ghế</a>
|
||||
<a href="" class="block mb-2.5">Phụ kiện laptop</a>
|
||||
<a href="" class="block mb-2.5">Phụ kiện PC</a>
|
||||
<a href="" class="block mb-2.5"> Tản nhiệt, Fan, đèn Led</a>
|
||||
<a href="" class="block mb-2.5">PS5, Game</a>
|
||||
<a href="" class="block mb-2.5">Loa, tai nghe, mic,webcam</a>
|
||||
<a href="" class="block mb-2.5">Camera, chuông, khoá</a>
|
||||
<a href="" class="block mb-2.5">Thiết bị văn phòng</a>
|
||||
<a href="" class="block mb-2.5">Thiết bị mạng, lưu trữ, phần mềm</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[80%]">
|
||||
<div class="flex items-center justify-between py-2">
|
||||
<h2 class="text-xl font-bold">Laptop văn phòng <span class="ml-[10px]">(127)</span></h2>
|
||||
<div class="flex items-center">
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px] mr-[10px]">
|
||||
<option value="">Sắp xếp</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
|
||||
<div class="relative border w-[90px] border-[#dbdbdb] pl-[5px] h-[36px] rounded-[4px]">
|
||||
<a href="javscript:void(0)" class="flex items-center justify-center h-[36px]">
|
||||
<i class="icon_2025 sort_list mr-[5px]"></i>
|
||||
<i class="icon_2025 angle-right rotate-[90deg]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 p-[10px] bg-[#f8f8f8] flex items-center flex-wrap gap-[10px]">
|
||||
<b>Bộ lọc</b>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
<select name="" id=""
|
||||
class="border border-[#dbdbdb] pl-[5px] h-[36px] text-black rounded-[4px]">
|
||||
<option value="">Giá</option>
|
||||
<option value="">Sản phẩm mới</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="list sort_list mt-3">
|
||||
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href=""
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="./src/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href=""
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="./src/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href=""
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="./src/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href=""
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="./src/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href=""
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="./src/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-item flex gap-[10px]">
|
||||
<a href="" class="product-image">
|
||||
<img src="./src/assets/images/box-image.png" alt="Laptop Dell" />
|
||||
</a>
|
||||
<div class="info-product">
|
||||
<a href="" class="name-product line-clamp-2">Laptop văn phòng Dell RAM 8G Core
|
||||
i7</a>
|
||||
<div class="summary line-clamp-1">
|
||||
Intel Core i5 / 8GB / 256GB / SSD
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<div class="price">15.000.000đ</div>
|
||||
<div class="flex items-center mb-[5px]">
|
||||
<div class="locahost-pro flex items-center mr-[5px]">
|
||||
<i class="icon_2025 map-3"></i>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Quận Thanh
|
||||
Xuân</span>
|
||||
</div>
|
||||
<div class="time-pro flex items-center">
|
||||
<i class="icon_2025 time-gray"></i>
|
||||
<div class="flex items-center mt-[1px]">
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">11/04/2025</span>
|
||||
<span class="ml-[5px]">|</span>
|
||||
<span class="text-[#595959] ml-[5px] mt-[3px]">Còn 01
|
||||
ngày</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href=""
|
||||
class="p-[10px_15px] flex items-center border border-[#b1b1b1] rounded-[4px] hover:bg-[var(--color-global)] group">
|
||||
<b class="group-hover:text-white">Chi tiết</b>
|
||||
<i class="icon_2025 mouse ml-2 brightness-0 group-hover:invert-[1]"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="user-pro flex items-center">
|
||||
<img src="./src/assets/images/avartar.png"
|
||||
class="w-[24px] h-[24px] block rounded-[50%]" width="24px" height="24px"
|
||||
alt="avartar" />
|
||||
<b class="ml-[7px]">Thanh Mai</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
209
page_faq.html
Normal file
209
page_faq.html
Normal file
@@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BESTPC - Trang chủ</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./src/assets/css/font.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="page-faq bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Hỏi đáp
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||||
<div class="flex items-center justify-between border-b-[1px] border-neutral-200 pb-2.5 ">
|
||||
<h1 class="text-2xl font-bold">Hỏi đáp</h1>
|
||||
<div class="right flex items-center">
|
||||
<form action="/search" enctype="text/plain" method="get" class="flex items-center">
|
||||
<div
|
||||
class="w-[520px] h-[45px] relative rounded-[8px] mr-[10px] input-search border border-[#dddddd]">
|
||||
|
||||
<input type="text" name="q" placeholder="Nhập địa chỉ cửa bạn để tìm cửa hàng gần nhất"
|
||||
class="search-input w-full h-full p-[0_10px_0_40px] rounded-[8px] text-sm"
|
||||
onclick="$('.autocomplete-suggestions').show();">
|
||||
<div class="absolute left-0 top-0 w-[40px] h-[45px] flex items-center justify-center"><i
|
||||
class="icon_2025 search-2 "></i></div>
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="h-[43px] w-[100px] bg-blue-900 rounded-[4px] text-white font-bold hover:bg-blue-800 ">Đặt
|
||||
câu
|
||||
hỏi</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mt-3 flex gap-[15px]">
|
||||
<div class="w-[15%]">
|
||||
<div class="list-tab">
|
||||
<a href=""
|
||||
class="w-full bg-[var(--color-hover)] rounded-[4px] h-[40px] flex items-center px-[10px] mb-[5px]">
|
||||
<i class="block w-[20px] h-[20px] border-2 border-white text-white rounded-[50%] leading-[20px] text-center not-italic
|
||||
">?</i>
|
||||
<span class="font-bold ml-[5px] text-white ">Tất cả câu hỏi</span>
|
||||
</a>
|
||||
<a href=""
|
||||
class="w-full h-[40px] flex items-center rounded-[4px] px-[10px] group hover:bg-[var(--color-hover)] mb-[5px]">
|
||||
<i class="icon_2025 tag group-hover:brightness-0 group-hover:invert-[1] "></i>
|
||||
<span class="font-bold ml-[5px] group-hover:text-white">Tag</span>
|
||||
</a>
|
||||
<a href=""
|
||||
class="w-full h-[40px] flex items-center px-[10px] mb-[10px] group hover:bg-[var(--color-hover)]">
|
||||
<i class="icon_2025 faq group-hover:brightness-0 group-hover:invert-[1]"></i>
|
||||
<span class="font-bold ml-[5px] group-hover:text-white">Quy định</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[70%]">
|
||||
<div
|
||||
class="flex items-center text-lg gap-[15px] border-b-[1px] border-neutral-200 h-[40px] leading-[30px]">
|
||||
<a href="" class="block underline font-bold text-[#FF7A00] ">Câu hỏi thường gặp</a>
|
||||
<a href="" class="block hover:underline hover:font-bold hover:text-[#FF7A00] ">Mới</a>
|
||||
<a href="" class="block hover:underline hover:font-bold hover:text-[#FF7A00]">Nhiều vote
|
||||
nhất</a>
|
||||
<a href="" class="block hover:underline hover:font-bold hover:text-[#FF7A00]">Chưa trả
|
||||
lời</a>
|
||||
</div>
|
||||
<div class="list mt-3">
|
||||
<div class="item-review flex mb-[15px] pb-[15px] border-b-[1px] border-[#E4E4E4]">
|
||||
<div class="w-[80px] mr-[20px]">
|
||||
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px"
|
||||
alt="avartar">
|
||||
<div class="mt-[10px]">
|
||||
<i class="icon-star star5"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[calc(100%-100px)]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
|
||||
<div class="flex py-2">
|
||||
<p class="mr-1">Tags:</p>
|
||||
<div class="list flex flex-wrap gap-[10px]">
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 view"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="padding flex items-center justify-center mt-[20px]">
|
||||
<a href="" class="">
|
||||
<i class="icon_2025 angle-right scale-x-[-1]"></i>
|
||||
</a>
|
||||
<a href="" class="active">
|
||||
<span>1</span>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<span>2</span>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<span>3</span>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<i class="icon_2025 angle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="w-[15%]">
|
||||
<b class="block mb-1 mt-[40px]">Hot tags</b>
|
||||
<div class="list">
|
||||
<div class="flex items-center mb-2">
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<span>(130 câu hỏi)</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<span>(130 câu hỏi)</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<span>(130 câu hỏi)</span>
|
||||
</div>
|
||||
<div class="flex items-center mb-2">
|
||||
<a href=""
|
||||
class="p-2 py-1 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<span>(130 câu hỏi)</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="javascript:void" class="text-blue-600 underline">Xem thêm tags >></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
337
page_faq_detail.html
Normal file
337
page_faq_detail.html
Normal file
@@ -0,0 +1,337 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BESTPC - Trang chủ</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./src/assets/css/font.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="page-faq-form bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Hỏi đáp
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="w-[70%]">
|
||||
<div class="p-2.5 bg-white">
|
||||
<div class="pb-2.5 border-b-[1px] border-neutral-200">
|
||||
<h1 class="mb-1.5 text-2xl font-bold">Máy tính của mình đang bị lỗi, mình không khởi động
|
||||
lại
|
||||
được, mọi
|
||||
người ai
|
||||
biết giúp
|
||||
mình với?</h1>
|
||||
<div class="flex items-center flex-wrap">
|
||||
<div class="flex items-center">
|
||||
<img src="./src/assets/images/avartar.png"
|
||||
class="w-[32px] h-[32px] block object-contain" width="100%" height="100%"
|
||||
alt="">
|
||||
<b class="ml-[5px]">Dino</b>
|
||||
<span class="ml-[5px] text-gray-500">10:00pm 20/02/2025</span>
|
||||
</div>
|
||||
<div class="flex items-center py-2 ml-[10px]">
|
||||
<p class="mr-1">Tags:</p>
|
||||
<div class="list flex flex-wrap gap-[10px]">
|
||||
<a href=""
|
||||
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
<a href=""
|
||||
class="text-base p-2 py-0.5 bg-blue-100 text-blue-500 rounded-[4px] mr-[5px] hover:bg-blue-600 hover:text-white">Computer</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content leading-[25px] mt-3">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
|
||||
Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen
|
||||
book. It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially
|
||||
unchanged. It was popularised in the 1960s with the release of Letraset sheets
|
||||
containing Lorem Ipsum passages, and more
|
||||
recently with desktop publishing software like Aldus PageMaker including versions of
|
||||
Lorem Ipsum.</p>
|
||||
|
||||
<a href="" class="block mx-auto my-2 ">
|
||||
<img src="https://placehold.co/950x600"
|
||||
class="w-full h-full object-contain block m-auto" alt="">
|
||||
</a>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
|
||||
Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley of type and
|
||||
scrambled it to make a type specimen
|
||||
book. It has survived not only five centuries, but also the leap into electronic
|
||||
typesetting, remaining essentially
|
||||
unchanged. It was popularised in the 1960s with the release of Letraset sheets
|
||||
containing Lorem Ipsum passages, and more
|
||||
recently with desktop publishing software like Aldus PageMaker including versions of
|
||||
Lorem Ipsum.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-comment mt-2.5 py-2.5 border-t-[1px] border-neutral-200">
|
||||
<form class="form flex gap-[20px]">
|
||||
<div class="avartar w-[60px] block h-[60px] rounded-[50%]">
|
||||
<img src="./src/assets/images/avartar.png" width="100%" height="100%"
|
||||
class="block object-contain w-full h-full" alt="">
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)]">
|
||||
<div
|
||||
class="relative w-full h-[120px] border-[1px] border-[#d9d9d9] rounded-[8px] overflow-hidden">
|
||||
<input type="text" class="w-full h-full rounded-[8px]" />
|
||||
|
||||
<div class="absolute right-[10px] bottom-[10px] w-[140px]">
|
||||
<div class="flex items-center gap-[10px]">
|
||||
<a href="" class="">
|
||||
<i class="icon_2025 earth"></i>
|
||||
</a>
|
||||
<a href="" class="">
|
||||
<i class="icon_2025 images"></i>
|
||||
</a>
|
||||
<button type="submit"
|
||||
class="px-5 py-0.5 text-white rounded-[4px] text-center bg-gray-400 uppercase">Gửi</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="list mt-5">
|
||||
<div class="item-review flex mb-[15px] pb-[15px]">
|
||||
<div class="w-[60px] mr-[20px]">
|
||||
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px"
|
||||
alt="avartar">
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)]">
|
||||
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing
|
||||
and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley
|
||||
of
|
||||
type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 like"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-review flex mb-[15px] pb-[15px]">
|
||||
<div class="w-[60px] mr-[20px]">
|
||||
<img src="./src/assets/images/avartar-review-1.png" width="75px" height="75px"
|
||||
alt="avartar">
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)]">
|
||||
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of the printing
|
||||
and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer took a galley
|
||||
of
|
||||
type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 like"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-reply mt-8">
|
||||
<div
|
||||
class="item-review flex pb-[30px] border-l-[1px] border-[#d4d4d4] pl-[10px]">
|
||||
<div class="w-[60px] mr-[20px]">
|
||||
<img src="./src/assets/images/avartar-review-1.png" width="75px"
|
||||
height="75px" alt="avartar">
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)] relative">
|
||||
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of
|
||||
the printing
|
||||
and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer
|
||||
took a galley
|
||||
of
|
||||
type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 like"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-[-15px] w-[25px] h-[15px] bg-[#f8f8f8] left-[10px]"
|
||||
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="item-review flex pb-[15px] border-l-[1px] border-[#d4d4d4] pl-[10px]">
|
||||
<div class="w-[60px] mr-[20px]">
|
||||
<img src="./src/assets/images/avartar-review-1.png" width="75px"
|
||||
height="75px" alt="avartar">
|
||||
</div>
|
||||
<div class="w-[calc(100%-80px)] relative">
|
||||
<div class="p-[15px] bg-[#f8f8f8] rounded-[8px]">
|
||||
<b class="mb-[10px]">Dino</b>
|
||||
<p class="mb-[10px] block text-[#747474]">10:00pm 20/02/2025</p>
|
||||
<p class="content mb-[5px]">Lorem Ipsum is simply dummy text of
|
||||
the printing
|
||||
and
|
||||
typesetting
|
||||
industry. Lorem Ipsum has been the industry's standard
|
||||
dummy text ever since the 1500s, when an unknown printer
|
||||
took a galley
|
||||
of
|
||||
type
|
||||
and scrambled it to make a type specimen
|
||||
book. I</p>
|
||||
<div class="btn flex items-center">
|
||||
<div class="flex items-center mr-[10px]">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 like"></i>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<b class="mr-[5px]">120</b>
|
||||
<i class="icon_2025 comment"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-[-15px] w-[25px] h-[15px] bg-[#f8f8f8] left-[10px]"
|
||||
style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
|
||||
">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="" class="font-bold text-[#FF7A00] hover:underline">Xem thêm 192 câu trả lời
|
||||
khác</a>
|
||||
|
||||
</div>
|
||||
<!-- form commet -->
|
||||
</div>
|
||||
</div>
|
||||
<div class=" w-[30%]">
|
||||
<div class="p-2.5 bg-white">
|
||||
<h3 class="text-xl block pb-2 border-b-[1px] border-[#95989a]">Top các câu hỏi được
|
||||
quan tâm
|
||||
</h3>
|
||||
<div class="list mt-2">
|
||||
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
||||
<i
|
||||
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
||||
<span
|
||||
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
||||
PC cho
|
||||
người mới bắt đầu như thế
|
||||
nào, hướng dẫn mình với?</span>
|
||||
</a>
|
||||
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
||||
<i
|
||||
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
||||
<span
|
||||
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
||||
PC cho
|
||||
người mới bắt đầu như thế
|
||||
nào, hướng dẫn mình với?</span>
|
||||
</a>
|
||||
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
||||
<i
|
||||
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
||||
<span
|
||||
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
||||
PC cho
|
||||
người mới bắt đầu như thế
|
||||
nào, hướng dẫn mình với?</span>
|
||||
</a>
|
||||
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
||||
<i
|
||||
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
||||
<span
|
||||
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
||||
PC cho
|
||||
người mới bắt đầu như thế
|
||||
nào, hướng dẫn mình với?</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
114
page_faq_form.html
Normal file
114
page_faq_form.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>BESTPC - Trang chủ</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="./src/assets/css/font.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
|
||||
<link rel="stylesheet" href="./src/assets/css/style.css" rel="stylesheet" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="page-faq-form bg-[#F4F4F4] pb-[100px]">
|
||||
<div class="container">
|
||||
<div class="breadcrumb p-[12px_0]">
|
||||
<ol itemscope="" itemtype="http://schema.org/BreadcrumbList" class="ul flex flex-wrap items-center">
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/" itemprop="item" class="nopad-l flex items-center text-[#637381]">
|
||||
<span itemprop="name"><span style="font-size: 0;display: none;">Trang chủ</span> <i
|
||||
class="icon_2025 home mr-[5px] mb-[5px]"></i></span>
|
||||
</a> <i class="icon_2025 angle-right ml-[12px]"></i>
|
||||
<meta itemprop="position" content="1">
|
||||
</li>
|
||||
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"
|
||||
class="flex items-center pr-[12px]">
|
||||
<a href="/man-hinh.html" itemprop="item" class="nopad-l flex items-center">
|
||||
<p class="font-[600]" itemprop="name">
|
||||
Hỏi đáp
|
||||
</p>
|
||||
</a>
|
||||
<meta itemprop="position" content="2">
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
<h1 class="text-2xl block mb-3">Nhập câu hỏi của bạn</h1>
|
||||
|
||||
<div class="px-3 pt-2.5 pb-12 mt-3.5 bg-white">
|
||||
<div class="flex gap-[15px]">
|
||||
<div class="w-[65%]">
|
||||
<div class="form-input faq mb-[20px]">
|
||||
<label for="" class="mb-1.5 block font-bold">Tiêu đề</label>
|
||||
<input type="text" name="title"
|
||||
class="bg-[#f8f8f8] rounded-[4px_4px_2px_2px] border-0 border-b-[1px] border-[#dddddd]"
|
||||
placeholder="Mời bạn nhập tiêu đề..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
<div class="form-input faq mb-[20px]">
|
||||
<label for="" class="mb-1.5 block font-bold">Nội dung</label>
|
||||
|
||||
<textarea id="product-desc"> </textarea>
|
||||
</div>
|
||||
<div class="form-input faq mb-[20px]">
|
||||
<label for="" class="mb-1.5 block font-bold">Tag</label>
|
||||
<input type="text" name="title"
|
||||
class="bg-[#f8f8f8] rounded-[4px_4px_2px_2px] border-0 border-b-[1px] border-[#dddddd]"
|
||||
placeholder="Mời bạn nhập tiêu đề..." />
|
||||
<div class="note-error"></div>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="rounded-[4px] hover:bg-purple-900 px-5 py-2 bg-[var(--color-global)] text-white">Gửi
|
||||
câu hỏi</button>
|
||||
|
||||
</div>
|
||||
<div class="w-[35%]">
|
||||
<h3 class="text-xl block pb-2 border-b-[1px] border-[#95989a]">Top các câu hỏi được quan tâm
|
||||
</h3>
|
||||
<div class="list mt-2">
|
||||
<a href="" class="flex items-star mb-2.5 gap-[10px]">
|
||||
<i
|
||||
class="not-italic mt-[3px] w-[20px] h-[20px] leading-[20px] text-center text-white block rounded-[4px] bg-gray-500">?</i>
|
||||
<span
|
||||
class="line-clamp-2 w-[calc(100%-30px)] text-[var(--color-hover)] hover:text-blue-800 hover:underline">Build
|
||||
PC cho
|
||||
người mới bắt đầu như thế
|
||||
nào, hướng dẫn mình với?</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
|
||||
|
||||
<script>
|
||||
|
||||
tinymce.init({
|
||||
selector: 'textarea#product-desc',
|
||||
height: 350,
|
||||
menubar: true,
|
||||
plugins: [
|
||||
'advlist autolink lists link image charmap print preview anchor',
|
||||
'searchreplace visualblocks code fullscreen',
|
||||
'insertdatetime media table paste code help wordcount'
|
||||
],
|
||||
toolbar: 'undo redo | formatselect | ' +
|
||||
'bold italic backcolor | alignleft aligncenter ' +
|
||||
'alignright alignjustify | bullist numlist outdent indent | ' +
|
||||
'removeformat | help',
|
||||
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -45,7 +45,7 @@ html {
|
||||
|
||||
.icon_2025 {
|
||||
background: url(../images/icon_2025.png) no-repeat;
|
||||
background-size: 228px 175px;
|
||||
background-size: 228px 236px;
|
||||
display: block;
|
||||
}
|
||||
.icon_2025.map {
|
||||
@@ -83,6 +83,11 @@ html {
|
||||
height: 24px;
|
||||
background-position: -70px -35px;
|
||||
}
|
||||
.icon_2025.shop-3 {
|
||||
width: 22px;
|
||||
height: 24px;
|
||||
background-position: -180px -163px;
|
||||
}
|
||||
.icon_2025.map-2 {
|
||||
width: 15px;
|
||||
height: 23px;
|
||||
@@ -113,6 +118,11 @@ html {
|
||||
height: 24px;
|
||||
background-position: -98px -123px;
|
||||
}
|
||||
.icon_2025.heart-2 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-position: -126px -151px;
|
||||
}
|
||||
.icon_2025.shop-blue {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@@ -249,6 +259,52 @@ html {
|
||||
height: 19px;
|
||||
background-position: -187px -4px;
|
||||
}
|
||||
.icon_2025.filter {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: 0px -187px;
|
||||
}
|
||||
.icon_2025.comment {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: -84px -25px;
|
||||
background-size: 190px 175px;
|
||||
}
|
||||
.icon_2025.faq {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: -129px -105px;
|
||||
}
|
||||
.icon_2025.tag {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: -102px -105px;
|
||||
}
|
||||
.icon_2025.images {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-position: -164px -186px;
|
||||
}
|
||||
.icon_2025.like {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-position: -209px -213px;
|
||||
}
|
||||
.icon_2025.sort_list {
|
||||
width: 34px;
|
||||
height: 22px;
|
||||
background-position: -50px -185px;
|
||||
}
|
||||
.icon_2025.sort_gird {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-position: -96px -186px;
|
||||
}
|
||||
.icon_2025.spec {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-position: -130px -186px;
|
||||
}
|
||||
|
||||
.icon-star {
|
||||
background: url(../images/icon_star.png) no-repeat;
|
||||
@@ -534,7 +590,7 @@ html {
|
||||
width: 15px;
|
||||
height: 19px;
|
||||
background-position: -49px -23px;
|
||||
background-size: 160px 125px;
|
||||
background-size: 160px 160px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
.product-item .summary {
|
||||
@@ -748,12 +804,12 @@ html {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#js-slider-big {
|
||||
.page-detail #js-slider-big {
|
||||
height: 680px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#js-slider-big .item img {
|
||||
.page-detail #js-slider-big .item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: contain;
|
||||
@@ -762,7 +818,7 @@ html {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#js-slider-small .item img {
|
||||
.page-detail #js-slider-small .item img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -770,13 +826,13 @@ html {
|
||||
object-fit: contain;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#js-slider-small .swiper-slide {
|
||||
.page-detail #js-slider-small .swiper-slide {
|
||||
border: 1px solid #b1b1b1;
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
#js-slider-small .swiper-slide-thumb-active {
|
||||
.page-detail #js-slider-small .swiper-slide-thumb-active {
|
||||
border: 1.5px solid var(--color-title);
|
||||
}
|
||||
|
||||
@@ -793,7 +849,7 @@ html {
|
||||
width: 15px;
|
||||
height: 19px;
|
||||
background-position: -49px -23px;
|
||||
background-size: 160px 125px;
|
||||
background-size: 160px 160px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
.box-product-detail .box-shop p {
|
||||
@@ -1086,6 +1142,35 @@ html {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.form-input.faq input {
|
||||
height: 65px;
|
||||
background: #f8f8f8;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.sort_list .product-item {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #efefef;
|
||||
border-radius: 0;
|
||||
}
|
||||
.sort_list .product-image {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.sort_list .info-product {
|
||||
width: calc(100% - 170px);
|
||||
}
|
||||
|
||||
#content-desciption .content.active {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.page-form-classifieds textarea {
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
#js-box-list-review .list-review {
|
||||
max-height: 450px;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -46,7 +46,7 @@ html {
|
||||
|
||||
.icon_2025 {
|
||||
background: url(../images/icon_2025.png) no-repeat;
|
||||
background-size: 228px 175px;
|
||||
background-size: 228px 236px;
|
||||
display: block;
|
||||
&.map {
|
||||
width: 20px;
|
||||
@@ -83,6 +83,11 @@ html {
|
||||
height: 24px;
|
||||
background-position: -70px -35px;
|
||||
}
|
||||
&.shop-3 {
|
||||
width: 22px;
|
||||
height: 24px;
|
||||
background-position: -180px -163px;
|
||||
}
|
||||
&.map-2 {
|
||||
width: 15px;
|
||||
height: 23px;
|
||||
@@ -113,6 +118,12 @@ html {
|
||||
height: 24px;
|
||||
background-position: -98px -123px;
|
||||
}
|
||||
&.heart-2 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-position: -126px -151px;
|
||||
}
|
||||
|
||||
&.shop-blue {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@@ -250,6 +261,52 @@ html {
|
||||
height: 19px;
|
||||
background-position: -187px -4px;
|
||||
}
|
||||
&.filter {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: 0px -187px;
|
||||
}
|
||||
&.comment {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: -84px -25px;
|
||||
background-size: 190px 175px;
|
||||
}
|
||||
&.faq {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: -129px -105px;
|
||||
}
|
||||
&.tag {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-position: -102px -105px;
|
||||
}
|
||||
&.images {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-position: -164px -186px;
|
||||
}
|
||||
&.like {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-position: -209px -213px;
|
||||
}
|
||||
&.sort_list {
|
||||
width: 34px;
|
||||
height: 22px;
|
||||
background-position: -50px -185px;
|
||||
}
|
||||
&.sort_gird {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-position: -96px -186px;
|
||||
}
|
||||
&.spec {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
background-position: -130px -186px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-star {
|
||||
@@ -565,7 +622,7 @@ html {
|
||||
width: 15px;
|
||||
height: 19px;
|
||||
background-position: -49px -23px;
|
||||
background-size: 160px 125px;
|
||||
background-size: 160px 160px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
}
|
||||
@@ -797,11 +854,11 @@ html {
|
||||
.box-filter label {
|
||||
cursor: pointer;
|
||||
}
|
||||
#js-slider-big {
|
||||
.page-detail #js-slider-big {
|
||||
height: 680px;
|
||||
width: 100%;
|
||||
}
|
||||
#js-slider-big .item {
|
||||
.page-detail #js-slider-big .item {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -811,7 +868,7 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
#js-slider-small {
|
||||
.page-detail #js-slider-small {
|
||||
.item {
|
||||
img {
|
||||
display: block;
|
||||
@@ -845,7 +902,7 @@ html {
|
||||
width: 15px;
|
||||
height: 19px;
|
||||
background-position: -49px -23px;
|
||||
background-size: 160px 125px;
|
||||
background-size: 160px 160px;
|
||||
filter: brightness(0) invert(1);
|
||||
}
|
||||
p {
|
||||
@@ -1141,6 +1198,39 @@ html {
|
||||
}
|
||||
}
|
||||
|
||||
.form-input.faq input {
|
||||
height: 65px;
|
||||
background: #f8f8f8;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.sort_list {
|
||||
.product-item {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #efefef;
|
||||
border-radius: 0;
|
||||
}
|
||||
.product-image {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.info-product {
|
||||
width: calc(100% - 170px);
|
||||
}
|
||||
}
|
||||
|
||||
#content-desciption {
|
||||
.content.active {
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.page-form-classifieds textarea {
|
||||
height: 230px;
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
#js-box-list-review {
|
||||
.list-review {
|
||||
|
||||
BIN
src/assets/images/banner_canhbao.png
Normal file
BIN
src/assets/images/banner_canhbao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 KiB |
BIN
src/assets/images/big-image-rao-vat.png
Normal file
BIN
src/assets/images/big-image-rao-vat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 477 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 55 KiB |
BIN
src/assets/images/icon_upload_image.png
Normal file
BIN
src/assets/images/icon_upload_image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/images/icon_upload_video.png
Normal file
BIN
src/assets/images/icon_upload_video.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1006 B |
BIN
src/assets/images/thumb-image-rao-vat.png
Normal file
BIN
src/assets/images/thumb-image-rao-vat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Reference in New Issue
Block a user