HTML & CSS 연습/coza
html
별초롱언니
2025. 3. 18. 17:53
<!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="../../CSS/make/coza.css">
<title>coza</title>
</head>
<body>
<header>
<div class="top-bar">
<div class="container">
<div class="top-left">Free shipping for standard order over $100</div>
<ul class="top-right">
<li><a href="#">Help & FAQs</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">EN</a></li>
<li><a href="#">USD</a></li>
</ul>
</div>
</div>
<div class="wrap-menu">
<div class="wrap-top-left"><a href=""><img src="img/logo.png"></a>
<nav>
<ul class="wrap-top-nav">
<li><a class="homecolor" href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div>
<a class="top-icon" href="#"><img src="icon/search.svg" alt="search" width="20px"></a>
<a class="top-icon" href="#"><img src="icon/cart.svg" alt="search" width="20px"></a>
<a class="top-icon" href="#"><img src="icon/heart.svg" alt="search" width="20px"></a>
</div>
</div>
</header>
<section class="slide">
<div class="slide-content">
<div>
<p>Men New-Season</p>
</div>
<div>
<h1>JACKETS & COATS</h1>
</div>
<a href="#">SHOP NOW</a>
</div>
</section>
<section id="category" class="container">
<div>
<h2>Women</h2>
<p>Spring 2025</p>
<a href="#"><img src="img/women.jpg" alt="women" width="500px"></a>
</div>
<div>
<h2>Men</h2>
<p>Spring 2025</p>
<a href="#"><img src="img/Men.jpg" alt="women" width="500px"></a>
</div>
<div>
<h2>Accessories</h2>
<p>New Trend</p>
<a href="#"><img src="img/Accessories.jpg" alt="women" width="500px"></a>
</div>
</section>
<section>
<h2>PRODUCT OVERVIEW</h2>
<div>
<div>
<button>All Products</button>
<button>Women</button>
<button>Men</button>
<button>Bag</button>
<button>Shoes</button>
<button>Watches</button>
</div>
<div>
<button><img src="icon/filter.svg" width="12px">Filter</button>
<button><img src="icon/search.svg" width="12px">Search</button>
</div>
</div>
</section>
<section>
<div>
<span>
<img src="img/women1.jpg" width="300px">
</span>
<div>
<span>Esprit Ruffle Shirt</span>
<span><img src="icon/heart.svg" alt="product01" width="20px"></span>
</div>
<div>$16.64</div>
</div>
<div>
<div>
<img src="img/women2.jpg" width="300px">
</div>
<div>
<span>Horschel supply</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$35.31</div>
</div>
<div>
<div>
<img src="img/Men1.jpg" width="300px">
</div>
<div>
<span>Esprit Ruffle Shirt</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$25.50</div>
</div>
<div>
<div>
<img src="img/women3.jpg" width="300px">
</div>
<div>
<span>Classic Trench coat</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$75.00</div>
</div>
<div>
<div>
<img src="img/women4.jpg" width="300px">
</div>
<div>
<span>Front Pocket Jumper</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$34.75</div>
</div>
<div>
<div>
<img src="img/watches1.jpg" width="300px">
</div>
<div>
<span>Vintage Inspired Classic</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$93.20</div>
</div>
<div>
<div>
<img src="img/women5.jpg" width="300px">
</div>
<div>
<span>Shirt in Stretch Cotton</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$52.66</div>
</div>
<div>
<div>
<img src="img/women6.jpg" width="300px">
</div>
<div>
<span>Pieces Metallic Printed</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$18.96</div>
</div>
<div>
<div>
<img src="img/shoes.jpg" width="300px">
</div>
<div>
<span>Converse All Star Hi Plimsolls</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$75.00</div>
</div>
<div>
<div>
<img src="img/women7.jpg" width="300px">
</div>
<div>
<span>Femme T-Shirt in Stripe</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$25.85</div>
</div>
<div>
<div>
<img src="img/Men2.jpg" width="300px">
</div>
<div>
<span>Herschel supply</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$63.16</div>
</div>
<div>
<div>
<img src="img/Men3.jpg" width="300px">
</div>
<div>
<span>Herschel supply</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$63.15</div>
</div>
<div>
<div>
<img src="img/women8.jpg" width="300px">
</div>
<div>
<span>T-shirt with Sleeve</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$18.49</div>
</div>
<div>
<div>
<img src="img/women9.jpg" width="300px">
</div>
<div>
<span>Pretty Little Thing</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$54.79</div>
</div>
<div>
<div>
<img src="img/watches2.jpg" width="300px">
</div>
<div>
<span>Mini silver Mesh Watch</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$86.85</div>
</div>
<div>
<div>
<img src="img/women10.jpg" width="300px">
</div>
<div>
<span>Square Neck Back</span>
<span><img src="icon/heart.svg" width="20px"></span>
</div>
<div>$29.64</div>
</div>
</section>
<button>LOAD MORE</button>
<footer>
<div>
<h4>CATEGORIES</h4>
<ul>
<li><a href="#">Women</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Watches</a></li>
</ul>
</div>
<div>
<h4>HELP</h4>
<ul>
<li><a href="">Track Order</a></li>
<li><a href="">Returns</a></li>
<li><a href="">Shipping</a></li>
<li><a href="">FAQs</a></li>
</ul>
</div>
<div>
<h4>GET IN TOUCH</h4>
<p>Any questions? Let us know in store at 8th floor. 379 Hudson St, New York, NY 10018 or call us on (+1) 96 716
6879</p>
</div>
<div>
<h4>NEWSLETTER</h4>
<form action="#">
<input type="email" name="email">
<input type="submit" value="SUBSCRIBE">
</form>
</div>
<div>
<div>
<div>
<img src="img/1.png" alt="">
<img src="img/2.png" alt="">
<img src="img/3.png" alt="">
<img src="img/4.png" alt="">
<img src="img/5.png" alt="">
</div>
<div>Copyright ©2025 All rights reserved I made with ❤ by Colorib & distributed by ThemeWagon</div>
</div>
</div>
</footer>
</body>
</html>