-
Notifications
You must be signed in to change notification settings - Fork 0
/
rentTheRunway.html
325 lines (270 loc) · 13.2 KB
/
rentTheRunway.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
<!DOCTYPE HTML>
<html>
<head>
<title>Front End</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></script>
<meta name='description' content='GETTING DRESSED WILL NEVER BE THE SAME,TRY OUT SUBSCRIPTION STARTING AT RS. 2500.' />
<meta name="keywords" content="clothing,rental,casual,party,fashion,woman">
<link rel="stylesheet" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/skel/3.0.1/skel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Modern+Antiqua" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript"></script>
</head>
<body>
<!-- Header -->
<header id="header">
<div class="inner">
<a href="index.html" class="logo"> <img src="">LOGO</a>
<nav id="nav">
<a href="index.html">Home</a>
<a href="#one">How it works</a>
<a href="#two">FAQs</a>
<a href="#Contact">Contact us</a>
</nav>
</div>
</header>
<a href="#menu" class="navPanelToggle"><span class="fa fa-bars"></span></a>
<!-- Banner -->
<section id="banner">
<div class="inner">
<div class="row">
<div class="col-lg-6">
<div class="borderbox alpha60">
<h1>Buy Less, Wear More<br /> </h1>
<h2>"I have <s>nothing</s> everything to wear"</h2>
<ul class="actions">
<li><a href="#" class="button alt">Get Started</a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- One -->
<section id="one" class="onlyOne">
<div class="inner">
<header>
<h2 id="heading" class="pullBottom">How it works</h2>
<!-- <span class="underline"></span> -->
</header>
<div class="row">
<div class="col-md-4">
<h2>STEP 1</h2>
<p>Tell us about your preferences and style, what makes you look unique.</p>
<span class="fa fa-phone"></span>
</div>
<div class="col-md-4">
<h2>STEP 2</h2>
<p>No surprises here.<br> We will customize your bag according to your preferences.
</p>
<span class="fa fa-envelope"></span>
</div>
<div class="col-md-4">
<h2>STEP 3</h2>
<p>Exchange your old bag with a new one every week.</p>
<span class="fa fa-bars"></span>
</div>
</div>
</div>
</section>
<section id="five">
<div class="container text-center">
<article class="col-xs-12 col-lg-12 col-md-12">
<div class="content">
<h3>No more laundry hassle</h3>
<ul class="actions">
<li><a href="#" class="button alt">Get Started</a></li>
</ul>
</div>
</article>
</div>
</section><br><br>
<!-- Two -->
<div class="Faqs">
<h2 class="text-center pullBottom1">Frequently Asked Questions</h2>
<span class="underline"></span>
</div>
<section id="two">
<div class="container">
<div id="a1">
<button class="acco" style="color: black;">What's going to be in my bag?<i class="fa fa-plus"></i></button>
<div class="panel">
<p>Pick the plan that fits you best. Whether you want just clothes or clothes and accessories.</p>
</div>
</div>
<div id="a2">
<button class="acco">How is my bag styled?<i class="fa fa-plus"></i></button>
<div class="panel">
<p>Based on your individual style we'll show you items we think you'll love. But you get the final say - swap or add items with Tote Swap before your tote ships.</p>
</div>
</div>
<div id="a3">
<button class="acco">How do you know what clothes I want?<i class="fa fa-plus"></i></button>
<div class="panel">
<p>In order to get to know you best, we ask you your style preferences. Like any great relationship we'll get even better with time. Add items to your Closet and we'll learn more about you and what you love.</p>
</div>
</div>
<div id="a4">
<button class="acco">How long can I keep my items for?<i class="fa fa-plus"></i></button>
<div class="panel">
<p>It's totally up to you! You can wear it as many times as you'd like and then send it back when you're ready for a refresh. The best part? We don't limit you, get as many totes per month as you want for one flat price.</p>
</div>
</div>
<div id="a5">
<button class="acco">Can I buy something from my bag?<i class="fa fa-plus"></i></button>
<div class="panel">
<p>Of course - just hold onto your item, send the rest back. We'll automatically charge the low Le Tote Member price to your card on file.</p>
</div>
</div>
<div id="a6">
<button class="acco">What is your cancellation policy?<i class="fa fa-plus"></i></button>
<div class="panel">
<p>Cancel anytime - no strings attached.</p>
</div>
</div>
</div>
</section>
<div class="container-fluid">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 project wow animated animated4 fadeInLeft">
<div class="project-hover">
<h2>TITLE</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ex pulvinar est laoreet ullamcorper.</p>
<a href="#">See Project</a>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 project project-2 wow animated animated3 fadeInLeft">
<div class="project-hover">
<h2>TITLE</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ex pulvinar est laoreet ullamcorper.</p>
<a href="#">See Project</a>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 project project-3 wow animated animated2 fadeInLeft">
<div class="project-hover">
<h2>TITLE</h2>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar ex pulvinar est laoreet ullamcorper.</p>
<a href="#">See Project</a>
</div>
</div>
<div class="clearfix"></div>
</div>
<!-- Three -->
<section id="three">
<div class="container text-center">
<article class="col-xs-12 col-lg-12 col-md-12">
<div class="content">
<span class="icon fa-diamond"></span>
<h3>Getting dressed will never be the same</h3>
<h5>Try out subscription starting at Rs. 2500</h5>
<ul class="actions">
<li><a href="#" class="button alt">Get Started</a></li>
</ul>
</div>
</article>
</div>
</section>
<!-- Footer -->
<div id="Contact">
<div class="footer">
<div class="search-text">
<div class="container">
<div class="text-center">
<div class="form">
<h4 class="pullBottom2">SIGN UP TO OUR NEWSLETTER</h4>
<span class="underline"></span>
<form id="search-form" class="form-search form-horizontal">
<input type="text" class="input-search input-height" placeholder="Name">
<input type="email" class="input-search input-height" placeholder="Email Address">
<textarea name="message" placeholder="Message" class="input-search " cols="10" rows="8"></textarea>
<button type="submit" class="btn-search">SUBMIT</button>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<span class="logo">LOGO</span>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<ul class="menu">
<span>Menu</span>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">How it works</a>
</li>
<li>
<a href="#">FAQs</a>
</li>
<li>
<a href="#">Contact us</a>
</li>
</ul>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<ul class="address">
<span>Contact</span>
<li>
<i class="fa fa-phone" aria-hidden="true"></i> <a href="#">9999999</a>
</li>
<li>
<i class="fa fa-envelope" aria-hidden="true"></i> <a href="#">contact@dailynewdress.com</a>
</li>
<li>
<i class="fa fa-map-marker" aria-hidden="true"></i> <a href="#">Location</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</div>
<div class="plus-button"></div>
<div class="social-button twitter-button"></div>
<div class="social-button facebook-button"></div>
<div class="social-button pinterest-button"></div>
<div class="social-button insta-button"></div>
<!-- <script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script> -->
<!--libraries added-->
<script>
var acc = document.getElementsByClassName("acco");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.height == 90 + 'px') {
panel.style.height = 0;
} else {
panel.style.height = 90 + 'px';
}
});
}
</script>
</body>
</html>