-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (129 loc) · 5.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fashnow</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/a56f637b32.js" crossorigin="anonymous"></script>
<!-- Swiper's CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<!-- Swiper's JS -->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<div class="all">
<!-- Header Section -->
<div class="header">
<div class="logo">
<h1>FashNow</h1>
</div>
<div class="header-right">
<div class="nav">
<div><a href="#collection">Collection</a></div>
<div><a href="#trending">Trending</a></div>
<div><a href="#newsletter">Newsletter</a></div>
<div><a href="#contact">Contact</a></div>
</div>
<div class="cta">Shop Now</div>
</div>
<i class="fa fa-bars" id="menu"></i>
</div>
<!-- Hero Section -->
<div class="hero" id="hero">
<div class="hero-wrapper">
<div class="hero-content">
<div>
Not Just for the Streets <br>
Street Fashion<br> 2024
</div>
<button class="cta cta-hero">Get Started</button>
</div>
<div class="hero-image">
<img src="./assets/hero.jpg" alt="Streetwear Model">
</div>
</div>
</div>
<div class="swiper-container ribbon-container">
<div class="swiper-wrapper ribbon-band">
<div class="swiper-slide ribbon-slide text">Jackets</div>
<div class="swiper-slide ribbon-slide">
<i class="fa-solid fa-meteor icon"></i>
</div>
<div class="swiper-slide ribbon-slide text">Sweatshirts</div>
<div class="swiper-slide ribbon-slide">
<i class="fa-solid fa-fire icon"></i>
</div>
<div class="swiper-slide ribbon-slide text">T-Shirts</div>
<div class="swiper-slide ribbon-slide"><i class="fa-solid fa-bomb icon"></i></div>
<div class="swiper-slide ribbon-slide text">Hoodies</div>
<div class="swiper-slide ribbon-slide"><i class="fa-solid fa-rocket icon"></i></div>
</div>
</div>
<!-- Collection Section -->
<div id="collection" class="collection">
<div class="collection-wrapper">
<div class="collection-t">Men's Fashion</div>
<div class="collection-h">Spring-Summer 2024</div>
<div class="collection-grid">
<div class="collection-item">
<img src="./assets/collection-1.jpg" alt="Unconstructed Jacket">
<div class="item-name">Unconstructed Jacket</div>
<p>$199</p>
</div>
<div class="collection-item item-2">
<img src="./assets/collection-2.jpg" alt="Oversized Sweater">
<div class="item-name">Oversized Sweater</div>
<p>$149</p>
</div>
<div class="collection-item">
<img src="./assets/collection-3.jpg" alt="Urban Bomber Jacket">
<div class="item-name">Urban Bomber Jacket</div>
<p>$229</p>
</div>
</div>
</div>
</div>
<!-- Trending Section -->
<div id="trending" class="trending">
<div class="collection-wrapper">
<div class="collection-h">Trending Now</div>
<div class="collection-grid trending-grid">
<div class="collection-item">
<img src="./assets/trending-1.jpg" alt="Trending Item 1">
<div class="item-name">Casual Street Jacket</div>
<p>$199</p>
</div>
<div class="collection-item item-2">
<img src="./assets/trending-2.jpg" alt="Trending Item 2">
<div class="item-name">Relaxed Fit Hoodie</div>
<p>$149</p>
</div>
<div class="collection-item">
<img src="./assets/trending-3.jpg" alt="Trending Item 3">
<div class="item-name">Bright Orange Puffer</div>
<p>$229</p>
</div>
</div>
</div>
</div>
<!-- Newsletter Section -->
<div id="newsletter" class="newsletter">
<form class="newsletter-form">
<span>
<h2>Be the First to Hear About Exclusive Offers</h2>
</span>
<span><input class="cta inp" type="email" placeholder="Enter your email" required>
<div class="cta btn">Send Request</div>
</span>
</form>
</div>
<div id="contact">
<p>© 2024 FashNow Streetwear</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="script.js" defer></script>
</div>
</body>
</html>