-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathBagpacks.htm
154 lines (149 loc) · 4.11 KB
/
Bagpacks.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Backpack Store</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
header h1 {
font-size: 2.5em;
}
nav {
margin-top: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-size: 1.2em;
}
.hero {
background-image: url('backpack.jpg'); /* Replace with your image */
background-size: cover;
background-position: center;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.hero h2 {
font-size: 3em;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.featured {
padding: 40px;
text-align: center;
}
.featured h2 {
font-size: 2.5em;
margin-bottom: 30px;
}
.product-grid {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.product {
background-color: white;
width: 250px;
margin: 15px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.product img {
width: 100%;
height: auto;
border-radius: 5px;
}
.product h3 {
font-size: 1.5em;
margin: 10px 0;
}
.product p {
color: #666;
margin-bottom: 15px;
}
.product .price {
font-size: 1.2em;
color: #27ae60;
margin-bottom: 10px;
}
.product button {
padding: 10px 20px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Backpack Store</h1>
<nav>
<a href="#">Home</a>
<a href="#">Shop</a>
<a href="#">Contact Us</a>
</nav>
</header>
<section class="hero">
<h2>Find Your Perfect Backpack</h2>
</section>
<section class="featured">
<h2>Featured Backpacks</h2>
<div class="product-grid">
<div class="product">
<img src="https://tse1.mm.bing.net/th?id=OIP.ERVQSMA7K7jLHFLzp2vn6gHaJb&pid=Api&P=0&h=180" alt="Backpack 1">
<h3>Stylish Backpack</h3>
<p>Perfect for daily use and travel.</p>
<div class="price">$49.99</div>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://tse1.mm.bing.net/th?id=OIP.ERVQSMA7K7jLHFLzp2vn6gHaJb&pid=Api&P=0&h=180" alt="Backpack 2">
<h3>Durable Backpack</h3>
<p>Made for rugged outdoor adventures.</p>
<div class="price">$69.99</div>
<button>Add to Cart</button>
</div>
<div class="product">
<img src="https://tse1.mm.bing.net/th?id=OIP.ERVQSMA7K7jLHFLzp2vn6gHaJb&pid=Api&P=0&h=180" alt="Backpack 3">
<h3>Compact Backpack</h3>
<p>Ideal for students and professionals.</p>
<div class="price">$39.99</div>
<button>Add to Cart</button>
</div>
</div>
</section>
<footer>
<p>© 2024 Backpack Store. All rights reserved.</p>
</footer>
</body>
</html>