-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
190 lines (173 loc) · 7.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SHAFIRAgdsc</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/03f7554adf.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<nav class="container1">
<input type="checkbox" id="toggle" class="checkbox">
<div class="logo">SHAFIRA</div>
<label class="navbar-toggler" for="toggle">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</label>
<ul>
<li><a href="#sale"><i class="fa-solid fa-cart-shopping fa-xl" style="color: #ffffff;"></i> Sale</a></li>
<li><a href="#men"><i class="fa-solid fa-person fa-xl" style="color: #ffffff;"></i> Men</a></li>
<li><a href="#women"><i class="fa-solid fa-person-dress fa-xl" style="color: #ffffff;"></i> Women</a></li>
<li><a href="#kids"><i class="fa-solid fa-child-reaching fa-xl" style="color: #ffffff;"></i> Kids</a></li>
<li><a href="#contact"><i class="fa-solid fa-envelope fa-xl" style="color: #ffffff;"></i> Contact Us</a></li>
</ul>
</nav>
</header>
<section class="sale-section" id="sale">
<h1>This is hidden.This heading is used to maintain a gap between the Sale section and heading section which
can't be done using break
statement if we click on the Sale link at the header.
</h1>
<h1>This is hidden.This heading is used to maintain a gap between the Sale section and heading section which
can't be done
using break
statement if we click on the Sale link at the header.
</h1>
<div class="Slider">
<div class="imgSlider"></div>
</div>
</section>
<br>
<br>
<br>
<section class="men-section" id="men">
<div class="container2">
<hr>
<br>
<h2>
<div id="menlogo" >
<a><i class="fa-solid fa-person fa-bounce fa-2xl" style="color: #000000;"></i>
<div class="jump">MEN</div>
</a>
</div>
</h2>
<br>
<h4>
Whether you're a seasoned stylist, a fashion enthusiast, or a total menswear noob, basics are the
necessary building
blocks for every great wardrobe. Our clothing brand is pumping out adrenaline-soaked
collections that
fuel the hype machine into overdrive. But before you rush out the door chasing every hot new designer
and hopping on
every fashion trend you see on your FYP, you gotta set a firm foundation for your closet.
</h4>
<button class="primary-btn">Click here to check out our collection</button>
<div class="Men-img">
<img src="https://res.cloudinary.com/dxps8tmka/image/upload/v1692037774/MEN_eeuwxs.png" alt="Men" width="400">
</div>
</div>
</section>
<br>
<br>
<br>
<section class="women-section" id="women">
<div class="container2">
<hr>
<br>
<h2>
<div id="womenlogo">
<a><i class="fa-solid fa-person-dress fa-bounce fa-2xl" style="color: #000000;"></i> <div class="jump">WOMEN</div></a>
</div>
</h2>
<br>
<h4>
Fashion-forward collection for self-assured young women. Providing high-quality, inexpensive, and
inspirational apparel for modern ladies. Get the high-quality, on-trend clothes at reasonable costs.
Offering the finest of designs with a passion for dressing up Indian ladies and making them feel
confident and trendy.
Comprehensive variety of women's apparel in a variety of designs, including party dresses, western
wear, maxi dresses, women's shirts, one-piece dresses, jumpsuits, skirts, and more.
</h4>
<button class="primary-btn">Click here to check out our collection</button>
<div class="Women-img">
<img src="https://res.cloudinary.com/dxps8tmka/image/upload/v1692037802/WOMEN_rtn7a5.png" alt="Women" width="400">
</div>
</div>
</section>
<br>
<br>
<br>
<section class="kids-section" id="kids">
<div class="container2">
<hr>
<br>
<h2>
<div id="kidslogo">
<a><i class="fa-solid fa-child-reaching fa-bounce fa-2xl" style="color: #000000;"></i> <div class="jump">KIDS</div></a>
</div>
</h2>
<br>
<h4>
While shopping for yourself is fun there's something about buying bits for the small people in your
life, be it your own child, a niece or nephew, or godchild, that takes retail therapy to the next level.
We're pretty sure it's down to the miniature nature of these clothes - tiny booties, little playsuits
and micro dresses
- that have us adding to basket in such a hurry.So what are you waiting for? Addddddddd.
</h4>
<button class="primary-btn">Click here to check out our collection</button>
<div class="Kids-img">
<img src="https://res.cloudinary.com/dxps8tmka/image/upload/v1692037780/KIDS_xhu6q3.png" alt="Kids" width="400">
</div>
</div>
</section>
<br>
<br>
<br>
<section class="contact-section" id="contact">
<div class="container2">
<hr>
<br>
<h2>
<div id="contactlogo">
<a><i class="fa-solid fa-envelope fa-bounce fa-xl" style="color: #000000;"></i> <div class="jump">CONTACT US</div></a>
</div>
</h2>
<br>
<form action="Action.html" target="_blank" autocomplete="off">
<div class="container3">
<div class="inputBox">
<input type="text" required autocomplete="off">
<span>First Name</span>
</div>
<div class="inputBox">
<input type="text" required autocomplete="off">
<span>Last Name</span>
</div>
<div class="inputBox">
<input type="text" required autocomplete="off">
<span>Email</span>
</div>
<div class="inputBox Query">
<input type="text" required autocomplete="off" >
<span>Query</span>
</div>
</div>
<br><br><br>
<button type="text" class="submit">submit</button>
</div>
</form>
</div>
</section>
<br>
<br>
<br>
<footer>
<section class="footer">
<div class="center">Copyright 2023© Nawadeep Atreya</div>
</section>
</footer>
</body>
</html>