Scribd
Upload
9 views3 pages

Shop Latest Jewelry Designs Online

This document is an HTML template for a jewelry brand's shop page, featuring a header with navigation links, a section to showcase products, and a footer with copyright information. The shop section includes a title and a grid layout for displaying various jewelry items, each with an image, title, description, and an 'Add to Cart' button. The design employs a wine color scheme and is styled for a clean, modern appearance.

Uploaded by

aanyavij11
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views3 pages

Shop Latest Jewelry Designs Online

This document is an HTML template for a jewelry brand's shop page, featuring a header with navigation links, a section to showcase products, and a footer with copyright information. The shop section includes a title and a grid layout for displaying various jewelry items, each with an image, title, description, and an 'Add to Cart' button. The design employs a wine color scheme and is styled for a clean, modern appearance.

Uploaded by

aanyavij11
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Your Jewelry Brand</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #f9f9f9;
}

header {
background-color: #5D0E2C; /* Wine color */
color: beige;
padding: 20px 0;
text-align: center;
}

header nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}

header nav ul li {
margin: 0 20px;
}

header nav ul li a {
color: beige;
text-decoration: none;
font-weight: bold;
}

#shop-now {
padding: 50px 20px;
text-align: center;
}

#shop-now h2 {
font-size: 40px;
font-weight: bold;
margin-bottom: 30px;
}

.product-grid {
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}

.product {
width: 23%;
text-align: center;
background-color: #fff;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.product img {
width: 100%;
border-radius: 10px;
}

.product h3 {
margin-top: 15px;
font-size: 22px;
}

.product p {
font-size: 16px;
color: #555;
margin-top: 10px;
}

.product button {
background-color: #5D0E2C;
color: beige;
border: none;
padding: 10px 20px;
cursor: pointer;
font-weight: bold;
margin-top: 10px;
}

footer {
background-color: #5D0E2C;
color: beige;
padding: 20px 0;
text-align: center;
}

footer p {
font-size: 14px;
}

footer a {
color: beige;
text-decoration: none;
}

footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>

<!-- Header -->


<header>
<nav>
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">Shop</a></li>
<li><a href="[Link]">About Us</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- Shop Now Section -->


<section id="shop-now">
<h2>Shop Our Latest Designs</h2>
<div class="product-grid">
<!-- Example for a few products, repeat for the full list of 20 -->
<div class="product">
<img src="[Link]" alt="Chunky Ring">
<h3>Chunky Gold Ring</h3>
<p>Bold and sleek. Perfect for stacking.</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="[Link]" alt="Waist Chain">
<h3>Gold Waist Chain</h3>
<p>Elegant and unique. A statement piece.</p>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="[Link]" alt="Arm Cuff">
<h3>Silver Arm Cuff</h3>
<p>Empowering and stylish for any look.</p>
<button>Add to Cart</button>
</div>
<!-- Add more products here... -->
<!-- Repeat the above block for each product. -->
</div>
</section>

<!-- Footer -->


<footer>
<p>&copy; 2024 Your Jewelry Brand | <a href="#privacy">Privacy Policy</a> |
<a href="#terms">Terms of Service</a></p>
</footer>

</body>
</html>

You might also like