tieptk/bestpc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
6b5e8373241ae4497a97d26e6bc6815d6ffe4b6d
bestpc/template/faq/page_faq.html

209 lines
13 KiB
HTML
Raw Normal View History

upload
2025-05-11 21:25:48 +07:00
<!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>
up 10:52
2025-05-12 10:52:19 +07:00
<link rel="stylesheet" href="/src/assets/css/font.css">
upload
2025-05-11 21:25:48 +07:00
<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" />
upload 13/5
2025-05-13 09:37:53 +07:00
<link rel="stylesheet" href="/assets/css/style.css" rel="stylesheet" />
upload
2025-05-11 21:25:48 +07:00
</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]">
upload 13/5
2025-05-13 09:37:53 +07:00
<img src="/assets/images/avartar-review-1.png" width="75px" height="75px"
upload
2025-05-11 21:25:48 +07:00
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>
Reference in New Issue Copy Permalink