Scribd
Upload
5 views

Shop

This is a shop chart of gym website

Uploaded by

Rabbi Ali
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
5 views

Shop

This is a shop chart of gym website

Uploaded by

Rabbi Ali
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
You are on page 1/ 3

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop - Gym Name</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f9f9f9;
color: #333;
padding: 20px;
}

header {
background: #333;
color: #fff;
padding: 15px;
text-align: center;
}

nav {
text-align: center;
margin: 20px 0;
}

nav a {
color: #333;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}

nav a:hover {
color: #777;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.shop-header {
text-align: center;
margin-bottom: 30px;
}

.shop-header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}

.products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}

.product-card {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
padding: 15px;
text-align: center;
transition: transform 0.2s;
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.product-image {
max-width: 100%;
border-radius: 5px;
margin-bottom: 15px;
}

.product-name {
font-size: 1.2em;
margin: 10px 0;
}

.product-price {
color: #555;
margin-bottom: 15px;
}

.buy-button {
display: inline-block;
background-color: #333;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}

.buy-button:hover {
background-color: #555;
}

footer {
background: #222;
color: #fff;
text-align: center;
padding: 20px;
margin-top: 20px;
}
footer p {
margin: 5px;
}
</style>
</head>
<body>
<header>
<h1>Gym Name Shop</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Shop</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<div class="shop-header">
<h1>Shop Our Fitness Products</h1>
<p>High-quality gym gear, supplements, and more.</p>
</div>
<div class="products">
<div class="product-card">
<img src="dumbbell.jpg" alt="Dumbbell Set" class="product-image">
<h2 class="product-name">Dumbbell Set</h2>
<p class="product-price">$99.99</p>
<a href="#" class="buy-button">Buy Now</a>
</div>
<div class="product-card">
<img src="yoga-mat.jpg" alt="Yoga Mat" class="product-image">
<h2 class="product-name">Yoga Mat</h2>
<p class="product-price">$19.99</p>
<a href="#" class="buy-button">Buy Now</a>
</div>
<div class="product-card">
<img src="protein-powder.jpg" alt="Protein Powder" class="product-
image">
<h2 class="product-name">Protein Powder</h2>
<p class="product-price">$49.99</p>
<a href="#" class="buy-button">Buy Now</a>
</div>
<div class="product-card">
<img src="gym-bag.jpg" alt="Gym Bag" class="product-image">
<h2 class="product-name">Gym Bag</h2>
<p class="product-price">$39.99</p>
<a href="#" class="buy-button">Buy Now</a>
</div>
</div>
</div>
<footer>
<p>&copy; 2024 Gym Name. All rights reserved.</p>
</footer>
</body>
</html>

You might also like