<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./reset.css">
<script src="https://kit.fontawesome.com/705381df09.js" crossorigin="anonymous"></script>
<title>zay shop-conan</title>
</head>
<body>
<!-- header -->
<header>
<!-- header top -->
<div class="h-top">
<div class="h-top-content container">
<div class="h-top-text">
<i class="fa-solid fa-envelope"></i> <a href="#">info@company.com</a>
<i class="fa-solid fa-phone-flip"></i> <a href="#">010-1234-5678</a>
</div>
<div class="h-top-icon">
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
</div>
<!-- header bottom -->
<div class="h-bottom container">
<a href="#"><img src="./img/apple-icon.png"></a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="h-bottom-right">
<a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
<a href="#"><i class="fa-solid fa-cart-arrow-down"></i></a>
<a href="#"><i class="fa-solid fa-user"></i></a>
</div>
</div>
</header>
<!-- main -->
<section id="main">
<div class="container">
</div>
<input type="radio" id="slide01" checked >
<input type="radio" id="slide02">
<input type="radio" id="slide03">
<i class="fa-solid fa-chevron-left left"></i>
<div class="text-box">
<h1><b>Zay</b> eCommerce</h1>
<h3>Tiny and Perfect eCommerce Template</h3>
<p>
Zay Shop is an eCommerce HTML5 CSS template with latest version of
Bootstrap 5 (beta 1). This template is 100% free provided by
<a href="#">TemplateMO</a> website.
Image credits go to <a href="#">Freepik Stories</a>,
<a href="#">Unsplash</a> and <a href="#">Icons 8.</a>
</p>
</div>
<img src="./img/banner_img_01.jpg">
<i class="fa-solid fa-chevron-right right"></i>
</section>
<!-- categorys -->
<section id="categorys" class="container">
<div class="category-title">
<h1>Categories of The Month</h1>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div class="category">
<div class="category-text">
<a href="#"><img src="./img/category_img_01.jpg" alt="product01"></a>
<h5>Watches</h5>
<a href="#">Go shop</a>
</div>
<div class="category-text">
<a href="#"><img src="./img/category_img_02.jpg" alt="product02"></a>
<h5>Shoes</h5>
<a href="#">Go shop</a>
</div>
<div class="category-text">
<a href="#"><img src="./img/category_img_03.jpg" alt="product03"></a>
<h5>Accessories</h5>
<a href="#">Go shop</a>
</div>
</div>
</section>
<!-- featured product -->
<section class="feature">
<div class="container">
<div class="feature-title">
<h1>Featured Product</h1>
<p>
Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident.
</p>
</div>
<div class="feature-contents">
<div class="feature-content">
<a href="#"><img src="./img/feature_prod_01.jpg"></a>
<div class="feature-content01">
<ul>
<li>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</li>
<li class="money">$240.00</li>
</ul>
<div>
<h1>Gym Weight</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
</p>
<p class="review">Reviews (24)</p>
</div>
</div>
</div>
<div class="feature-content">
<a href="#"><img src="./img/feature_prod_02.jpg"></a>
<div class="feature-content01">
<ul>
<li>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</li>
<li class="money">$240.00</li>
</ul>
<div>
<h1>Cloud Nike Shoes</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
</p>
<p class="review">Reviews (24)</p>
</div>
</div>
</div>
<div class="feature-content">
<a href="#"><img src="./img/feature_prod_03.jpg"></a>
<div class="feature-content01">
<ul>
<li>
<i class="fa-solid fa-star star"></i>
<i class="fa-solid fa-star star"></i>
<i class="fa-solid fa-star star"></i>
<i class="fa-solid fa-star star"></i>
<i class="fa-solid fa-star star"></i>
</li>
<li class="money">$240.00</li>
</ul>
<div>
<h1>Summer Addides Shoes</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
</p>
<p class="review">Reviews (74)</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer>
<section class="f-top">
<div class="container">
<div class="f-top-content">
<div class="f-top-contents01">
<h1>Zay Shop</h1>
<div class="f-top-content01">
<div class="con"><i class="fa-solid fa-location-dot"></i>
<p>123 Consectetur at ligula 10600</p>
</div>
<div class="con"><i class="fa-solid fa-phone-flip"></i>
<p> 010-1234-5678</p>
</div>
<div class="con"><i class="fa-solid fa-envelope"></i>
<p> inpo@company.com</p>
</div>
</div>
</div>
<div class="f-top-contents02">
<h1>Products</h1>
<ul class="f-top-content02">
<li>Luxury</li>
<li>Sport Wear</li>
<li>Men's Shoes</li>
<li>Women's Shoes</li>
<li>Popular Dress</li>
<li>Gym Accessories</li>
<li>Sport Shoes</li>
</ul>
</div>
<div class="f-top-contents03">
<h1>Further Info</h1>
<ul class="f-top-content02">
<li>Home</li>
<li>About Us</li>
<li>Shop Locations</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="f-top-icon">
<div>
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
<form>
<input type="email" placeholder="Email address">
<input type="submit" value="Subscribe">
</form>
</div>
</div>
</section>
<section class="f-bottom">
<div class="container">
Copyright © 2021 Company Name
| Designed by <a href="#">TemplateMo</a></div>
</section>
</footer>
</body>
</html>