-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathoneplus8.html
359 lines (337 loc) · 33.5 KB
/
oneplus8.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Products</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="shortcut icon" type="image/ico" href="icons/Techlipse0.svg">
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>
<body>
<!-- header start -->
<header>
<nav>
<svg class="techlipse" width="94.611mm" height="16.828mm" version="1.1" viewBox="0 0 94.611 16.828" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<flowRoot transform="matrix(.26458 0 0 .26458 -10.319 -270.89)" fill="#000000" font-family="sans-serif" font-size="40px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><flowRegion><rect x="-420.47" y="427.04" width="322.82" height="278.69"/></flowRegion><flowPara/></flowRoot>
<flowRoot transform="matrix(.26458 0 0 .26458 -10.319 -270.89)" fill="#000000" font-family="sans-serif" font-size="40px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><flowRegion><rect x="152.88" y="717.81" width="116.75" height="97.383"/></flowRegion><flowPara/></flowRoot>
<flowRoot transform="matrix(.26458 0 0 .26458 -6.6412 -4.9281)" fill="#000000" font-family="sans-serif" font-size="40px" letter-spacing="0px" stroke-width=".26458" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><flowRegion><rect x="79.021" y="112.06" width="110.2" height="43.542"/></flowRegion><flowPara>LlllL</flowPara></flowRoot>
<g transform="translate(-6.7835 -3.6291)">
<g fill="#fbf9fb">
<path d="m15.138 3.7488a8.3543 8.3543 0 0 0-4.6872 1.4484h9.387a8.3543 8.3543 0 0 0-4.6997-1.4484zm-4.9142 2.8243c-0.34107 0-0.61567 0.26627-0.61567 0.59701v9.8658c0 0.33074 0.2746 0.59701 0.61567 0.59701h9.8285c0.34108 0 0.61568-0.26627 0.61568-0.59701v-9.8658c0-0.33074-0.2746-0.59701-0.61568-0.59701zm-1.9916 0.8303a8.3543 8.3543 0 0 0-1.4484 4.6996 8.3543 8.3543 0 0 0 1.4484 4.6874zm13.812 0.012449v9.3869a8.3543 8.3543 0 0 0 1.4485-4.6996 8.3543 8.3543 0 0 0-1.4485-4.6872zm-6.9058 7.2059a1.0009 1.0008 0 0 1 1.0008 1.0009 1.0009 1.0008 0 0 1-1.0008 1.0009 1.0009 1.0008 0 0 1-1.0009-1.0009 1.0009 1.0008 0 0 1 1.0009-1.0009zm-4.6997 4.3872a8.3543 8.3543 0 0 0 4.6996 1.4485 8.3543 8.3543 0 0 0 4.6873-1.4485z" fill-opacity=".98492" fill-rule="evenodd" stroke-width=".26458"/>
<g transform="translate(1.2005 -1.2991)" fill-opacity=".98824" stroke-width=".018522" aria-label="TECHLIPSE">
<path d="m34.32 9.798h-3.0353v9.3097h-1.3649v-9.3097h-3.0217v-1.2087h7.422z"/>
<path d="m41.99 19.108h-5.6564v-10.518h5.4188v1.2087h-4.0607v3.3681h3.7619v1.2019h-3.7619v3.5378h4.2983z"/>
<path d="m51.575 18.673q-1.1612 0.61114-2.9131 0.61114-2.2612 0-3.6125-1.4328-1.3513-1.4396-1.3513-3.8026 0-2.5396 1.5211-4.0878 1.5211-1.5482 3.8638-1.5482 1.5075 0 2.4921 0.4278v1.4192q-1.1272-0.62472-2.4785-0.62472-1.7587 0-2.8656 1.1747-1.1068 1.168-1.1068 3.1576 0 1.8877 1.0321 3.0014 1.0321 1.1068 2.7026 1.1068 1.5618 0 2.7162-0.70621z"/>
<path d="m62.117 19.108h-1.3581v-4.7397h-5.3237v4.7397h-1.3581v-10.518h1.3581v4.57h5.3237v-4.57h1.3581z"/>
<path d="m70.765 19.108h-5.5478v-10.518h1.3581v9.3165h4.1897z"/>
<path d="m74.102 11.425v7.6829h-1.3581l-0.01778-7.6829z"/>
<path d="m78.587 15.176v3.9317h-1.3581v-10.518h2.9878q1.7044 0 2.6415 0.82164 0.94387 0.82164 0.94387 2.3495 0 1.5482-1.1001 2.5125-1.1001 0.95745-2.7501 0.90313zm0-5.3916v4.1965h1.2562q1.2426 0 1.8877-0.55682 0.64509-0.56361 0.64509-1.6093 0-2.0303-2.4038-2.0303z"/>
<path d="m85.625 17.132q0.48212 0.42101 1.2902 0.69262 0.80806 0.27162 1.5346 0.27162 2.2137 0 2.2137-1.5754 0-0.44138-0.23767-0.79448-0.23766-0.3531-0.65188-0.62472-0.41422-0.27162-1.555-0.83522-1.5822-0.78769-2.0847-1.4599-0.50249-0.67904-0.50249-1.5482 0-1.3106 1.0525-2.0779 1.0525-0.76732 2.6551-0.76732 1.5686 0 2.302 0.38026v1.4803q-0.95066-0.65867-2.4038-0.65867-0.96424 0-1.5754 0.40743-0.60435 0.40064-0.60435 1.1204 0 0.6383 0.42101 1.0389t1.8266 1.0933q1.5482 0.74016 2.1662 1.4803 0.61793 0.74016 0.61793 1.6637 0 1.3852-1.005 2.1254t-2.7909 0.74016q-0.62472 0-1.4599-0.17655-0.82843-0.16976-1.2087-0.4278z"/>
<path d="m100.19 19.108h-5.6564v-10.518h5.4188v1.2087h-4.0607v3.3681h3.7619v1.2019h-3.7619v3.5378h4.2983z"/>
</g>
<path d="m76.735 5.7489a2.1198 2.1198 0 0 1-2.1198 2.1198 2.1198 2.1198 0 0 1-2.1198-2.1198 2.1198 2.1198 0 0 1 2.1198-2.1198 2.1198 2.1198 0 0 1 2.1198 2.1198z" fill-opacity=".98824" fill-rule="evenodd" stroke-width=".26458"/>
</g>
</g>
</svg>
<ul class="navlinks">
<li>
<a class="dropdown_trigger" href="#">Store</a>
<div class="dropdown_content">
<div class="dropdown_box">
<div class="img_holder">
<svg id="smartphones" class="dropdown_svg" width="122" height="106" version="1.1" viewBox="0 0 32.279 28.046" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(-4.5709 -262.67)">
<g transform="matrix(.30293 0 0 .30293 4.05 202.04)" stroke-width="3.3011">
<g transform="matrix(.58775 0 0 .55789 1.7451 128.88)" stroke-width="5.7649">
<g transform="matrix(-.90037 0 0 .78015 210.78 44.365)" stroke-width="6.8785">
<g transform="translate(267.99 8.653)" stroke-width="6.8785">
<path d="m-55.004 123.82c11.727 0 21.168 12.541 21.168 28.118v109.72c0 15.577-9.4409 28.118-21.168 28.118h-32.433v-7.2078h30.547c9.0208 0 16.283-8.9605 16.283-20.091v-111.36c0-11.13-7.2623-20.091-16.283-20.091h-30.547v-7.2078z" fill="#ddd" style="paint-order:fill markers stroke"/>
</g>
</g>
<path d="m132.99 148.15v5.6232h27.503c8.122 0 14.661 6.9906 14.661 15.674v86.874c0 8.6835-6.5387 15.674-14.661 15.674h-27.503v5.6232h29.201c10.559-1e-5 19.059-9.7836 19.059-21.936v-85.596c0-12.153-8.5003-21.936-19.059-21.936z" fill="#ddd" style="paint-order:fill markers stroke"/>
<rect class="blue" transform="scale(-1,1)" x="-51.6" y="261.92" width="19.371" height="5.4419" rx="3.2616" ry="9.9633" fill="#1c25ff" style="paint-order:fill markers stroke"/>
<rect class="blue" transform="scale(-1,1)" x="-151.76" y="261.92" width="19.371" height="5.4419" rx="3.2616" ry="9.9633" fill="#1c25ff" style="paint-order:fill markers stroke"/>
<rect class="blue" transform="scale(-1,1)" x="-105.55" y="276.94" width="27.1" height="6.2956" rx="4.1432" ry="9.9633" fill="#1c25ff" style="paint-order:fill markers stroke"/>
<path d="m57.251 147.11c-0.3589-0.023-0.72051-0.0281-1.0846-0.0281h-7.1672" fill="#008000" style="paint-order:fill markers stroke"/>
<path d="m49.254 276.54h6.9123c0.50139 0 0.99814-0.0222 1.4896-0.0561" fill="#008000" style="paint-order:fill markers stroke"/>
<path d="m66.2 127.74c-10.559 0-19.059 9.7835-19.059 21.936v122.08c0 12.153 8.5003 21.937 19.059 21.937h51.593c10.559 0 19.059-9.7838 19.059-21.937v-122.08c0-12.153-8.5003-21.936-19.059-21.936zm3.4132 7.2072h44.767c8.122 0 14.661 6.9904 14.661 15.674v120.19c0 8.6836-6.5387 15.674-14.661 15.674h-44.767c-8.122 0-14.661-6.9907-14.661-15.674v-120.19c0-8.6836 6.5387-15.674 14.661-15.674z" fill="#ddd" style="paint-order:fill markers stroke"/>
<ellipse class="blue" cx="18.275" cy="164.98" rx="4.2884" ry="4.5794" fill="#1c25ff" fill-rule="evenodd" stroke-width="8.7932"/>
<ellipse class="blue" cx="67.661" cy="147.43" rx="5.8539" ry="6.2512" fill="#1c25ff" fill-rule="evenodd" stroke-width="8.7932"/>
<ellipse class="blue" cx="163.74" cy="164.98" rx="4.2884" ry="4.5794" fill="#1c25ff" fill-rule="evenodd" stroke-width="8.7932"/>
</g>
</g>
</g>
</svg>
</div>
<a href="#">Smartphones</a>
</div>
<div class="dropdown_box">
<div class="img_holder">
<svg id="tablets" class="dropdown_svg" width="122" height="106" version="1.1" viewBox="0 0 32.279 28.046" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="m22.319 2.7168v1.3135h6.2828c0.84102 0 1.5179 0.82362 1.5179 1.8466v16.392c0 1.023-0.67689 1.8466-1.5179 1.8466h-6.2828v1.314h8.4421c0.84102 0 1.5179-0.82362 1.5179-1.8466v-19.02c0-1.023-0.67688-1.8461-1.5179-1.8461z" fill="#ddd" style="paint-order:fill markers stroke"/>
<ellipse class="blue" cx="31.248" cy="14.073" rx=".80977" ry=".80732" fill="#1c25ff" fill-rule="evenodd" stroke-width="1.5253"/>
<path d="m1.7492 0c-0.96917 0-1.7492 0.77864-1.7492 1.7461v24.554c0 0.96743 0.78004 1.7461 1.7492 1.7461h18.819c0.96917 0 1.7492-0.77864 1.7492-1.7461v-24.554c0-0.96743-0.78004-1.7461-1.7492-1.7461zm1.0539 0.92451h16.711c0.96917 0 1.7492 0.77864 1.7492 1.7461v21.248c0 0.96743-0.78004 1.7466-1.7492 1.7466h-16.711c-0.96917 0-1.7492-0.77916-1.7492-1.7466v-21.248c0-0.96743 0.78004-1.7461 1.7492-1.7461z" fill="#ddd" style="paint-order:fill markers stroke"/>
<ellipse class="blue" cx="11.159" cy="26.826" rx=".80977" ry=".80732" fill="#1c25ff" fill-rule="evenodd" stroke-width="1.5253"/>
</svg>
</div>
<a href="#">Tablets</a>
</div>
<div class="dropdown_box">
<div class="img_holder">
<svg id="laptops" class="dropdown_svg" width="122" height="106" version="1.1" viewBox="0 0 32.279 28.046" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(-5.4274 -262.03)">
<g transform="matrix(.30293 0 0 .30293 4.05 202.04)" stroke-width="3.3011">
<g transform="matrix(.58775 0 0 .55789 1.7451 128.88)" stroke-width="5.7649">
<g transform="matrix(1.0097 0 0 1.0385 -.0463 -11.175)" stroke-width="5.6296">
<path d="m77.544 186.62 1e-6 -10.424" fill="#d40000" style="paint-order:fill markers stroke"/>
<path d="m70.952 176.2v10.425" fill="#d40000" style="paint-order:fill markers stroke"/>
<path d="m119.99 226.65h-6.592" fill="#500" style="paint-order:fill markers stroke"/>
<path d="m113.4 239.35h6.592" fill="#500" style="paint-order:fill markers stroke"/>
<path d="m120.66 237.22h57.014l6.6432-7.3197c-0.15937-1.918-1.7579-3.4216-3.7434-3.4216h-59.914" fill="#ddd" style="paint-order:fill markers stroke"/>
<path d="m8.5106 279.19c-1.9854 0-3.584 1.5034-3.7434 3.4211l6.6432 7.3185h114.2l6.6432-7.3185c-0.15938-1.9177-1.7579-3.4211-3.7434-3.4211h-59.998z" fill="#ddd" style="paint-order:fill markers stroke"/>
<g transform="matrix(.76678 0 0 1.0253 32.447 -8.8742)" stroke-width="6.3491">
<path d="m-10.083 187.07c-4.3072 0-7.7736 3.324-7.7736 7.4519v82.021h8.5965v-74.507c0-2.6593 1.7851-4.799 4.0012-4.799h102.3c2.2161 0 4.0012 2.1397 4.0012 4.799v74.507h8.5965v-82.021c0-4.128-3.4665-7.4519-7.7736-7.4519z" fill="#ddd" style="paint-order:fill markers stroke"/>
</g>
<g transform="translate(0 2.3484)" stroke-width="5.6296">
<path d="m77.616 176.2-1e-6 -32.336c0-2.7267 1.3688-4.9206 3.068-4.9206h78.44c1.6992 0 3.068 2.1939 3.068 4.9206v76.394h6.5916v-84.099c0-4.2325-2.658-7.6407-5.9607-7.6407h-85.838c-3.3026 0-5.9607 3.4082-5.9607 7.6407v40.04" fill="#ddd" style="paint-order:fill markers stroke"/>
</g>
<ellipse class="blue" cx="67.635" cy="188.16" rx="3.5294" ry="3.7182" fill="#1c25ff" fill-rule="evenodd" stroke-width="8.5869"/>
<ellipse class="blue" cx="119.9" cy="133.85" rx="3.5294" ry="3.7182" fill="#1c25ff" fill-rule="evenodd" stroke-width="8.5869"/>
</g>
</g>
</g>
</g>
</svg>
</div>
<a href="#">Laptops</a>
</div>
<div class="dropdown_box">
<div class="img_holder">
<svg id="accessories" class="dropdown_svg" width="121.43" height="106" version="1.1" viewBox="0 0 32.129 28.046" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="matrix(1 0 0 1.0094 .00089674 -.52985)" fill="#ddd" stroke-width=".99533">
<rect x="22.121" y=".52491" width="1.5813" height="27.785" style="paint-order:fill markers stroke"/>
<rect x="25.142" y=".52491" width="1.5813" height="27.785" style="paint-order:fill markers stroke"/>
</g>
<g transform="matrix(1 0 0 1.0094 .00089674 -.26616)" stroke-width=".99533">
<g transform="matrix(.77549 0 0 .26833 3.095 8.1899)" fill="#ddd" stroke-width="2.182">
<rect x="8.5208" y="-29.539" width="2.0391" height="34.587" style="paint-order:fill markers stroke"/>
<rect x="12.416" y="-29.539" width="2.0391" height="34.587" style="paint-order:fill markers stroke"/>
</g>
<path d="m6.788 19.289v8.7598h10.431v-8.7598h-1.4347v7.5694h-7.562v-7.5694z" fill="#ddd" style="paint-order:fill markers stroke"/>
<path d="m6.8964 8.6618c-0.82656 0-1.4919 0.73226-1.4919 1.6418v10.229h13.198v-10.229c0-0.90956-0.66534-1.6418-1.4919-1.6418zm1.0707 1.244h8.0729c0.65327 0 1.1793 0.57893 1.1793 1.2978v8.0847h-10.431v-8.0847c0-0.71887 0.52598-1.2978 1.1793-1.2978z" fill="#ddd" style="paint-order:fill markers stroke"/>
<g class="blue" transform="matrix(.77549 0 0 .73592 2.7522 5.8292)" fill="#1c25ff" stroke-width="1.3175">
<rect x="8.0579" y="24.331" width="3.1395" height="3.1395" style="paint-order:fill markers stroke"/>
<rect x="12.662" y="24.331" width="3.1395" height="3.1395" style="paint-order:fill markers stroke"/>
</g>
</g>
</svg>
</div>
<a href="#">Accessories</a>
</div>
<div class="dropdown_box">
<div class="img_holder">
<svg id="findastore" class="dropdown_svg" width="122" height="106" version="1.1" viewBox="0 0 32.279 28.046" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="matrix(.83373 0 0 .99548 2.7939 0)" fill="#e6e6e6" stroke-width="1.0977">
<path transform="matrix(.31735 0 0 .26579 -3.3511 0)" d="m28.26 42c-14.616 1.6241-22.982 15.604-14.916 30.238 11.626 21.093 14.327 30.414 14.916 33.762 0.58878-3.3476 3.2884-12.669 14.914-33.762 8.0656-14.634-0.29843-28.614-14.914-30.238zm0 3.5371c11.206 1.2452 17.619 11.964 11.436 23.184-8.9135 16.172-10.984 23.32-11.436 25.887-0.45142-2.5666-2.524-9.7144-11.438-25.887-6.1839-11.22 0.23155-21.938 11.438-23.184z" fill-rule="evenodd" stroke-width="1"/>
<path transform="matrix(.31735 0 0 .26579 -3.3511 0)" d="m49.152 65.621v39.869h2.498v-31.424h21.566v31.424h38.441v-39.869h-0.0527a7.7814 6.095 0 0 1-7.6035 5.4336 7.7814 6.095 0 0 1-7.8574-5.4336h-0.10156a7.7814 6.095 0 0 1-7.6035 5.4336 7.7814 6.095 0 0 1-7.8574-5.4336h-0.16602a7.7814 6.095 0 0 1-7.6055 5.4336 7.7814 6.095 0 0 1-7.8574-5.4336h-0.16406a7.7814 6.095 0 0 1-7.6035 5.4336 7.7814 6.095 0 0 1-7.8594-5.4336zm26.986 8.3418h33.223v27.191h-33.223z" style="paint-order:fill markers stroke"/>
<path d="m12.203 11.298v4.508h0.01178a2.5575 2.3548 0 0 0-0.0043 0.11369 2.5575 2.3548 0 0 0 2.5574 2.3547 2.5575 2.3548 0 0 0 2.465-1.7354 2.5575 2.3548 0 0 0 2.4669 1.7354 2.5575 2.3548 0 0 0 2.4644-1.7354 2.5575 2.3548 0 0 0 2.4669 1.7354 2.5575 2.3548 0 0 0 2.4644-1.7354 2.5575 2.3548 0 0 0 2.4669 1.7354 2.5575 2.3548 0 0 0 2.5574-2.3547 2.5575 2.3548 0 0 0-0.0062-0.11369h0.01365v-4.508zm0.83676 0.80462h18.313l0.01736 3.7034c-0.55342 2.9698-3.7284 1.1573-4.2743 0.03219-1.3599 1.6555-2.8359 2.6304-4.9313-0.02596-1.8255 2.1841-3.1519 2.2619-4.9313 0.02596-1.922 2.4105-3.61 1.9755-4.1931-0.03219z" fill-rule="evenodd" stroke-width=".29042"/>
</g>
<path transform="scale(.26458)" d="m61 0-61 37.09h9.957l51.043-31.035 51.043 31.035h9.957l-61-37.09z" fill="#e6e6e6" style="paint-order:fill markers stroke"/>
<path class="blue" d="m9.7989 15.957a2.322 2.322 0 0 1-2.322 2.322 2.322 2.322 0 0 1-2.322-2.322 2.322 2.322 0 0 1 2.322-2.322 2.322 2.322 0 0 1 2.322 2.322z" fill="#1c25ff" fill-rule="evenodd" stroke-width=".26458"/>
</svg>
</div>
<a href="#">Find a Store</a>
</div>
</div>
</li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
<div class="nav_button_set">
<div class="button_container special hide">
<button id="search_button_d" class="nav_button">
<svg id="search3" class="buttonset_svg" version="1.1" viewBox="0 0 17.136 17.166" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<path class="blue" d="m7.3867 5.0585e-7a7.3864 7.3864 0 0 0-7.3867 7.3867 7.3864 7.3864 0 0 0 7.3867 7.3867 7.3864 7.3864 0 0 0 4.1738-1.291l3.3652 3.3652c0.46363 0.46364 1.2591 0.41473 1.7832-0.10938s0.57301-1.3196 0.10938-1.7832l-3.3672-3.3672a7.3864 7.3864 0 0 0 1.3223-4.2012 7.3864 7.3864 0 0 0-7.3867-7.3867zm0 2.3652a5.2856 5.0213 0 0 1 5.2852 5.0215 5.2856 5.0213 0 0 1-0.79102 2.6309 5.2856 5.0213 0 0 1-0.28906 0.40234 5.2856 5.0213 0 0 1-0.0098 0.01172 5.2856 5.0213 0 0 1-0.0098 0.0098 5.2856 5.0213 0 0 1-0.32422 0.36328 5.2856 5.0213 0 0 1-0.0078 0.0098 5.2856 5.0213 0 0 1-0.0098 0.0078 5.2856 5.0213 0 0 1-0.3418 0.31641 5.2856 5.0213 0 0 1-0.05469 0.04687 5.2856 5.0213 0 0 1-0.35742 0.26758 5.2856 5.0213 0 0 1-0.06055 0.04102 5.2856 5.0213 0 0 1-0.35352 0.21484 5.2856 5.0213 0 0 1-0.17773 0.09766 5.2856 5.0213 0 0 1-2.4979 0.6015 5.2856 5.0213 0 0 1-5.2852-5.0215 5.2856 5.0213 0 0 1 5.2852-5.0215z" fill="#f8f6f8" stroke-width="0" style="paint-order:fill markers stroke"/>
</svg>
</button>
<div class="dropleft_content">
<input class="searchinput" type="text" placeholder="I am looking for...">
</div>
</div>
<div class="button_container hide">
<button class="nav_button">
<svg id="user" class="buttonset_svg" version="1.1" viewBox="0 0 18.955 19.4" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<g transform="translate(-.8286 -.77491)">
<g fill="#f8f6f8" fill-rule="evenodd" stroke-width="0">
<path class="blue" d="m10.303 12.264a15.474 10.799 0 0 0-9.4747 2.2677 10.797 10.799 0 0 0 9.4747 5.643 10.797 10.799 0 0 0 9.4807-5.6311 15.474 10.799 0 0 0-9.4807-2.2796z"/>
<path class="blue" transform="translate(.8286 .77491)" d="m9.4785 0a4.7396 4.7401 0 0 0-4.7402 4.7402 4.7396 4.7401 0 0 0 4.7402 4.7402 4.7396 4.7401 0 0 0 4.7383-4.7402 4.7396 4.7401 0 0 0-4.7383-4.7402zm0 1.5176a3.222 3.2224 0 0 1 3.2207 3.2227 3.222 3.2224 0 0 1-3.2207 3.2227 3.222 3.2224 0 0 1-3.2227-3.2227 3.222 3.2224 0 0 1 3.2227-3.2227z"/>
</g>
</g>
</svg>
</button>
</div>
<div class="button_container">
<button class="nav_button">
<svg id="shop2" class="buttonset_svg" version="1.1" viewBox="0 0 17.703 16.517" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<path class="bluestroke" d="m0.7605 0.75205 2.6105 0.49426 1.6469 10.956h10.92" fill="none" stroke="#f8f6f8" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".98431" stroke-width="1.5"/>
<path class="bluestroke" d="m4.5463 9.1791h11.642l0.81495-4.5435h-12.981" fill="none" stroke="#f8f6f8" stroke-linejoin="round" stroke-opacity=".98431" stroke-width="1.4"/>
<path class="bluestroke" d="m16.538 6.7908h-12.341" fill="none" stroke="#f8f6f8" stroke-opacity=".98431" stroke-width=".5"/>
<path class="bluestroke" d="m13.86 4.8686v4.2522" fill="none" stroke="#f8f6f8" stroke-opacity=".98431" stroke-width=".4"/>
<path class="bluestroke" d="m7.0493 4.7521v4.2522" fill="none" stroke="#f8f6f8" stroke-opacity=".98431" stroke-width=".4"/>
<path class="bluestroke" d="m10.455 4.7521v4.2522" fill="none" stroke="#f8f6f8" stroke-opacity=".98431" stroke-width=".4"/>
<path class="blue" d="m12.446 15.065a1.4039 1.4525 0 0 0 1.4039 1.4525 1.4039 1.4525 0 0 0 1.4039-1.4525 1.4039 1.4525 0 0 0-1.4039-1.4525 1.4039 1.4525 0 0 0-1.4039 1.4525z" fill="#f8f6f8" fill-opacity=".98431" fill-rule="evenodd"/>
<path class="blue" d="m5.3514 15.065a1.4039 1.4525 0 0 0 1.4039 1.4525 1.4039 1.4525 0 0 0 1.4039-1.4525 1.4039 1.4525 0 0 0-1.4039-1.4525 1.4039 1.4525 0 0 0-1.4039 1.4525z" fill="#f8f6f8" fill-opacity=".98431" fill-rule="evenodd"/>
</svg>
</button>
</div>
<div id="burger" class="button_container hamburger">
<div id="line1" class="line line1"></div>
<div id="line2" class="line line2"></div>
<div id="line3" class="line line3"></div>
</div>
</div>
<div class="menu_m">
<div class="search_m">
<input type="text" placeholder="I am looking for...">
</div>
<ul class="links_m">
<li>
<a class="links_a1" href="#">Store</a>
<ul class="inner_links">
<li class="inner_list"><a class="links_a2" href="#">Smartphones</a></li>
<li class="inner_list"><a class="links_a2" href="#">Tablets</a></li>
<li class="inner_list"><a class="links_a2" href="#">Laptops</a></li>
<li class="inner_list"><a class="links_a2" href="#">Accessories</a></li>
<li class="inner_list"><a class="links_a2" href="#">Find a Store</a></li>
</ul>
</li>
<li><a class="links_a1" href="signin.html">Account</a></li>
<li><a class="links_a1" href="aboutus.html">About Us</a></li>
</ul>
</div>
</nav>
</header>
<!-- header end -->
<!-- content start -->
<section class="product_content">
<div class="product_header">
<div class="p_basic">
<div class="p_basic_container">
<h3>OnePlus 8 Pro</h3>
<p>MVR 12,000</p>
</div>
</div>
<div class="p_buy">
<a href="#">BUY</a>
</div>
</div>
<div class="p_detail_links">
<a href="#">BENEFITS</a>
<a href="#">SPECS</a>
<a href="#">REVIEWS</a>
</div>
<div class="product_main">
<div class="p_left">
<img class="late_image" src="images/product/oneplusbluead.png" alt="">
</div>
<div class="p_right">
<div class="p_right_header">
<h2>OnePlus 8 Pro</h2>
<div class="p_link_set">
<a href="#">Add to Cart</a>
<a href="#">Share Product Review</a>
</div>
</div>
<div class="p_options">
<h5>DEVICE</h5>
<div class="p_select_option">
<button class="choose">8</button>
<button class="choose">8 Pro</button>
</div>
</div>
<div class="p_options">
<h5>CAPACITY</h5>
<div class="p_select_option">
<button class="choose">128GB</button>
<button class="choose">256GB</button>
</div>
</div>
<div class="p_options">
<h5>COLOR</h5>
<div class="p_select_option">
<button class="choose">Onyx Black</button>
<button class="choose">Ultramarine</button>
<button class="choose">Glacial Green</button>
</div>
</div>
<div class="p_total">
<h4>TOTAL</h4>
<h2>MVR 12,000</h2>
<button>BUY NOW</button>
</div>
</div>
</div>
</section>
<!-- content end -->
<!-- footer starts -->
<section class="footer">
<div class="footer_container">
<svg class="techlipse" width="94.611mm" height="16.828mm" version="1.1" viewBox="0 0 94.611 16.828" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
<flowRoot transform="matrix(.26458 0 0 .26458 -10.319 -270.89)" fill="#000000" font-family="sans-serif" font-size="40px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><flowRegion><rect x="-420.47" y="427.04" width="322.82" height="278.69"/></flowRegion><flowPara/></flowRoot>
<flowRoot transform="matrix(.26458 0 0 .26458 -10.319 -270.89)" fill="#000000" font-family="sans-serif" font-size="40px" letter-spacing="0px" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><flowRegion><rect x="152.88" y="717.81" width="116.75" height="97.383"/></flowRegion><flowPara/></flowRoot>
<flowRoot transform="matrix(.26458 0 0 .26458 -6.6412 -4.9281)" fill="#000000" font-family="sans-serif" font-size="40px" letter-spacing="0px" stroke-width=".26458" word-spacing="0px" style="line-height:1.25" xml:space="preserve"><flowRegion><rect x="79.021" y="112.06" width="110.2" height="43.542"/></flowRegion><flowPara>LlllL</flowPara></flowRoot>
<g transform="translate(-6.7835 -3.6291)">
<g fill="#fbf9fb">
<path d="m15.138 3.7488a8.3543 8.3543 0 0 0-4.6872 1.4484h9.387a8.3543 8.3543 0 0 0-4.6997-1.4484zm-4.9142 2.8243c-0.34107 0-0.61567 0.26627-0.61567 0.59701v9.8658c0 0.33074 0.2746 0.59701 0.61567 0.59701h9.8285c0.34108 0 0.61568-0.26627 0.61568-0.59701v-9.8658c0-0.33074-0.2746-0.59701-0.61568-0.59701zm-1.9916 0.8303a8.3543 8.3543 0 0 0-1.4484 4.6996 8.3543 8.3543 0 0 0 1.4484 4.6874zm13.812 0.012449v9.3869a8.3543 8.3543 0 0 0 1.4485-4.6996 8.3543 8.3543 0 0 0-1.4485-4.6872zm-6.9058 7.2059a1.0009 1.0008 0 0 1 1.0008 1.0009 1.0009 1.0008 0 0 1-1.0008 1.0009 1.0009 1.0008 0 0 1-1.0009-1.0009 1.0009 1.0008 0 0 1 1.0009-1.0009zm-4.6997 4.3872a8.3543 8.3543 0 0 0 4.6996 1.4485 8.3543 8.3543 0 0 0 4.6873-1.4485z" fill-opacity=".98492" fill-rule="evenodd" stroke-width=".26458"/>
<g transform="translate(1.2005 -1.2991)" fill-opacity=".98824" stroke-width=".018522" aria-label="TECHLIPSE">
<path d="m34.32 9.798h-3.0353v9.3097h-1.3649v-9.3097h-3.0217v-1.2087h7.422z"/>
<path d="m41.99 19.108h-5.6564v-10.518h5.4188v1.2087h-4.0607v3.3681h3.7619v1.2019h-3.7619v3.5378h4.2983z"/>
<path d="m51.575 18.673q-1.1612 0.61114-2.9131 0.61114-2.2612 0-3.6125-1.4328-1.3513-1.4396-1.3513-3.8026 0-2.5396 1.5211-4.0878 1.5211-1.5482 3.8638-1.5482 1.5075 0 2.4921 0.4278v1.4192q-1.1272-0.62472-2.4785-0.62472-1.7587 0-2.8656 1.1747-1.1068 1.168-1.1068 3.1576 0 1.8877 1.0321 3.0014 1.0321 1.1068 2.7026 1.1068 1.5618 0 2.7162-0.70621z"/>
<path d="m62.117 19.108h-1.3581v-4.7397h-5.3237v4.7397h-1.3581v-10.518h1.3581v4.57h5.3237v-4.57h1.3581z"/>
<path d="m70.765 19.108h-5.5478v-10.518h1.3581v9.3165h4.1897z"/>
<path d="m74.102 11.425v7.6829h-1.3581l-0.01778-7.6829z"/>
<path d="m78.587 15.176v3.9317h-1.3581v-10.518h2.9878q1.7044 0 2.6415 0.82164 0.94387 0.82164 0.94387 2.3495 0 1.5482-1.1001 2.5125-1.1001 0.95745-2.7501 0.90313zm0-5.3916v4.1965h1.2562q1.2426 0 1.8877-0.55682 0.64509-0.56361 0.64509-1.6093 0-2.0303-2.4038-2.0303z"/>
<path d="m85.625 17.132q0.48212 0.42101 1.2902 0.69262 0.80806 0.27162 1.5346 0.27162 2.2137 0 2.2137-1.5754 0-0.44138-0.23767-0.79448-0.23766-0.3531-0.65188-0.62472-0.41422-0.27162-1.555-0.83522-1.5822-0.78769-2.0847-1.4599-0.50249-0.67904-0.50249-1.5482 0-1.3106 1.0525-2.0779 1.0525-0.76732 2.6551-0.76732 1.5686 0 2.302 0.38026v1.4803q-0.95066-0.65867-2.4038-0.65867-0.96424 0-1.5754 0.40743-0.60435 0.40064-0.60435 1.1204 0 0.6383 0.42101 1.0389t1.8266 1.0933q1.5482 0.74016 2.1662 1.4803 0.61793 0.74016 0.61793 1.6637 0 1.3852-1.005 2.1254t-2.7909 0.74016q-0.62472 0-1.4599-0.17655-0.82843-0.16976-1.2087-0.4278z"/>
<path d="m100.19 19.108h-5.6564v-10.518h5.4188v1.2087h-4.0607v3.3681h3.7619v1.2019h-3.7619v3.5378h4.2983z"/>
</g>
<path d="m76.735 5.7489a2.1198 2.1198 0 0 1-2.1198 2.1198 2.1198 2.1198 0 0 1-2.1198-2.1198 2.1198 2.1198 0 0 1 2.1198-2.1198 2.1198 2.1198 0 0 1 2.1198 2.1198z" fill-opacity=".98824" fill-rule="evenodd" stroke-width=".26458"/>
</g>
</g>
</svg>
<div class="footer_links">
<div class="link_column">
<a href="#" class="a_level_1">Store</a>
<a href="" class="level_2">Smartphones</a>
<a href="" class="level_2">Tablets</a>
<a href="" class="level_2">Laptops</a>
<a href="" class="level_2">Accessories</a>
<a href="" class="level_2">Find a Store</a>
</div>
<div class="link_column">
<a href="#" class="a_level_1">Account</a>
<a href="signin.html" class="level_2">#</a>
<a href="createaccount.html" class="level_2">Create Account</a>
<a href="" class="level_2">Check Order Status</a>
</div>
<div class="link_column">
<a href="aboutus.html" class="a_level_1">About Us</a>
<a href="aboutus.html" class="level_2">Our Locations</a>
<a href="aboutus.html" class="level_2">Contact Us</a>
</div>
<div class="social_column">
<p class="a_level_1">Follow us on social media:</p>
<div class="social_icons">
<img src="icons/fb.png" alt="">
<img src="icons/insta.png" alt="">
<img src="icons/twitter.png" alt="">
</div>
</div>
</div>
<p class="last_note">Copyright © 2020 Techlipse Pvt. Ltd. All Rights Reserved.</p>
</div>
</section>
<!-- footer ends -->
<script src='main.js'></script>
</body>
</html>