-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
348 lines (336 loc) · 39 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Lemonade API Copycat">
<meta name="author" content="Alba García">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@sweetblasphemyA">
<meta name="twitter:title" content="Lemonade API Copycat | Koalba">
<meta name="twitter:description" content="Lemonade API Copycat">
<meta name="twitter:creator" content="@sweetblasphemyA">
<meta name="twitter:image:src" content="assets/LemonadeAPI.jpg">
<meta property="og:title" content="Lemonade API Copycat | Koalba" />
<meta property="og:url" content="https://koalba.github.io/Lemonade-Copycat/" />
<meta property="og:image" content="assets/LemonadeAPI.jpg" />
<meta property="og:description" content="Lemonade API Copycat" />
<meta property="og:site_name" content="Lemonade API Copycat | Koalba" />
<title>Lemonade API | AlbaGR</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script defer src="js/app.js"></script>
</head>
<body>
<header class="header">
<a href="#" title="Lemonade" class="header__logo">
<svg class="header__svg" viewBox="0 0 167 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Lemonade</title>
<defs></defs>
<g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
<g transform="translate(-600.000000, -93.000000)" fill="#FFFFFF">
<g transform="translate(600.000000, 93.000000)">
<path d="M154.554957,25.7654295 L154.439272,24.8322741 C154.414446,24.6764069 153.866736,20.9988122 156.46401,18.4120317 C157.219799,17.6572661 158.131968,17.2249843 158.965818,17.2249843 C159.676562,17.2249843 160.261128,17.5231538 160.557506,18.0918514 C161.992047,20.8442248 154.554957,25.7654295 154.554957,25.7654295 L154.554957,25.7654295 Z M143.249342,19.9699355 L143.150293,18.4171505 L143.135448,18.2221246 C143.132377,18.1734961 142.77227,13.2612493 143.093218,9.76485976 C143.445391,5.9623666 144.60147,3.50585928 146.036779,3.50585928 C146.330597,3.50585928 146.612131,3.65097697 146.832239,3.91587436 C147.548357,4.7753192 147.757972,7.0677693 147.309566,9.13320107 C146.587816,12.4314934 145.444279,15.0469392 144.606589,16.9621344 C144.369589,17.5037024 144.159718,17.9828212 143.994893,18.3992347 L143.249342,19.9699355 Z M135.406332,30.3262714 C133.573549,30.3262714 132.707961,28.6350232 132.707961,27.045127 C132.707961,18.8420101 137.408802,17.2249843 139.464252,17.8551074 C139.464252,17.8551074 139.53182,19.413267 139.697413,21.418553 C139.841507,23.1599654 139.971268,25.2213021 140.001981,25.3991801 C140.001981,25.3991801 138.294097,30.3262714 135.406332,30.3262714 L135.406332,30.3262714 Z M120.466119,18.174008 C120.466119,18.174008 119.943491,30.3262714 115.184552,30.3262714 C112.904643,30.3262714 112.727788,27.8771863 112.727788,27.1257479 C112.727788,18.4588686 119.550112,16.9158094 120.466119,18.174008 L120.466119,18.174008 Z M76.4368469,30.6167627 C73.7067402,30.6167627 72.734682,28.005412 72.734682,25.5614457 C72.734682,21.1091222 75.4261418,17.6552186 77.7403468,17.6552186 C79.9946619,17.6552186 80.8134123,20.6407529 80.8134123,22.6468067 C80.8134123,27.1160222 78.8905389,30.6167627 76.4368469,30.6167627 L76.4368469,30.6167627 Z M29.9753816,18.0388719 C32.8270595,16.0724887 34.1239049,18.5850468 32.9926523,20.2809019 C31.4275823,22.6273553 27.8628569,24.9487266 26.8270698,25.3185591 C26.8270698,25.3185591 26.0833096,20.7226535 29.9753816,18.0388719 L29.9753816,18.0388719 Z M146.342626,33.1357193 C149.714117,33.3194839 152.03037,31.0582584 152.03037,31.0582584 C153.141915,32.7474591 155.121863,33.5703046 157.920817,33.5703046 C160.998234,33.5703046 164.182377,31.339024 166.004667,29.2607953 C167.087291,28.0281906 167.204511,27.320006 166.748939,26.9330255 C166.334829,26.5813646 165.419333,27.0415438 164.581131,27.7732749 C163.450646,28.7596657 161.056076,30.1778265 158.960444,30.1778265 C156.419988,30.1778265 155.262118,28.5846031 155.262118,28.5846031 C160.436191,25.5396909 164.24713,22.0832279 164.24713,19.1166332 C164.24713,15.791979 161.691574,14.3052265 159.158797,14.3052265 C154.6279,14.3052265 149.73664,18.2996743 149.73664,24.7537007 C149.73664,26.8867004 150.480912,28.6990081 150.480912,28.6990081 C150.480912,28.6990081 149.582053,30.0475533 146.725,29.8197671 C143.688278,29.5779043 143.880744,24.2814923 143.880744,24.2814923 C143.880744,24.2814923 144.809805,22.6109752 145.160442,21.9887862 C147.215892,18.3462553 150.029179,13.3587622 150.483727,7.37822392 C150.736852,4.02720804 149.753276,2.22769741 148.883082,1.30759491 C148.109121,0.488332567 147.075125,0 146.116888,0 C142.604374,0 140.167318,3.47719405 139.57661,6.91190215 C138.998954,10.280066 139.231603,15.2903376 139.231603,15.2903376 C139.231603,15.2903376 136.075869,14.5373636 132.908618,16.6107295 C130.010871,18.5074971 128.725287,22.3035918 128.320646,24.2195549 C128.13637,25.0769522 128.073921,25.9768355 128.133811,26.8925871 C128.161708,27.3197501 128.297356,28.1423396 128.297356,28.1423396 C128.297356,28.1423396 127.255426,30.2607509 125.40396,30.2607509 C122.421241,30.2607509 124.390184,16.9183688 124.504589,16.1679542 C124.596727,15.563681 124.9791,14.2740019 122.875022,14.1836552 C121.603514,14.1291401 121.073208,14.5872718 120.975695,15.1851465 L120.890211,15.7804618 C120.890211,15.7804618 116.577118,12.9484912 111.694305,18.0488536 C109.092936,20.7615563 108.148519,24.6871564 108.105777,27.8367479 L108.103473,28.035101 C108.103473,28.035101 107.033646,31.0201234 104.543867,30.573253 C102.886147,30.2758513 102.677556,27.4298041 102.677556,26.3297761 C102.677556,24.2195549 103.181245,21.8679828 103.586653,19.9783815 C103.842593,18.7808405 104.064492,17.7483806 104.064492,17.1835221 C104.064492,15.1656951 103.478391,14.3052265 102.106299,14.3052265 C100.238964,14.3052265 98.5628167,15.733113 96.7059756,17.9375199 C94.3362318,20.7508069 92.5733205,25.1463118 92.5733205,25.1463118 C92.5733205,25.1463118 92.6508702,24.3605776 92.7732093,23.6029967 C92.8525505,23.1131285 93.0680516,20.8442248 93.4657815,18.7839118 C93.6864014,17.6434454 93.7667664,16.7097781 93.7808431,16.6091939 C93.8504586,16.0507339 93.7196735,15.5685439 93.4035882,15.2145795 C93.0926217,14.8667578 92.6168302,14.6666131 92.0990646,14.6666131 C91.2693087,14.6666131 90.2017851,15.2017826 89.6947689,16.7036355 C89.4631437,17.3818752 89.3303111,17.881981 89.1652301,18.6874226 L89.0098748,19.434766 L88.4329872,18.926982 C86.1477034,16.9101787 82.9819877,14.5066509 78.4423888,14.5066509 C72.049532,14.5066509 68.5992116,20.2179408 68.5992116,25.5931822 C68.5992116,26.2555536 68.6419535,26.8872123 68.7246219,27.47229 L68.7568703,27.7031475 C68.7568703,27.7031475 67.4224017,30.8215143 65.0800434,30.2533286 C64.0544939,30.0045554 63.4228352,28.9490609 63.4228352,26.435735 C63.4228352,24.3447093 63.8581883,21.503269 64.1184787,19.7982 C64.2065219,19.2195208 64.2771612,18.7626688 64.2966126,18.5497272 L64.354455,17.9190922 C64.5333567,16.0210449 64.5837767,15.1636476 63.9321548,14.7503053 C63.453036,14.4503442 62.9480674,14.3052265 62.3906312,14.3052265 C61.8546939,14.3052265 61.4323937,14.5447859 61.0561626,14.8032848 C60.4774834,15.2028063 58.5842989,17.6349994 55.0085682,23.2669481 C54.9507258,23.3580626 54.9174537,23.4066911 54.9141265,23.411042 L54.5240747,24.1358627 L53.5860564,26.1293755 L54.0974235,23.2329081 L54.1296719,23.043257 C54.2131082,22.5559482 54.3610412,21.6972711 54.4222108,21.4239278 L54.5721913,20.7953403 C54.8135423,19.7864268 55.3162074,17.6879789 55.3827517,17.3171225 C55.5979968,16.0878451 55.5132809,15.2665353 55.1232291,14.8076357 C54.8347852,14.4695397 54.3525952,14.3052265 53.6482497,14.3052265 C52.3511483,14.3052265 51.3071711,15.2568096 49.5074045,18.0770069 C49.2266389,18.5179907 48.1752394,20.2007929 47.3444598,21.532958 C46.2682342,23.2595259 45.291825,24.536664 45.291825,24.536664 L45.5188434,22.2283456 C45.6926263,21.1917906 46.3432245,16.43106 46.3519264,16.2076248 C46.349623,15.2038301 45.8351846,14.7364845 44.7320853,14.7364845 C44.2831675,14.7364845 43.1885142,14.83195 42.7298706,15.7157091 C42.309618,16.5234541 41.1433017,20.1821093 40.5761397,25.7772027 C40.5761397,25.7772027 36.0623907,29.99355 31.2366514,29.99355 C29.4583838,29.99355 28.0509725,29.3219648 27.540885,28.0100189 C27.540885,28.0100189 30.1225468,26.7083106 31.348497,25.8846973 C34.4878509,23.7757558 36.7715991,21.6266318 36.7715991,18.8668362 C36.7715991,15.4902264 33.565189,13.9696898 30.9162152,14.3052265 C26.3671465,14.8813463 22.5221674,19.5054053 22.5221674,24.8765516 C22.5221674,29.9290533 25.4237535,33.5703046 30.4734398,33.5703046 C36.3221693,33.5703046 40.359359,28.8907067 40.359359,28.8907067 L40.2377877,31.0267778 C40.1625415,32.1401146 40.6355177,33.5703046 42.5614624,33.5703046 C43.0728296,33.5703046 44.0064969,33.4123899 44.5027636,32.3548479 C47.4987913,26.004477 50.6363537,20.9680995 50.6673224,20.9184472 L50.774561,20.7467118 L51.3189443,19.7334474 L52.1295047,18.4215015 L51.4799303,21.2373479 C51.3619422,21.879756 50.3287144,27.5930935 50.1807814,30.112306 C50.1045114,31.3840693 50.1034876,32.6356135 50.6158785,33.1718068 C50.8754012,33.4443823 51.2923266,33.5703046 51.9268006,33.5703046 C53.3449614,33.5703046 54.2248814,33.094513 54.5422464,32.155471 C56.8510766,25.3886866 59.3390645,20.8229818 59.4439997,20.6312831 L59.5415127,20.454173 L60.84706,17.9838449 C60.84706,17.9838449 59.8171595,23.6193768 59.8171595,27.4625643 C59.8171595,29.2994421 60.1898074,32.6435476 62.8881776,33.2787895 C67.0418197,34.2569902 69.5937925,30.0877358 69.5937925,30.0877358 L69.8640646,30.8181871 C71.0495763,32.7479709 73.0197986,33.7686577 75.5623016,33.7686577 C80.8305603,33.7686577 84.2350675,29.7995479 84.2350675,23.6559761 C84.2350675,19.8442692 82.4235277,17.6605933 82.4235277,17.6605933 C82.4235277,17.6605933 84.4341885,18.3449756 85.9107034,19.3702692 C87.5103253,20.4807907 88.6464407,21.6570886 88.6464407,21.6570886 L88.6067701,21.9081653 C88.5594213,22.2007041 88.5166794,22.4952905 88.4736816,22.7932041 C88.3075769,23.9718055 88.1609235,25.2074814 88.0365369,26.4674715 C87.921876,27.641722 87.862754,28.703615 87.862754,29.6226937 C87.862754,30.1811537 87.8939786,30.696104 87.9602669,31.1985132 C88.0181093,31.6668825 88.1371211,32.0940455 88.3119278,32.4649019 C88.3677226,32.5782831 88.8918867,33.5703046 90.2166296,33.5703046 C91.1009006,33.5703046 91.6685744,33.2603618 92.0872914,32.3167129 C96.1812996,23.0862548 99.4609084,20.1281061 99.7490963,19.8340316 C100.508981,19.0587908 100.166022,20.5017777 100.166022,20.5017777 L100.136077,20.6916848 C100.130702,20.7223976 99.6247097,23.8486986 99.5110725,24.7995138 C99.3964116,25.7372762 99.3385693,26.6328085 99.3385693,27.4625643 C99.3385693,30.0337325 99.9318371,32.9639839 103.036895,33.4269784 C107.281396,34.0601728 108.752024,30.8465964 108.752024,30.8465964 C108.752024,30.8465964 110.287661,33.5703046 113.913556,33.5703046 C119.230443,33.5703046 120.87639,29.6375382 120.87639,29.6375382 C121.436386,32.0036989 122.433014,33.2787895 124.830399,33.2787895 C127.42537,33.2787895 129.227952,30.4580802 129.227952,30.4580802 C129.227952,30.4580802 130.729037,33.5703046 134.397162,33.5703046 C138.642942,33.5703046 140.813565,30.4332541 140.902632,30.3019571 L141.395316,29.5569173 C141.395316,29.5569173 142.777645,32.9412053 146.342626,33.1357193 L146.342626,33.1357193 Z M6.35574885,32.2673166 C2.60700298,32.1332043 2.40020387,29.321197 5.84310203,28.5950966 C8.98911037,27.9317014 11.6130021,28.9935944 11.6130021,28.9935944 C11.6130021,28.9935944 10.8190778,32.4272788 6.35574885,32.2673166 L6.35574885,32.2673166 Z M23.0028218,3.84114002 C25.1688378,4.01287543 25.0060602,6.92009221 24.4166316,8.74289333 C22.6892959,14.0863982 18.5576645,14.2458485 18.5576645,14.2458485 C18.5576645,14.2458485 19.8647476,3.59236683 23.0028218,3.84114002 L23.0028218,3.84114002 Z M17.2198688,23.0757613 C17.7547823,19.8611612 18.191671,16.7993569 18.191671,16.7993569 C18.191671,16.7993569 25.1365894,16.8438904 27.5019822,8.94022269 C28.8784249,4.34047799 26.9291896,0.42025266 22.8648704,0.337328261 C18.7608805,0.253636045 15.5816,3.75949532 14.0917762,14.2376585 C14.0917762,14.2376585 10.1249699,13.7326898 8.37255211,10.7143953 C7.54356407,9.28625289 6.29278773,9.95092777 6.68283953,11.3081749 C8.00143983,15.8976821 13.8417233,16.6365794 13.8417233,16.6365794 C13.8417233,16.6365794 13.5998605,18.6682272 13.2387298,21.1551913 C12.8883487,23.5679329 12.2868908,26.6036314 12.2868908,26.6036314 C12.2868908,26.6036314 8.60212984,25.4795451 4.68164857,26.2696303 C-1.34316726,27.4840632 -2.00605057,34.6913196 5.3660308,35.4030873 C14.0111552,36.2374501 15.6435374,30.4701094 15.6435374,30.4701094 C15.6435374,30.4701094 17.3419519,31.2660812 19.7521342,33.3453337 C22.4231188,35.6495571 23.6436943,37.0787232 24.1975474,36.5665883 C24.8046358,36.005057 23.467352,34.0443045 20.9916492,31.5440315 C18.1901354,28.7146204 16.2511377,27.984425 16.2511377,27.984425 C16.2511377,27.984425 16.7146442,26.1127394 17.2198688,23.0757613 L17.2198688,23.0757613 Z"></path>
</g>
</g>
</g>
</svg>
</a>
<nav class="nav">
<button class="nav__burger">
<svg xmlns="http://www.w3.org/2000/svg" class="nav__svg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>
<ul class="nav__ul nav__ul--start">
<li class="nav__li"><a href="#" title="Homeowners" class="nav__a">Homeowners</a></li>
<li class="nav__li"><a href="#" title="Renters" class="nav__a">Renters</a></li>
<li class="nav__li"><a href="#" title="Pet" class="nav__a">Pet</a></li>
<li class="nav__li"><a href="#" title="Life" class="nav__a">Life</a></li>
<li class="nav__li"><a href="#" title="Giveback" class="nav__a">Giveback</a></li>
<li class="nav__li mobile"><a href="#" title="My Account" class="nav__a">My Account</a></li>
<li class="nav__icons mobile">
<ul class="nav__social">
<li class="nav__rrss"><a href="#" title="facebook"><svg xmlns="http://www.w3.org/2000/svg" class="nav__svg" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg></a></li>
<li class="nav__rrss"><a href="#" title="instagram"><svg xmlns="http://www.w3.org/2000/svg" class="nav__svg" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg></a></li>
<li class="nav__rrss"><a href="#" title="twitter"><svg xmlns="http://www.w3.org/2000/svg" class="nav__svg" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg></a></li>
</ul>
</li>
</ul>
<button class="nav__close"><span class="nav__close-s"></span></button>
<ul class="nav__ul">
<li class="nav__li nav__li--login"><a href="#" title="Login" class="nav__a">Login</a></li>
<li class="nav__li nav__li--button"><button class="nav__button button"><span class="remove">Request</span> Access</button></li>
</ul>
</nav>
</header>
<main class="main">
<section class="hero">
<div class="clouds"></div>
<div class="container">
<h1 class="hero__h1">Introducing the Lemonade API</h1>
<p class="hero__p">A quick and easy way for your users to protect their homes and stuff!</p>
<button class="button">Request Access</button>
<div class="hero__background">
<img src="assets/skyline.png" alt="" loading="lazy" decoding="async" class="hero__img">
<img src="assets/light.png" alt="" loading="lazy" decoding="async" class="hero__light">
<img src="assets/bg-moon.png" alt="" loading="lazy" decoding="async" class="hero__moon">
</div>
</div>
</section>
<section class="seamless">
<div class="container">
<h2 class="title title--m">Seamless Integration, Huge Value</h2>
<p class="seamless__p">Lemonade insurance can be integrated beautifully into any app or website</p>
</div>
<div class="seamless__container">
<div class="seamless__container-v">
<img src="assets/simulation-container.png" alt="" loading="lazy" decoding="async">
<video class="video-simulation" poster="/assets/simulation-poster.png" preload="auto" playsinline loop autoplay muted loading="lazy">
<source src="https://s3.amazonaws.com/lmnd-images/simulation_low.mp4" type="video/mp4">
</video>
</div>
</div>
<ul class="seamless__ul">
<li class="seamless__li">
<h3 class="title seamless__title">Commerce</h3>
<p class="seamless__ul-p">Let customers protect the stuff they buy on your site</p>
</li>
<li class="seamless__li">
<h3 class="title seamless__title">Real Estate Marketplaces</h3>
<p class="seamless__ul-p">Renters and homeowners insurance for your residents in just a few clicks</p>
</li>
<li class="seamless__li">
<h3 class="title seamless__title">Financial Services</h3>
<p class="seamless__ul-p">Help your users improve their financial stability with proper coverage</p>
</li>
<li class="seamless__li">
<h3 class="title seamless__title">Smart Home Security</h3>
<p class="seamless__ul-p">Offer full protection with discounts and total peace of mind</p>
</li>
<li class="seamless__li">
<h3 class="title seamless__title">Insurance As A Service</h3>
<p class="seamless__ul-p">Brokers, get your users insured in seconds, this time with no paperwork</p>
</li>
<li class="seamless__li">
<h3 class="title seamless__title">Everything Else</h3>
<p class="seamless__ul-p">We're open to ideas! Let us know how Lemonade can be integrated in your app</p>
</li>
</ul>
</section>
<section class="ultimate">
<div class="clouds"></div>
<div class="container">
<h2 class="title title--m">The Ultimate Coverage</h2>
<p class="ultimate__p">Lemonade covers stuff and property, with special protection for camera equipment, jewelry, bikes, fine art, and musical instruments</p>
</div>
<div class="ultimate__background">
<img src="assets/bicycle-coverage.png" alt="" loading="lazy" decoding="async" class="ultimate__img ultimate__img--bike">
<img src="assets/musical-coverage.png" alt="" loading="lazy" decoding="async" class="ultimate__img ultimate__img--music">
<img src="assets/jewelry-coverage.png" alt="" loading="lazy" decoding="async" class="ultimate__img ultimate__img--ring">
<img src="assets/electronics-coverage.png" alt="" loading="lazy" decoding="async" class="ultimate__img ultimate__img--tv">
<picture>
<source srcset="assets/coverage-skyline-mobile.png" media="(max-width: 770px)">
<img src="assets/coverage-skyline-desktop.png" alt="" loading="lazy" decoding="async" class="ultimate__bkg">
</picture>
</div>
</section>
<section class="how">
<div class="container">
<h2 class="title title--m">How it works</h2>
<p class="how__p">We offer different options for integration, with various levels of customization.<br>Choose what's right for your app!</p>
</div>
<ul class="how__ul">
<li class="how__li reverse">
<article class="how__article">
<h3 class="how__title how__title--up">Rest API</h3>
<p class="how__note">
<img src="assets/check-icn.png" alt="" loading="lazy" decoding="async">
<span>Fully customizable option</span>
</p>
<p class="how__text">Full control over how information is collected from your users. Let your users get quotes, add items, and even pay, all from within your app.</p>
</article>
<div class="how__img-cont animation first">
<img src="assets/rest-api-sample.png" alt="" loading="lazy" decoding="async">
<div class="animation__checkbox">
<label for="check" class="animation__label">
<input id="check" type="checkbox" class="animation__input">
<span class="animation__custom"></span>
</label>
<div class="animation__text">
<h5 class="animation__h5">Add renters insurance for 15/mo</h5>
<p class="animation__p">Powered by</p>
</div>
</div>
<div class="animation__code">
<p data-char="14">CREATE <span>quote</span> {</p>
<p data-char="15" class="inside">type: "<span>renter</span>",</p>
<p data-char="31" class="inside">address: "<span>123 Main Street, NY</span>",</p>
<p data-char="17" class="inside">name: "<span>John Doe</span>",</p>
<p data-char="26" class="inside">email: "<span>johndoe@gmail.com</span>"</p>
<p data-char="1">}</p>
</div>
</div>
</li>
<li class="how__li">
<article class="how__article">
<h3 class="how__title">Widget</h3>
<p class="how__note">2 minute integration</p>
<p class="how__text">Maya, our AI bot, will help your users get insured in seconds. Get Lemonade up and running with a single line of code.</p>
</article>
<div class="how__img-cont animation second">
<img src="assets/widget-sample.png" alt="" loading="lazy" decoding="async">
<div class="animation__open">
<button class="animation__button">Add insurance</button>
</div>
<div class="animation__maya">
<img src="assets/Maya.jpg" alt="" loading="lazy" decoding="async" class="animation__avatar">
<p class="animation__pres">I'm Maya. Let's get you awesome coverage for your bike. What's your name?</p>
<p class="animation__form">Full name</p>
<p class="animation__f-button">Let's do it</p>
</div>
<div class="animation__code">
<p data-char="14">CREATE <span>quote</span> {</p>
<p data-char="15" class="inside">type: "<span>renter</span>",</p>
<p data-char="31" class="inside">address: "<span>123 Main Street, NY</span>",</p>
<p data-char="17" class="inside">name: "<span>John Doe</span>",</p>
<p data-char="26" class="inside">email: "<span>johndoe@gmail.com</span>"</p>
<p data-char="6" class="inside">items:</p>
<p data-char="13" class="inside in"> bike: "<span>3900</span>"</p>
<p data-char="1">}</p>
</div>
</div>
</li>
</ul>
</section>
<section class="apply container">
<h2 class="title title--m">Apply for Early Access</h2>
<p class="apply__p">Join others who are already using Lemonade's API to build amazing new products. We can't wait to see what you'll build with it.</p>
<button class="button">Request Access</button>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer__logo"></div>
<ul class="footer__ul">
<li class="footer__li">
<p class="footer__title">Features</p>
<ul class="footer__sec-ul">
<li class="footer__sec-li"><a href="#" title="Homeowners" class="footer__a">Homeowners</a></li>
<li class="footer__sec-li"><a href="#" title="Renters" class="footer__a">Renters</a></li>
<li class="footer__sec-li"><a href="#" title="Pet Health" class="footer__a">Pet Health</a></li>
<li class="footer__sec-li"><a href="#" title="Term Life" class="footer__a">Term Life</a></li>
<li class="footer__sec-li"><a href="#" title="Claims" class="footer__a">Claims</a></li>
<li class="footer__sec-li"><a href="#" title="Giveaway" class="footer__a">Giveaway</a></li>
<li class="footer__sec-li"><a href="#" title="Policy 2.0" class="footer__a">Policy 2.0</a></li>
<li class="footer__sec-li"><a href="#" title="API" class="footer__a">API</a></li>
</ul>
</li>
<li class="footer__li">
<p class="footer__title">Resources</p>
<ul class="footer__sec-ul">
<li class="footer__sec-li"><a href="#" title="Blog" class="footer__a">Blog</a></li>
<li class="footer__sec-li"><a href="#" title="FAQ" class="footer__a">FAQ</a></li>
<li class="footer__sec-li"><a href="#" title="Community" class="footer__a">Community</a></li>
<li class="footer__sec-li"><a href="#" title="Transparency" class="footer__a">Transparency</a></li>
<li class="footer__sec-li"><a href="#" title="Where We're Live" class="footer__a">Where We're Live</a></li>
<li class="footer__sec-li"><a href="#" title="Insurance Dictionary" class="footer__a">Insurance Dictionary</a></li>
<li class="footer__sec-li"><a href="#" title="Investor Relations" class="footer__a">Investor Relations</a></li>
</ul>
</li>
<li class="footer__li">
<p class="footer__title">Company</p>
<ul class="footer__sec-ul">
<li class="footer__sec-li"><a href="#" title="Join the Team" class="footer__a">Join the Team</a></li>
<li class="footer__sec-li"><a href="#" title="Legal Stuff" class="footer__a">Legal Stuff</a></li>
<li class="footer__sec-li"><a href="#" title="Privacy Pledge" class="footer__a">Privacy Pledge</a></li>
<li class="footer__sec-li"><a href="#" title="Terms of Service" class="footer__a">Terms of Service</a></li>
<li class="footer__sec-li"><a href="#" title="API Terms & Conditions" class="footer__a">API Terms $ Conditions</a></li>
<li class="footer__sec-li"><a href="#" title="Accessibility" class="footer__a">Accessibility</a></li>
<li class="footer__sec-li"><a href="#" title="Partners Program" class="footer__a">Partners Program</a></li>
<li class="footer__sec-li"><a href="#" title="Reviews" class="footer__a">Reviews</a></li>
</ul>
</li>
</ul>
<ul class="footer__other">
<li class="footer__o-li">
<p class="footer__title">Region</p>
<select class="footer__toggle">
<option>🇺🇸 United States</option>
<option>🇫🇷 France (English)</option>
<option>🇫🇷 France (Français)</option>
<option>🇩🇪 Germany (Deutsch) </option>
<option>🇳🇱 Netherlands (English)</option>
<option>🇩🇪 Germany (English)</option>
<option>🇳🇱 Netherlands (Dutch)</option>
</select>
</li>
<li class="footer__o-li">
<p class="footer__title">Get our app</p>
<ul class="footer__sec-o-ul">
<li><a href="#" title="App Store" class="footer__app appstore"></a></li>
<li><a href="#" title="Google Play" class="footer__app google"></a></li>
</ul>
</li>
<li class="footer__o-li">
<p class="footer__title">Follow us</p>
<ul class="footer__sec-o-ul rrss">
<li class="footer__sec-o-li">
<a href="#" title="Instagram" class="footer__rrss">
<svg xmlns="http://www.w3.org/2000/svg" class="footer__svg" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
</a>
</li>
<li class="footer__sec-o-li">
<a href="#" title="Facebook" class="footer__rrss">
<svg xmlns="http://www.w3.org/2000/svg" class="footer__svg" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg>
</a>
</li>
<li class="footer__sec-o-li">
<a href="#" title="Twitter" class="footer__rrss">
<svg xmlns="http://www.w3.org/2000/svg" class="footer__svg" viewBox="0 0 16 16">
<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
</svg>
</a>
</li>
<li class="footer__sec-o-li">
<a href="#" title="Youtube" class="footer__rrss">
<svg xmlns="http://www.w3.org/2000/svg" class="footer__svg" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg>
</a>
</li>
<li class="footer__sec-o-li">
<a href="#" title="Medium" class="footer__rrss">
<svg xmlns="http://www.w3.org/2000/svg" class="footer__svg" viewBox="0 0 16 16">
<path d="M9.025 8c0 2.485-2.02 4.5-4.513 4.5A4.506 4.506 0 0 1 0 8c0-2.486 2.02-4.5 4.512-4.5A4.506 4.506 0 0 1 9.025 8zm4.95 0c0 2.34-1.01 4.236-2.256 4.236-1.246 0-2.256-1.897-2.256-4.236 0-2.34 1.01-4.236 2.256-4.236 1.246 0 2.256 1.897 2.256 4.236zM16 8c0 2.096-.355 3.795-.794 3.795-.438 0-.793-1.7-.793-3.795 0-2.096.355-3.795.794-3.795.438 0 .793 1.699.793 3.795z"/>
</svg>
</a>
</li>
<li class="footer__sec-o-li">
<a href="#" title="Dribble" class="footer__rrss">
<svg xmlns="http://www.w3.org/2000/svg" class="footer__svg" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 0C3.584 0 0 3.584 0 8s3.584 8 8 8c4.408 0 8-3.584 8-8s-3.592-8-8-8zm5.284 3.688a6.802 6.802 0 0 1 1.545 4.251c-.226-.043-2.482-.503-4.755-.217-.052-.112-.096-.234-.148-.355-.139-.33-.295-.668-.451-.99 2.516-1.023 3.662-2.498 3.81-2.69zM8 1.18c1.735 0 3.323.65 4.53 1.718-.122.174-1.155 1.553-3.584 2.464-1.12-2.056-2.36-3.74-2.551-4A6.95 6.95 0 0 1 8 1.18zm-2.907.642A43.123 43.123 0 0 1 7.627 5.77c-3.193.85-6.013.833-6.317.833a6.865 6.865 0 0 1 3.783-4.78zM1.163 8.01V7.8c.295.01 3.61.053 7.02-.971.199.381.381.772.555 1.162l-.27.078c-3.522 1.137-5.396 4.243-5.553 4.504a6.817 6.817 0 0 1-1.752-4.564zM8 14.837a6.785 6.785 0 0 1-4.19-1.44c.12-.252 1.509-2.924 5.361-4.269.018-.009.026-.009.044-.017a28.246 28.246 0 0 1 1.457 5.18A6.722 6.722 0 0 1 8 14.837zm3.81-1.171c-.07-.417-.435-2.412-1.328-4.868 2.143-.338 4.017.217 4.251.295a6.774 6.774 0 0 1-2.924 4.573z"/>
</svg>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="container">
<p class="footer__copy">Insurance provided by Lemonade Insurance Company, 5 Crosby St. New York, NY 10013<br>Lemonade Insurance Agency (LIA) is acting as the agent of Lemonade Insurance Company in selling this insurance policy, except that Lemonade Life Insurance Agency (LLIA) is acting as the agent of one or more unaffiliated companies that provide life insurance. Both LIA and LLIA receive compensation based on the premiums for the insurance policies each sells. Further information is available upon request.</p>
</div>
</footer>
</body>
</html>