-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathComponents.html
331 lines (317 loc) · 33.9 KB
/
Components.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
<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">
<link rel="stylesheet" href="./dist/style.css">
<title>Document</title>
</head>
<body class="comp__components">
<!-- #d25a80 -->
<header>
<div class="header__container">
<div class="logo">
<a href="Home.html"><img src="./src/images/logo-dc.svg" alt=""></a>
</div>
<div class="navigation">
<button class="hamburger_menu">
<svg width="25" height="25" fill="none">
<path class="hamburger-line hamburger-line-1" d="M0 4 L25 4 L25 7 L0 7Z" fill="white"/>
<path class="hamburger-line hamburger-line-2" d="M0 11 L15 11 L15 14 L0 14Z" fill="white"/>
<path class="hamburger-line hamburger-line-3" d="M0 18 L25 18 L25 21 L0 21Z" fill="white"/>
</svg>
</button>
<nav>
<ul>
<li class="li_mobile"><a href="index.html">Home</a></li>
<li><a href="#">Components</a></li>
<li><a href="Pricing.html">Pricing</a></li>
<li><a href="Updates.html">Updates</a></li>
<li class="li_mobile"><a href="#">Support</a></li>
<li class="li_mobile"><a href="#">Community</a></li>
<li class="li_mobile"><a href="Signup.html">Sign up</a></li>
</ul>
</nav>
</div>
<div class="signup">
<a href="Signup.html"><span>Sign Up</span></a>
</div>
</div>
</header>
<main>
<section class="home">
<div class="section__container">
<button class="update">
<span>Updated for IOS 16</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="#ffffff80" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/><polyline points="144 56 216 128 144 200" fill="none" stroke="#ffffff80" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/></svg>
</button>
<h1 class="title">Mix 3D <br> and 2D design <br> with Framer</h1>
<p class="description">This is a demo showinga fully responsive page with a spline 3D asset with mouse over interaction. It falls back to an image on smaller devices.</p>
<div class="calltoaction">
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><rect x="64" y="24" width="128" height="208" rx="16" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="64" y1="56" x2="192" y2="56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="64" y1="200" x2="192" y2="200" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Get the app</span>
</button>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M228.1,121.2,84.2,33.2A8,8,0,0,0,72,40V216a8,8,0,0,0,12.2,6.8l143.9-88A7.9,7.9,0,0,0,228.1,121.2Z" fill="none" stroke="#d25a80" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Watch video</span>
</button>
</div>
</div>
</section>
<section class="components">
<div class="components__container">
<div class="cards">
<div class="card__line card__line__2">
<div class="card card__3">
<div class="bkg">
<div class="pbkg"><div class="ppbkg"></div></div>
</div>
<div class="card__3-container">
<h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="152" cy="56" r="24" fill="none" stroke="#ffffffcc" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M56,101.6s32-29.6,80,8c50.5,39.4,80,24,80,24" fill="none" stroke="#ffffffcc" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M135.1,108.8C130.7,129.2,101.6,207,32,200" fill="none" stroke="#ffffffcc" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M110.6,161.2C128.5,165,176,180,176,232" fill="none" stroke="#ffffffcc" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Close your rings</span>
</h3>
<div>
<p>Close your move ring by hitting your personal goal of active calories burned.</p>
</div>
<div class="brand brand__3">
<div class="left">
<h4>Netherlands</h4>
<div>
<span>21 mins ago</span>
<span>3,054 STEPS</span>
</div>
</div>
<div class="right">
<button>Visit</button>
<span>3% Hicher</span>
</div>
</div>
</div>
</div>
<div class="brand__4">
<div class="left">
<h4>Montreal</h4>
<div>
<span>21 mins ago</span>
<span>3,054 STEPS</span>
</div>
</div>
<div class="right">
<button>Visit</button>
<span>3% Hicher</span>
</div>
</div>
<div class="card card__5">
<img src="./src/images/simon-lee-IEgvy4o3byM-unsplash.jpg" alt="">
<div class="brand brand__5">
<div class="left">
<h4>San Francisco</h4>
<div>
<span>21 mins ago</span>
<span>3,054 STEPS</span>
</div>
</div>
<div class="right">
<button>Visit</button>
<span>3% Hicher</span>
</div>
</div>
</div>
</div>
<div class="card__line card__line__1">
<div class="card card__1">
<img src="./src/images/javier-miranda-MrWOCGKFVDg-unsplash.jpg" alt="">
<div class="brand brand__1">
<div class="left">
<h4>Lac superieur</h4>
<div>
<span>30 mins ago</span>
<span>3,054 STEPS</span>
</div>
</div>
<div class="right">
<button>Visit</button>
<span>3% Hicher</span>
</div>
</div>
</div>
<div class="card card__2">
<img src="./src/images/vadim-bogulov-jsOCj9kN-4Y-unsplash.jpg" alt="">
<div class="brand brand__2">
<div class="left">
<h4>Coit tower</h4>
<div>
<span>21 mins ago</span>
<span>3,054 STEPS</span>
</div>
</div>
<div class="right">
<button>Visit</button>
<span>3% Hicher</span>
</div>
</div>
</div>
</div>
</div>
<div class="detail">
<div class="title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="144" y1="224" x2="112" y2="224" fill="none" stroke="#d25a80 stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M123,19.8C104,35,40.5,95.8,96,192h64c54.4-96.2-8.2-156.9-27-172.2A7.8,7.8,0,0,0,123,19.8Z" fill="none" stroke="#d25a80" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M73.9,111.4,42.5,149a7.6,7.6,0,0,0-1.6,6.8l12.3,55.7A8,8,0,0,0,66,216l30-24" fill="none" stroke="#d25a80" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M181.5,110.6l32,38.4a7.6,7.6,0,0,1,1.6,6.8l-12.3,55.7A8,8,0,0,1,190,216l-30-24" fill="none" stroke="#d25a80" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="128" cy="96" r="12" fill="#d25a80"/></svg>
<h2>Many types of components to customize</h2>
</div>
<div class="learn__more">
<p>Build a website without writing a single line of code using Framer components and customizing the entire content</p>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><rect x="32" y="80" width="160" height="128" rx="8" fill="none" stroke="#ffffffcc" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M64,48H216a8,8,0,0,1,8,8V176" fill="none" stroke="#ffffffcc" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Learn more</span>
</button>
</div>
<div class="sup">
<p>Grow your business, reach new audiences, and hit your goals with integrations.</p>
</div>
</div>
</div>
</section>
<section class="overlays">
<div class="overlays__container">
<div class="detail">
<div class="title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M56,56v55.1c0,39.7,31.8,72.6,71.5,72.9A72,72,0,0,0,200,112V56a8,8,0,0,0-8-8H64A8,8,0,0,0,56,56Z" fill="none" stroke="#110068" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="96" y1="224" x2="160" y2="224" fill="none" stroke="#110068" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="184" x2="128" y2="224" fill="none" stroke="#110068" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M198.2,128H208a32,32,0,0,0,32-32V80a8,8,0,0,0-8-8H200" fill="none" stroke="#110068" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M58,128H47.9a32,32,0,0,1-32-32V80a8,8,0,0,1,8-8h32" fill="none" stroke="#110068" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<h2>Text styls, variants and overlays</h2>
</div>
<div class="learn__more">
<p>Build a website without writing a single line of code using Framer components and customizing the entire content</p>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><rect x="64" y="24" width="128" height="208" rx="16" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="64" y1="56" x2="192" y2="56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="64" y1="200" x2="192" y2="200" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Get the app</span>
</button>
</div>
<div class="sup">
<p>Grow your business, reach new audiences, and hit your goals with integrations.</p>
</div>
</div>
<div class="cards">
<div class="card">
<div class="bkg">
<div class="pbkg">
<div class="ppbkg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<circle cx="128" cy="128" r="128" fill="transparent" stroke="white" stroke-width="8" stroke-opacity=".2" />
<circle class="broderie" cx="128" cy="128" r="128" fill="transparent" stroke="white" stroke-width="8" stroke-linecap="round" stroke-opacity=".8" />
<circle cx="128" cy="128" r="118" fill="#150067ad" />
<circle cx="128" cy="128" r="118" fill="red" />
</svg>
</div>
</div>
</div>
<div class="card__container">
<div class="card__img">
<img src="./src/images/vadim-bogulov-rAKmYTWmXnk-unsplash.jpg" alt="Shoes">
<div class="band">
<span>light</span>
<span>Tracking</span>
</div>
<div class="price">
<span>$95</span>
</div>
</div>
<div class="mini__title">
<h3>Super Shoes</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="callToDownload">
<div class="callToDownload__container">
<div class="cards">
<div class="card card__1">
<h3>Sit less. You'll go far.</h3>
<div class="svg__container">
<svg xmlns="http://www.w3.org/2000/svg" width="692.68042" height="327.47189" viewBox="0 0 692.68042 327.47189" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M207.95311,68.81363c.05771,.00986,.1442,.0245,.24904,.04185,2.05136,.33957,14.45374,2.25308,26.95784-2.51012,5.29715-2.01785,3.49015-2.52077,15.28773-9.53614,13.83138-8.22473,17.38101-8.16726,18.41101-12.0023,2.05667-7.65797-8.92542-19.69644-16.19439-18.90382-1.91376,.20869-3.96328,1.34963-7.15104,.57599-.70038-.16997-3.76626-.91402-5.26088-3.4518-1.33332-2.26389-.20403-3.89699-.74025-5.7537-1.40748-4.87362-13.14017-7.30582-23.42653-5.58734-5.91628,.98842-10.51802,3.68683-19.47981,9.04331-15.59837,9.32311-23.39745,13.98468-25.15035,21.1267-1.66142,6.76936,2.32619,9.68618-.57391,16.93255-2.70041,6.74725-6.98935,6.29661-8.46524,11.75484-2.37505,8.78336,6.44004,18.42314,10.11211,22.4388,4.02599,4.40267,7.87633,6.81902,12.98792,10.02686,6.41596,4.02642,9.62385,6.03962,13.48076,5.83479,6.99272-.37136,27.77163,.89278,28.04263-4.8939,.10155-2.16864,25.30287-.39298,12.89362-23.7409-1.52204-2.86374-31.3393,.19518-31.73285-1.44996" fill="#2f2e41"/><polygon points="492.19363 301.23849 521.24635 303.86831 557.32791 322.19307 563.27837 300.94149 568.4751 274.03646 557.64851 261.28551 538.94711 274.03646 499.84419 269.78612 492.19363 301.23849" fill="#ffb6b6"/><polygon points="253.32578 212.83187 231.22415 321.64 391.88614 275.73659 495.59389 304.63875 510.89502 271.48626 396.13644 223.03264 301.77942 224.73278 253.32578 212.83187" fill="#2f2e41"/><path d="M560.58812,272.88506l3.40025,2.5502-21.11156,39.95731s14.26097,8.32013,18.51129,8.32013,18.75149-82.28,17.05136-94.43188c-1.70012-12.15189-12.75095-8.24963-12.75095-8.24963l-23.85457,50.39401,18.7542,1.45987h-.00003Z" fill="#2f2e41"/><path d="M90.19861,259.08639c-2.22827-.23975-3.09741,2.81052-1.08447,3.79572,2.91522,1.42682,5.65747,3.22449,7.08679,5.35333,3.6543,5.44269,8.70343,2.29651,9.42133,1.80804,1.18036,1.96481,1.76154,3.95047,2.01196,5.71582l-1.72217,5.7063c-.07495,.38126,.0033-.0112,0,0h0l-1.32019,14.52243c-.90436,3.52759-.22186,6.92426,0,7.92133l-1.32019,18.48309,3.69104,.02966,.39789-18.08258,.07703-.02258c-.00214-.00742-.03003-.10638-.07031-.28308l.16443-7.47186c.33209-1.27954,.85791-2.6243,1.65973-3.95911,.7179,.48846,5.76703,3.63461,9.42133-1.80804,1.42932-2.12885,4.17157-3.92651,7.08679-5.35333,2.013-.98523,1.1438-4.03546-1.08447-3.79572-1.88776,.20312-3.94708,.50797-6.13757,.95401-9.28784,1.8912-9.48071,8.19778-9.39935,9.64383l-.06311-.03937c-.6344,1.0177-1.10504,2.04324-1.45447,3.04532l.30957-14.06967c.19177-.9967,2.33801-2.57559,2.0025-4.99521l-1.43542-20.77673c.50684,.87027,1.06842,1.43546,1.59839,1.37494,1.26727-.14471,1.90594-3.81177,1.74548-6.48105,1.57483,2.18188,4.56189,4.71756,5.651,3.98901,.8241-.5513,.33545-2.82092-.56433-4.88434,1.87482,1.12949,3.95117,1.87186,4.59552,1.15463,.87921-.97873-1.2276-4.31827-3.17059-6.18246,2.60083,.24255,5.90857-.17181,6.12543-1.3555,.17871-.97531-1.78992-2.20596-3.89703-2.99805,2.11639-.55804,4.09552-1.53036,4.02991-2.49228-.09351-1.37027-4.30072-2.19919-6.99231-2.01553-.15497,.01056-.3006,.02463-.43921,.04132,2.30585-1.3985,5.14258-4.28232,4.47894-5.43753-.4939-.85974-2.79156-.52673-4.91144,.2305,1.25452-1.79355,2.13647-3.81458,1.46478-4.50623-.95691-.98526-4.70325,1.10098-6.63861,2.98053-.18018,.17499-.33813,.34195-.47601,.50177,.00696-.13718,.01099-.28073,.01099-.43323,0-2.69788-1.1134-6.83887-2.48688-6.83887-.96411,0-1.7995,2.04074-2.21216,4.19025-.93365-2.04828-2.29547-3.92859-3.25635-3.68393-1.14856,.29245-1.34802,3.52484-.95349,6.08563-2.02661-1.64374-4.99622-3.1308-5.83295-2.26923-.67169,.69165,.21027,2.71268,1.46478,4.50623-2.11987-.75723-4.41754-1.09024-4.91144-.2305-.53729,.93518,1.21948,3.00293,3.13147,4.49875-2.53485,.11649-5.47321,.88214-5.55115,2.02481-.06561,.96191,1.91351,1.93423,4.02991,2.49228-2.10712,.79208-4.07568,2.02277-3.89703,2.99805,.21686,1.18369,3.52466,1.59805,6.12543,1.3555-1.94299,1.8642-4.0498,5.20374-3.17059,6.18246,.64435,.71722,2.7207-.02515,4.59552-1.15463-.89978,2.06339-1.38849,4.33304-.56433,4.88434,1.03137,.68994,3.76532-1.54755,5.38983-3.63962-.23828,2.6712,.31866,6.43002,1.59613,6.60434,.98242,.13406,2.12213-1.88861,2.81738-4.0296,.20862,.66647,.45886,1.31668,.73389,1.89011l-.42535,19.32935c-.35345-1.43094-.93842-2.94705-1.87231-4.44519l-.06311,.03934c.08136-1.44589-.11139-7.75262-9.39935-9.64389-2.19055-.44604-4.24988-.75089-6.13757-.95401l.00018-.00006Zm16.93048,39.62045l-.06958,3.16229c-.06366-.88736-.07074-1.96661,.06958-3.16229Z" fill="#f2f2f2"/><path d="M691.10928,320.50921H1.57104c-.87128,0-1.57104,.69977-1.57104,1.57108,0,.8714,.69971,1.57108,1.57104,1.57108H691.10928c.87138,0,1.57114-.69968,1.57114-1.57108s-.69975-1.57108-1.57114-1.57108Z" fill="#3f3d56"/><polygon points="187.55029 118.17785 198.6011 79.07493 225.80316 79.92498 235.15384 111.37732 187.55029 118.17785" fill="#ffb6b6"/><path d="M193.3963,106.99901l-.00003,.00002s-8.07559-2.12517-23.37674,17.4263c-15.30115,19.55144-8.50061,158.96187-8.50061,158.96187l110.93329-25.07687-29.0288-99.9399-5.8238-53.07155-44.20331,1.70013v.00002Z" fill="#6c63ff"/><g><path id="uuid-b9858c30-f397-4403-a0fe-0b031a3a9912-54" d="M366.45686,142.90533l-36.49368,21.12966,8.01522,14.73706,37.21484-20.36362c3.9959-.20038,7.88572-1.3548,11.34401-3.36667,8.72489-4.91682,13.25945-13.39999,10.13164-18.95069-3.1278-5.55071-12.73366-6.06558-21.45478-1.14934-3.51317,1.91705-6.51604,4.64778-8.75724,7.96361Z" fill="#ffb6b6"/><polygon points="191.56717 146.19036 267.57108 215.8051 372.23734 165.16674 359.1078 139.0705 284.35672 168.70453 212.68449 111.00562 191.56717 146.19036" fill="#6c63ff"/></g><path d="M166.61932,268.08605l30.60229-48.45361s61.20456-61.20456,84.15628-56.10419c22.95172,5.10037,50.15375,101.15753,50.15375,101.15753l-22.95172,14.45108-40.80304-56.95425s-4.25034,78.20581-16.89084,95.20709c-12.6405,17.00128-63.86517,9.35071-82.56659,0s-1.70013-49.30368-1.70013-49.30368v.00003Z" fill="#2f2e41"/><polygon points="306.87979 268.93609 310.28003 285.08727 308.57993 295.28805 314.53036 307.18892 361.28384 312.2893 363.83405 290.18767 339.18219 277.4367 321.33087 259.58538 306.87979 268.93609" fill="#ffb6b6"/><path d="M357.88361,303.78869l-2.5502,3.40024-48.96231-14.10971s2.20883,21.76025,2.20883,26.01059,80.75604,4.25034,92.90793,2.5502c12.15189-1.7001,8.24963-12.75095,8.24963-12.75095l-50.39401-23.85458-1.45987,18.75418v.00003Z" fill="#2f2e41"/><g><polygon points="302.06534 154.01392 343.46597 157.62881 367.81832 150.19365 381.6064 133.35326 392.88104 94.71783 328.57131 65.67645 327.39671 65.14753 318.4853 66.00484 302.43614 152.02112 302.06534 154.01392" fill="#fd6982"/><polygon points="302.43614 152.02112 313.56487 153.53271 328.57131 65.67645 327.39671 65.14753 318.4853 66.00484 302.43614 152.02112" fill="#241f20" opacity=".2"/><path d="M306.60485,159.99427c-1.61721-.128-3.08913-.95557-4.03858-2.27041s-1.27193-2.97262-.88449-4.54823l2.0967-8.52495,.19141,.02588c.11414,.01516,11.54737,1.53996,24.71786,2.09437,17.40542,.73277,29.9255-.55355,36.20647-3.72016,15.46956-7.80306,24.41796-49.93003,24.50639-50.35472l.04085-.19665,3.36381,.46595c1.5216,.21131,2.85763,1.011,3.76127,2.25216,.90181,1.2381,1.25202,2.75029,.98683,4.25777-2.07179,11.78037-8.84895,40.39035-26.98637,51.59762-.17768,.10969-.35479,.21707-.53527,.32452-18.20284,10.83457-50.35468,9.62998-63.42686,8.59685Z" fill="#3f3d58"/></g><g><path id="uuid-89ceabf5-3d72-4b0e-954e-73915df3a7c3-55" d="M354.47742,147.35355c-3.60071,1.74715-6.73051,4.33139-9.12745,7.53648l-37.46074,19.36345,7.30257,15.10287,38.14453-18.56385c4.00091-.0094,7.94143-.97681,11.49181-2.82129,8.94968-4.49473,13.884-12.75178,11.02474-18.44545-2.85926-5.69367-12.42957-6.66652-21.37543-2.17222l-.00003,.00002Z" fill="#ffb6b6"/><polygon points="170.50291 149.82247 243.09692 222.98611 350.06122 177.40199 338.1924 150.70874 262.11191 176.74053 193.27579 115.68595 170.50291 149.82247" fill="#6c63ff"/></g><circle cx="213.62604" cy="55.12785" r="39.39541" fill="#ffb6b6"/><path d="M200.93696,57.67721c.05771,.00986,.1442,.0245,.24904,.04185,2.05136,.33957,14.45374,2.25308,26.95784-2.51012,5.29715-2.01785,3.49015-2.52077,15.28773-9.53614,13.83138-8.22473,17.38101-8.16726,18.41101-12.0023,2.05667-7.65797-8.92542-19.69644-16.19439-18.90382-1.91376,.20869-3.96328,1.34963-7.15104,.57599-.70038-.16997-3.76626-.91402-5.26088-3.4518-1.33332-2.26389-.20403-3.89699-.74025-5.7537-1.40748-4.87362-13.14017-7.30582-23.42653-5.58734-5.91628,.98842-10.51802,3.68683-19.47981,9.04331-15.59837,9.32311-23.39748,13.98468-25.15035,21.12671-1.66142,6.76935,2.32619,9.68619-.57391,16.93256-2.70041,6.74725-6.98935,6.29661-8.46524,11.75484-2.37505,8.78336,6.44004,18.42314,10.11211,22.4388,4.02599,4.40267,7.87633,6.81902,12.98792,10.02686,6.41596,4.02642,9.62385,6.03962,13.48076,5.83479,6.99272-.37136,13.94788-6.70843,14.21893-12.49513,.10155-2.16864-.80314-2.81903-3.04218-10.2743-.93279-3.10603-1.57983-5.67019-1.97334-7.31533" fill="#2f2e41"/></svg>
</div>
<p>Replace yoyr regular desk at work with a standing desk to reduce the amount of sedentary time in your day.</p>
</div>
<div class="card card__2">
<h3>Get maximum workout</h3>
<div><span>Swimming</span></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<circle cx="128" cy="128" r="128" fill="transparent" stroke="white" stroke-width="20" stroke-opacity=".2" />
<circle class="broderie" cx="128" cy="128" r="128" fill="transparent" stroke="white" stroke-width="20" stroke-opacity=".8" stroke-linecap="round" />
</svg>
<p>Burn calories the easy way and get tracking</p>
</div>
</div>
<div class="detail">
<div class="title">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="96" fill="none" stroke="white" stroke-miterlimit="10" stroke-width="16"/><circle cx="128" cy="128" r="64" fill="none" stroke="white" stroke-miterlimit="10" stroke-width="16"/></svg>
<h2>Multiple pages with unique content</h2>
</div>
<div class="learn__more">
<p>Build a website without writing a single line of code using Framer components and customizing the entire content</p>
<button>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M176,128h48a8,8,0,0,1,8,8v64a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V136a8,8,0,0,1,8-8H80" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="128" y1="24" x2="128" y2="128" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="80 80 128 128 176 80" fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="188" cy="168" r="12" fill="white" /></svg>
<span>Download</span>
</button>
</div>
<div class="sup">
Grow your business, reach new audiences, and hit your goals with integrations.
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="footer">
<div class="footer__container">
<div class="contacts">
<div class="social__media">
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="32 176 128 232 224 176" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polyline points="32 128 128 184 224 128" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><polygon points="32 80 128 136 224 80 128 24 32 80" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Components</span>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><rect x="24" y="56" width="208" height="144" rx="8" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168" y1="168" x2="200" y2="168" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="120" y1="168" x2="136" y2="168" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="24" y1="96.9" x2="232" y2="96.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Pricing</span>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M168,224H56a8,8,0,0,1-8-8V72a8,8,0,0,1,8-8h80l40,40V216A8,8,0,0,1,168,224Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M80,64V40a8,8,0,0,1,8-8h80l40,40V184a8,8,0,0,1-8,8H176" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="152" x2="136" y2="152" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="88" y1="184" x2="136" y2="184" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Updates</span>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="96" cy="144" r="12" fill="#fff" /><circle cx="160" cy="144" r="12" fill="#fff" /><path d="M74.4,80A174.9,174.9,0,0,1,128,72a174.9,174.9,0,0,1,53.6,8" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M181.6,176a174.9,174.9,0,0,1-53.6,8,174.9,174.9,0,0,1-53.6-8" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M155,182.1l12.1,24a7.8,7.8,0,0,0,9,4.2c24.5-6,45.7-16.4,61.1-29.8a8.1,8.1,0,0,0,2.4-8.4L205.7,58.9a7.7,7.7,0,0,0-4.7-5.1,176.4,176.4,0,0,0-29.6-9.2,8.1,8.1,0,0,0-9.4,5.3l-7.9,23.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M101,182.1l-12.1,24a7.8,7.8,0,0,1-9,4.2c-24.5-6-45.7-16.4-61.1-29.8a8.1,8.1,0,0,1-2.4-8.4L50.3,58.9A7.7,7.7,0,0,1,55,53.8a176.4,176.4,0,0,1,29.6-9.2A8.1,8.1,0,0,1,94,49.9l7.9,23.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="96" cy="144" r="12" fill="#fff" /><circle cx="160" cy="144" r="12" fill="#fff" /><path d="M74.4,80A174.9,174.9,0,0,1,128,72a174.9,174.9,0,0,1,53.6,8" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M181.6,176a174.9,174.9,0,0,1-53.6,8,174.9,174.9,0,0,1-53.6-8" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M155,182.1l12.1,24a7.8,7.8,0,0,0,9,4.2c24.5-6,45.7-16.4,61.1-29.8a8.1,8.1,0,0,0,2.4-8.4L205.7,58.9a7.7,7.7,0,0,0-4.7-5.1,176.4,176.4,0,0,0-29.6-9.2,8.1,8.1,0,0,0-9.4,5.3l-7.9,23.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M101,182.1l-12.1,24a7.8,7.8,0,0,1-9,4.2c-24.5-6-45.7-16.4-61.1-29.8a8.1,8.1,0,0,1-2.4-8.4L50.3,58.9A7.7,7.7,0,0,1,55,53.8a176.4,176.4,0,0,1,29.6-9.2A8.1,8.1,0,0,1,94,49.9l7.9,23.9" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Discord</span>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polygon points="160 128 112 96 112 160 160 128" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M24,128c0,29.8,3.1,47.2,5.4,56.2A16.1,16.1,0,0,0,39,195.1c33.5,12.8,89,12.5,89,12.5s55.5.3,89-12.5a16.1,16.1,0,0,0,9.6-10.9c2.3-9,5.4-26.4,5.4-56.2s-3.1-47.2-5.4-56.2A16.1,16.1,0,0,0,217,60.9c-33.5-12.8-89-12.5-89-12.5s-55.5-.3-89,12.5a16.1,16.1,0,0,0-9.6,10.9C27.1,80.8,24,98.2,24,128Z" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
<span>Youtube</span>
</a>
<a href="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><circle cx="128" cy="128" r="40" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="16"/><rect x="36" y="36" width="184" height="184" rx="48" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="180" cy="76" r="12" fill="#fff" /></svg>
<span>instagram</span>
</a>
</div>
<div class="newsletter">
<div class="newsletter__container">
<h4>Subscribe to our newsletter</h4>
<form action="" method="post">
<input type="email" placeholder="[email protected]" name="" value="">
<input type="submit" value="Sign Up">
</form>
<span>Product updates. news and promotions. No spam ever.</span>
</div>
</div>
</div>
<div class="copyright">
<span>
<span>Designed by <a href="">DesignCode</a> & Built <a href="">Moussa Dieng</a></span>
</span>
</div>
</div>
</div>
</footer>
<script src="./src/JS/index.js"></script>
</body>
</html>