-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
302 lines (286 loc) · 11.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>onething design</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="onethingcss.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<header class="header">
<nav class="navbar navbar-expand-lg fixed-top py-3">
<div class="container-fluid p-lg-5">
<a href="#" class="textdecoration d-flex align-items-end">
<img class="img-fluid pb-lg-0 pb-md-0 pb-2" src="img/logo.svg"><span class="font-weight-bold orangetext mobilelogotext d-lg-none d-md-none">onething</span></a>
</div>
</nav>
</header>
<div class="container-fluid ">
<div class="row">
<div class="col-md-6">
<div class="desktoplogotext d-none d-lg-block d-md-block">
<span class="font-weight-bold orangetext ">onething</span>
</div>
<div class="row h-75 align-items-center justify-content-center">
<div class="col-md-8 mt-5 pt-5">
<div class="row">
<div class="col-12">
<p class="font-weight-bold mb-0 banner-heading">Designing for <br> Growth and <br> <span class="orangetext bottomborder-hr">Transformation</span></p>
<p class="banner-text my-5">
We are a digital product design studio focusing on performance driven UX.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 px-0">
<img src="img/onethingbanner.png" alt="onething" class="img-fluid" width="100%">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row justify-content-center bg-light">
<div class="col-md-11">
<div class="row">
<div class="col-md-6">
<div class="mt-5 pt-lg-5 pt-md-5">
<p class="below-banner-text mt-5">Founded in 2015</p>
<p class="below-banner-text">Rated among Top UX Studios in India in 2019</p>
<p class="below-banner-text">Delivered 100+ Projects; 5 Continents.</p>
<p class="below-banner-text">Designed for Startups, SMEs and Fortune 500 companies</p>
<p class="below-banner-text">Located in Gurugram & Bangalore.</p>
</div>
<div class="mt-5 pt-lg-5 pt-md-5 pb-4">
<p class="font-weight-bold mb-5 below-banner-heading"><span class="bottomborder-hr ">Rated 4.8 on Clutch </span>on Service & Quality</p>
<a href="https://clutch.co/profile/onethingdesign" class="font-weight-bold textdecoration text-dark ">https://clutch.co/profile/onethingdesign</a>
</div>
</div>
<div class="col-md-6">
<div class="row justify-content-center">
<div class="col-md-9 mt-5 ">
<div class="card border-0 rounded-0 my-5">
<div class="card-body text-center px-lg-5">
<div class="px-4 pt-4"><img src="img/clutch.png" alt="clutch" class="img-fluid" width="100%"></div>
<p class="font-weight-bold mb-4 mt-5 orangetext below-banner-heading-2">Clutch Top 2019 UX Agencies</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- section 3 -->
<div class="row justify-content-center bg-light">
<div class="col-md-11 mt-5">
<div class="row mt-5 ">
<div class="col-md-8">
<p class="font-weight-bold mb-5 section3-heading"><span class="bottomborder-hr ">Awards & Recognitions</span></p>
<p class="below-banner-text">
Our work touches millions of lives daily and has been recognised by the Industry. A
glimpse into our 2019 run.
</p>
</div>
</div>
<div class="row my-5 ">
<div class="col-md-3">
<div class="card border-0 rounded-0 my-lg-4 my-3">
<div class="card-body text-center px-lg-5">
<div class="px-4 pt-4"><img src="img/award1.png" alt="award1" class="img-fluid" width="100%"></div>
<p class="below-banner-text font-weight-bold mt-2">Winner</p>
<p class="orangetext award-text ">IBDA Best Design Project 2019</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card border-0 rounded-0 my-lg-4 my-3">
<div class="card-body text-center px-lg-5">
<div class="px-4 pt-4"><img src="img/award2.png" alt="award1" class="img-fluid" width="100%"></div>
<p class="below-banner-text font-weight-bold mt-2">Winner</p>
<p class="orangetext award-text ">IBDA Best Agency 2019</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card border-0 rounded-0 my-lg-4 my-3">
<div class="card-body text-center px-lg-5">
<div class="px-4 pt-4"><img src="img/recognition1.png" alt="award1" class="img-fluid" width="100%"></div>
<p class="below-banner-text font-weight-bold mt-2">Finalists</p>
<p class="orangetext award-text ">Nasscom Design Award 2019</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card border-0 rounded-0 my-lg-4 my-3">
<div class="card-body text-center px-lg-5">
<div class="px-4 pt-4"><img src="img/recognition2.png" alt="award1" class="img-fluid" width="100%"></div>
<p class="below-banner-text font-weight-bold mt-2">Finalists</p>
<p class="orangetext award-text ">Design X Awards 2019</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container mt-5 ">
<div class="row mt-5 ">
<div class="col-md-7">
<p class="font-weight-bold mb-4 mt-5 section3-heading">They came. They saw. <span class="bottomborder-hr ">They loved it.</span></p>
<p class="below-banner-text">It’s not just about the brands, it’s the ideas that excite us</p>
</div>
<div class="col-md-5 text-center mt-4">
<img src="img/section4.png" alt="section4" class="img-fluid" width="70%">
</div>
</div>
<div class="row mt-2">
<div class="col-md-4 my-3">
<div class="row">
<div class="col-6">
<img src="img/cocacola.png" alt="cocacola" class="img-fluid" >
</div>
<div class="col-6">
<img src="img/airtel.png" alt="airtel" class="img-fluid" >
</div>
</div>
</div>
<div class="col-md-4 my-3">
<div class="row">
<div class="col-6">
<img src="img/pvr.png" alt="pvr" class="img-fluid" >
</div>
<div class="col-6">
<img src="img/RBLbank.png" alt="RBLbank" class="img-fluid" >
</div>
</div>
</div>
<div class="col-md-4 my-3">
<div class="row">
<div class="col-6">
<img src="img/tata.png" alt="tata" class="img-fluid" >
</div>
<div class="col-6">
<img src="img/hero.png" alt="hero" class="img-fluid" >
</div>
</div>
</div>
</div>
<div class="row mt-lg-5">
<div class="col-md-4 my-3">
<div class="row">
<div class="col-6">
<img src="img/videonetics.png" alt="videonetics" class="img-fluid" >
</div>
<div class="col-6">
<img src="img/comviva.png" alt="comviva" class="img-fluid" >
</div>
</div>
</div>
<div class="col-md-4 my-3">
<div class="row">
<div class="col-6">
<img src="img/pokerbaazr.png" alt="pokerbaazr" class="img-fluid" >
</div>
<div class="col-6">
<img src="img/swiggy.png" alt="swiggy" class="img-fluid" >
</div>
</div>
</div>
<div class="col-md-4 my-3">
<div class="row">
<div class="col-6">
<img src="img/ventures.png" alt="ventures" class="img-fluid" >
</div>
<div class="col-6">
<img src="img/revolt.png" alt="revolt" class="img-fluid" >
</div>
</div>
</div>
</div>
<div class="row justify-content-center ">
<div class="col-md-6 text-center pt-5">
<p class="font-weight-bold my-4 section3-heading">Assignment for <span class="bottomborder-hr ">Front-end developers</span></p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12 text-center">
<img src="img/assignment-image.png" alt="assignment-image" class="img-fluid" width="85%">
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-11 pt-lg-5">
<div class="row justify-content-center mt-5">
<div class="col-md-11 mt-5">
<div class="row mt-5">
<div class="col-md-12 ">
<p class="font-weight-bold mb-5 section3-heading"><span class="bottomborder-hr ">Expectations</span></p>
<p class="below-banner-text">We have provided you a Figma link of the design. You are supposed <span class="text-nowrap">to - </span></p>
<p class="below-banner-text">- Create a “pixel perfect” responsive HTML using bootstrap grid.</p>
<p class="below-banner-text">- Use SCSS/LESS preprocessors.</p>
<p class="below-banner-text">- You can choose to use Vanilla Javascript or jQuery for any interaction, if required.</p>
<p class="below-banner-text">- The final output has to be as close to the design as possible.</p>
<p class="below-banner-text">- Do not assume any margin, padding, color or font-sizes.</p>
</div>
</div>
<div class="row mt-5">
<div class="col-md-12 mt-5">
<p class="below-banner-text mt-5">Please write to [email protected] in case you need any clarification.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1 orangebg">
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row justify-content-center">
<div class="col-md-10 pt-5">
<div class="row mt-5">
<div class="col-md-12 mt-5">
<p class="font-weight-bold my-5 section3-heading"><span class="bottomborder-hr ">Link to the design file</span></p>
<div class="mt-5 pt-4">
<i class="fa fa-link fa-2x orangetext mr-4" aria-hidden="true"></i><a href="" class="text-dark textdecoration font-weight-bold below-banner-text">http://bit.ly/Onething-FE</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 pt-5 px-0">
<img src="img/design-image.png" alt="design-image" class="img-fluid mt-5 shadow-lg" width="100%">
</div>
</div>
<div class="row orangebg footer">
<div class="col-md-12">
<div class="row justify-content-center">
<div class="col-md-11">
<div class="row mt-5">
<div class="col-md-12">
<img class="img-fluid pb-lg-0 pb-md-0 pb-2 text-white" src="img/logo.svg"><span class="font-weight-bold text-white footer-logo">onething</span>
</div>
</div>
</div>
</div>
<div class="row justify-content-center h-75 align-items-center">
<div class="col-md-7 text-center">
<p class="below-banner-text footer-line-text">We are here.<br> Just say hi anytime you need any more information</p>
<p class="text-white footer-text font-weight-bold"> [email protected]</p>
</div>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>