-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
402 lines (387 loc) · 16.9 KB
/
index.html
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShoeShop - E-commerce Web Template</title>
<meta name="description" content="Explore ShoeShop's E-commerce Web Template">
<meta name="keywords" content="E-commerce, shoe shop, web template, creative designs, web solutions">
<meta name="author" content="ShoeShop">
<meta name="robots" content="index, follow">
<meta property="og:title" content="ShoeShop - E-commerce Web Template">
<meta property="og:description" content="E-commerce, shoe shop, web template, creative designs, web solutions">
<meta property="og:image" content="img/dot.jpg">
<meta property="og:url" content="https://www.yourwebsite.com">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ShoeShop - E-commerce Web Template">
<meta name="twitter:description" content="E-commerce, shoe shop, web template, creative designs, web solutions">
<meta name="twitter:image" content="img/me.jpg">
<link rel="icon" type="image/png" href="img/dot.jpg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- HEADER - NAVIGATION BAR -->
<header>
<div class="container">
<nav>
<div class="logo">
<div class="logo-icon"></div>
ShoeShop
</div>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
</div>
</header>
<div class="nav-overlay">
<div class="overlay-content">
<a href="#home">Home</a>
<a href="#products">Products</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
<button class="overlay-button">Shop Now</button>
</div>
</div>
<!-- HERO SECTION -->
<main>
<section id="home" class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<h1 data-aos="fade-down">Step into the Future of Footwear</h1>
<p data-aos="fade-down" data-aos-duration="1600">
Discover cutting-edge designs and unparalleled comfort with our shoe collection
</p>
<a href="#products" class="cta-button" data-aos="fade-right">Explore Now</a>
</div>
<div class="hero-image">
<img src="img/hero_shoe.png" alt="Featured Shoe" data-aos="fade-left">
</div>
</div>
</div>
</section>
<!-- PRODUCTS SECTION -->
<section id="products" class="section">
<div class="container">
<h2 class="section-title" data-aos="fade-down">Featured Products</h2>
<p class="highlight-text" data-aos="fade-down" data-aos-duration="1500">
Step up your shoe game with our carefully curated selection of <span class="highlight"> must-have </span> footwear.
</p>
<br><br>
<div class="product-grid">
<div class="product-card" data-aos="fade-down">
<img src="img/product1.jpeg" alt="Red Sneakers" class="product-image">
<div class="product-info">
<h3 class="product-title">Red Sneakers</h3>
<p class="product-price">
$159.99
</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<div class="product-card" data-aos="fade-down">
<img src="img/product2.jpeg" alt="Smart Leather Shoes" class="product-image">
<div class="product-info">
<h3 class="product-title">Smart Leather Shoes</h3>
<p class="product-price">
$199.99
</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<div class="product-card" data-aos="fade-down">
<img src="img/product3.jpeg" alt="Adaptive Fit Sneakers" class="product-image">
<div class="product-info">
<h3 class="product-title">Adaptive Fit Sneakers</h3>
<p class="product-price">
$179.99
</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
<div class="product-card" data-aos="fade-down">
<img src="img/product4.jpeg" alt="AI-Optimized Running Shoes" class="product-image">
<div class="product-info">
<h3 class="product-title">Running Shoes</h3>
<p class="product-price">
$189.99
</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
</div>
</div>
</section>
<!-- ABOUT SECTION -->
<section id="about" class="section">
<div class="container">
<h2 class="section-title" data-aos="fade-down">About Us</h2>
<p class="highlight-text" data-aos="fade-down" data-aos-duration="1500">
We're <span class="highlight">dedicated</span> to bringing you the latest trends and timeless classics in footwear.
</p>
<br><br>
<div class="about-content">
<img src="img/about_img.jpg" alt="About ShoeShop" class="about-image" data-aos="fade-down">
<div class="about-text">
<p data-aos="fade-down">
ShoeShop is at the forefront of footwear innovation, with stylish designs. Our mission is to provide our customers with the most comfortable, durable, and fashionable shoes on the market.
</p>
<p data-aos="fade-down">
Founded in 2020, we've quickly become a leader in the footwear industry. Our team of expert designers and engineers work tirelessly to create shoes that adapt to your unique needs and preferences.
</p>
</div>
</div>
</div>
</section>
<!-- SERVICES SECTION -->
<section id="services" class="section">
<div class="container">
<h2 class="section-title" data-aos="fade-down">Our Services</h2>
<p class="highlight-text" data-aos="fade-down" data-aos-duration="1500">
Explore our range of services designed to enhance your <span class="highlight">shopping experience</span> from personalized fittings to exclusive style consultations.
</p>
<br><br>
<div class="services-grid">
<div class="service-card" data-aos="fade-down">
<div class="service-icon">
<i class="fas fa-shoe-prints"></i>
</div>
<h3>Custom Fitting</h3>
<p>
Our fitting system ensures you get the perfect size and fit for your feet.
</p>
</div>
<div class="service-card" data-aos="fade-down">
<div class="service-icon">
<i class="fas fa-tshirt"></i>
</div>
<h3>Styling</h3>
<p>
Get personalized shoe recommendations based on your style preferences and needs.
</p>
</div>
<div class="service-card" data-aos="fade-down">
<div class="service-icon">
<i class="fas fa-brush"></i>
</div>
<h3>Shoe Care</h3>
<p>
Learn how to properly care for and maintain your shoes to extend their lifespan.
</p>
</div>
<div class="service-card" data-aos="fade-down">
<div class="service-icon">
<i class="fas fa-exchange-alt"></i>
</div>
<h3>Easy Returns</h3>
<p>
Hassle-free returns and exchanges within 30 days of purchase for your peace of mind.
</p>
</div>
</div>
</div>
</section>
<!-- TESTIMONIALS SECTION -->
<section id="testimonials" class="section" data-aos="fade-down" data-aos-duration="1500">
<div class="container">
<h2 class="section-title">What Our Customers Say</h2>
<p class="text-highlight">
Hear what our <span class="highlight">satisfied customers</span> have to say! Discover why ShoeShop is their go-to destination for stylish and comfortable footwear.
</p>
<br><br>
<div class="testimonial-carousel">
<div class="testimonial-card">
<div class="profile-pic">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Jane Doe">
</div>
<h3 class="customer-name">Jane Doe</h3>
<p class="testimonial-text">
"ShoeShop's custom fitting service is incredible! I've never had shoes that fit so perfectly."
</p>
<div class="testimonial-social-icons">
<a href="#" class="testimonial-icon" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="testimonial-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" class="testimonial-icon" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="testimonial-card">
<div class="profile-pic">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="John Smith">
</div>
<h3 class="customer-name">John Smith</h3>
<p class="testimonial-text">
"The Running Shoes have significantly improved my performance. Highly recommended!"
</p>
<div class="testimonial-social-icons">
<a href="#" class="testimonial-icon" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="testimonial-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" class="testimonial-icon" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="testimonial-card">
<div class="profile-pic">
<img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Emma Wilson">
</div>
<h3 class="customer-name">Emma Wilson</h3>
<p class="testimonial-text">
"ShoeShop's customer service is top-notch. They went above and beyond to help me find the perfect pair."
</p>
<div class="testimonial-social-icons">
<a href="#" class="testimonial-icon" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="testimonial-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" class="testimonial-icon" aria-label="Email"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
<div class="carousel-navigation">
<button class="prev-btn" aria-label="Previous testimonial"><i class="fas fa-chevron-left"></i></button>
<button class="next-btn" aria-label="Next testimonial"><i class="fas fa-chevron-right"></i></button>
</div>
</div>
</section>
<!-- FAQ AND CONTACT SECTION -->
<section class="faq-contact-container" data-aos="fade-down">
<div class="faq-section">
<h2>Frequently Asked Questions</h2>
<p class="highlight-text">
Get answers to common questions about ShoeShop. <span class="highlight">Explore</span> our FAQ to find information on orders, returns, sizing, and more.
</p>
<br><br>
<div class="faq-item">
<div class="faq-question">
<span class="plus-icon">+</span>
How do I find the right shoe size?
</div>
<div class="faq-answer">
We offer a comprehensive size guide on our website. You can also use our virtual fitting tool for a more accurate measurement. If you're still unsure, our customer service team is always ready to help!
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span class="plus-icon">+</span>
What is ShoeShop's return policy?
</div>
<div class="faq-answer">
We offer a 30-day return policy for unworn shoes in their original packaging. Exchanges are free, and returns are subject to a small restocking fee. Please check our Returns page for more details.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span class="plus-icon">+</span>
Do you offer international shipping?
</div>
<div class="faq-answer">
Yes, we ship to many countries worldwide. Shipping costs and delivery times vary depending on the destination. You can check available shipping options during checkout.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span class="plus-icon">+</span>
How can I track my order?
</div>
<div class="faq-answer">
Once your order is shipped, you'll receive a tracking number via email. You can use this number on our website or the courier's site to track your package's progress.
</div>
</div>
<div class="faq-item">
<div class="faq-question">
<span class="plus-icon">+</span>
Are your shoes eco-friendly?
</div>
<div class="faq-answer">
We're committed to sustainability. Many of our shoes are made with eco-friendly materials, and we're constantly expanding our green line. Look for the "Eco-Friendly" tag on our products for more information.
</div>
</div>
</div>
<div class="contact-section" data-aos="fade-down">
<h2>Contact Us</h2>
<form class="contact-form">
<div class="form-group">
<input type="text" id="name" name="name" required placeholder=" ">
<label for="name">Your Name</label>
</div>
<div class="form-group">
<input type="email" id="email" name="email" required placeholder=" ">
<label for="email">Your Email</label>
</div>
<div class="form-group">
<textarea id="message" name="message" required placeholder=" "></textarea>
<label for="message">Your Message</label>
</div>
<button type="submit" class="submit-btn">Send Message</button>
</form>
</div>
</section>
</main>
<!-- FOOTER SECTION -->
<footer>
<div class="container">
<div class="footer-content" data-aos="fade-down" data-aos-duration="1500">
<div class="footer-section">
<h3>Quick Links</h3>
<ul class="quick-links">
<li><a href="#home">Home</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div id="contact" class="footer-section">
<h3>Connect With Us</h3>
<div class="social-links">
<a href="#" class="social-icon" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-icon" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" class="social-icon" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="footer-section">
<h3>About Us</h3>
<p>
ShoeShop is at the forefront of footwear with stylish designs.
</p>
<p>
Our mission is to provide our customers with the most comfortable, durable, and fashionable shoes on the market.
</p>
</div>
<div class="footer-section">
<h3>Contact Information</h3>
<p>
123 Shoe Street, Footwear City, FC 12345
</p>
<p>
Phone: (123) 456-7890
</p>
<p>
Email: info@shoeshop.com
</p>
</div>
</div>
<div class="footer-bottom">
<p>
© 2024 ShoeShop. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="script.js"></script>
</body>
</html>