-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
506 lines (503 loc) · 24.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
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
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design Teardown - Heatmap</title>
<link rel="stylesheet" href="assets/CSS/reset.css">
<link rel="stylesheet" href="assets/CSS/main.css">
<link
href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;1,200;1,300;1,400;1,600;1,700;1,800&display=swap"
rel="stylesheet">
</head>
<body>
<header class="header d-flex">
<a href="#" class="logo-link">
<img class="logo" src="assets/images/logo--full.svg" alt="logo">
</a>
<nav class="nav">
<ul class="nav-links">
<li class="nav-links-links"><a href="#">Articles</a></li>
<li class="nav-links-links"><a href="#">Guides</a></li>
<li class="nav-links-links"><a href="#">Books</a></li>
<li class="nav-links-links"><a href="#">Events</a></li>
<li class="nav-links-links"><a href="#">Membership</a></li>
<li class="nav-links-links"><a href="#">Jobs</a></li>
<li class="nav-links-links more-nav"><a href="#" class="d-flex "> More <img class="cat-img"
src="assets/images/menu-cat.svg" alt="catIcon"></a></li>
</ul>
</nav>
<div class="search-bar">
<form class="search-form" action="#" method="post">
<input class="search-box" type="search" name="search-box" id="search-box" placeholder="Search articles...">
</form>
</div>
</header>
<main>
<section class="top-section">
<div class="d-flex top-section-header">
<div class="main-title d-flex">
<h1>Don't Miss These Latest</h1>
<span>Articles</span>
</div>
<div class="change-theme d-flex">
<div class="square-button"></div>
<span>Seriously, red?</span>
</div>
</div>
<article class="top-section-article">
<div class="author d-flex">
<div class="top-image-container">
<img class="author-image" src="assets/images/iris-lj-200px.jpg" alt="Author-img">
</div>
<span class="author-name"><strong>Kelvin Omereshore</strong><em>wrote</em></span>
</div>
<div class="article-title-div">
<h2 class="article-title">Supercharge Testing React Applications With Wallaby.js</h2>
<img class="chatbox" src="assets/images/chatbox.svg" alt="chatbox">
<span> Leave a coment</span>
</div>
<ul class="hashtag-links">
<li>
<span>#</span>Apps<sup>521</sup>
</li>
<li>
<span>#</span>Tools<sup>251</sup>
</li>
<li>
<span>#</span>APIs<sup>292</sup>
</li>
</ul>
<a class="arrow-button" href="#">→</a>
</article>
<article class="top-section-article">
<div class="author d-flex">
<div class="top-image-container">
<img class="author-image" src="assets/images/iris-lj-200px.jpg" alt="Author-img">
</div>
<span class="author-name"><strong>Kelvin Omereshore</strong><em>wrote</em></span>
</div>
<div class="article-title-div">
<h2 class="article-title">Managing Long-Running Tasks In A React App With Web Workers</h2>
<img class="chatbox" src="assets/images/chatbox.svg" alt="chatbox">
<span>Leave a coment</span>
</div>
<ul class="hashtag-links">
<li>
<span>#</span>Apps<sup>521</sup>
</li>
<li>
<span>#</span>Tools<sup>251</sup>
</li>
<li>
<span>#</span>APIs<sup>292</sup>
</li>
</ul>
<a class="arrow-button" href="#">→</a>
</article>
<article class="top-section-article">
<div class="author d-flex">
<div class="top-image-container">
<img class="author-image" src="assets/images/iris-lj-200px.jpg" alt="Author-img">
</div>
<span class="author-name"><strong>Kelvin Omereshore</strong><em>wrote</em></span>
</div>
<div class="article-title-div">
<h2 class="article-title">Build And Deploy An Angular Form With Netlify Forms And Edge</h2>
<img class="chatbox" src="assets/images/chatbox.svg" alt="chatbox">
<span>Leave a coment</span>
</div>
<ul class="hashtag-links">
<li>
<span>#</span>Apps<sup>521</sup>
</li>
<li>
<span>#</span>Tools<sup>251</sup>
</li>
<li>
<span>#</span>APIs<sup>292</sup>
</li>
</ul>
<a class="arrow-button" href="#">→</a>
</article>
<article class="top-section-article">
<div class="author d-flex">
<div class="top-image-container">
<img class="author-image" src="assets/images/iris-lj-200px.jpg" alt="Author-img">
</div>
<span class="author-name"><strong>Kelvin Omereshore</strong><em>wrote</em></span>
</div>
<div class="article-title-div">
<h2 class="article-title">Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase</h2>
<img class="chatbox" src="assets/images/chatbox.svg" alt="chatbox">
<span>Leave a coment</span>
</div>
<ul class="hashtag-links">
<li>
<span>#</span>Apps<sup>521</sup>
</li>
<li>
<span>#</span>Tools<sup>251</sup>
</li>
<li>
<span>#</span>APIs<sup>292</sup>
</li>
</ul>
<a class="arrow-button" href="#">→</a>
</article>
</section>
<aside class="aside-section d-flex">
<div class="aside-info-wrapper d-flex">
<p class="aside-description">
All you want is a fast, secure web? That's why we use ad blockers, too,
you know. We gotta keep those servers running though... So we've set
up Membership for smart cookies like you. Coming up next:
</p>
<ul class="aside-list">
<li>Smashing TV Session with on “”,</li>
<li>New discounts on tools, services and tutorials,</li>
<li>...plus a seasoned selection of fancy cats.</li>
</ul>
<button class="button aside-btn" type="button">About Smashing Membership <span>→</span></button>
</div>
<a class="aside-link" href=""><img class="aside-link-img" src="assets/images/cat-firechat.svg"
alt="cat-fire-chat"></a>
</aside>
<section class="latest-posts">
<h4 class="section-titles-h4"><span>-------- Latest Posts</span></h4>
<article class="lastest-post-article">
<div class="g-wrapper">
<p class="published-date">4 days ago</p>
<h1 class="mid-article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="author-name">by <a>John Smith</a></p>
<p class="article-description">Lorem ipsum dolor sit amet,
no porro appareat officiis usu, nullam euripidis vulputate ad
nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
<a class="arrow" href="#">→</a>
</div>
</article>
<article class="lastest-post-article">
<div class="g-wrapper">
<p class="published-date">4 days ago</p>
<h1 class="mid-article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="author-name">by <a>John Smith</a></p>
<p class="article-description">Lorem ipsum dolor sit amet,
no porro appareat officiis usu, nullam euripidis vulputate ad
nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
<a class="arrow" href="#">→</a>
</div>
</article>
<article class="lastest-post-article">
<div class="g-wrapper">
<p class="published-date">4 days ago</p>
<h1 class="mid-article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="author-name">by <a>John Smith</a></p>
<p class="article-description">Lorem ipsum dolor sit amet,
no porro appareat officiis usu, nullam euripidis vulputate ad
nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
<a class="arrow" href="#">→</a>
</div>
</article>
<div class="shopify-ad">
<p class="friends">Our friends and suporters <span>↓</span></p>
<div class="ad-box">
<img
src="https://cats.smashing.services/catch?uri=https://res.cloudinary.com/indysigner/image/upload/c_scale,w_250/v1598870722/ads/ShopifyPartners-Panel.svg"
alt="Shopify-logo">
<p>Earn Recurring in nominavi partiendo delicatissimi eos</p>
<button class="shopify-button" type="button">SIGN UP TODAY <span>→</span></button>
</div>
</div>
<div class="special-div smashing-members">
<a href="#"><img src="assets/images/singing-barista.svg" alt="Cat with coffee"></a>
<h1 class="special-div-title">New on Smashing TV</h1>
<p class="special-div-description">orem ipsum dolor sit amet,
no porro appareat officiis usu, nullam euripidis vulputate ad
nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi</p>
<button class="button special-button" type="button">Explore features</button>
<p class="have-account">Already have an account? <a href="#">Sign in!</a></p>
</div>
<article class="lastest-post-article">
<div class="g-wrapper">
<p class="published-date">4 days ago</p>
<h1 class="mid-article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="author-name">by <a>John Smith</a></p>
<p class="article-description">Lorem ipsum dolor sit amet,
no porro appareat officiis usu, nullam euripidis vulputate ad
nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
<a class="arrow" href="#">→</a>
</div>
</article>
<article class="lastest-post-article">
<div class="g-wrapper">
<p class="published-date">4 days ago</p>
<h1 class="mid-article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="author-name">by <a>John Smith</a></p>
<p class="article-description">Lorem ipsum dolor sit amet,
no porro appareat officiis usu, nullam euripidis vulputate ad
nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
<a class="arrow" href="#">→</a>
</div>
</article>
<article class="lastest-post-article">
<div class="g-wrapper">
<p class="published-date">4 days ago</p>
<h1 class="mid-article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="author-name">by <a>John Smith</a></p>
<p class="article-description">Lorem ipsum dolor sit amet,
no porro appareat officiis usu, nullam euripidis vulputate ad
nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
<a class="arrow" href="#">→</a>
</div>
</article>
<article class="lastest-post-article">
<div class="g-wrapper">
<p class="published-date">4 days ago</p>
<h1 class="mid-article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="author-name">by <a>John Smith</a></p>
<p class="article-description">Lorem ipsum dolor sit amet,
no porro appareat officiis usu, nullam euripidis vulputate ad
nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
<a class="arrow" href="#">→</a>
</div>
</article>
<div class="special-div smashing-tv">
<a href="#"><img src="assets/images/cat-smashing-tv-2.svg" alt="Cat-smashing-tv"></a>
<h1 class="special-div-title">New on Smashing TV</h1>
<p>Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos</p>
<button class="button special-button" type="button">Explore features</button>
<p class="have-account">Already have an account? <a href="#">Sign in!</a></p>
</div>
<a class="more-links" href="#">SEE ALL LATEST ARTICLES <span>→</span></a>
</section>
<div class="big-blue-ad d-flex">
<div class="blue-ad-container d-flex">
<p class="shipping-date">JUNE 2020 • SHIPPING NOW</p>
<h1 class="special-div-title">Meet “Click!”: Encourage Clicks
Without Shady Tricks</h1>
<p>Our new book on how to <strong> boost business KPIs </strong>, build trust and address doubts <br>
effectively —
without alienating people along the way. By Paul Boag.</p>
<button class="button special-button" type="button">Jump to table of contents →</button>
<a class="big-blue-ad-img" href="#"><img src="assets/images/click__homepage-illustration.svg"
alt="Cat- homepage illustration"></a>
</div>
</div>
<section class="community-links">
<h4 class="section-titles-h4 community-links-title"><span>-------- Community Links</span></h4>
<div class="person-highlight d-flex">
<img class="person-highlight-picture"
src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68c1cc8b-2b07-488c-83d7-4b0534f3b9e3/ben-hong-opt.png"
alt="square">
<div class="bio d-flex">
<h2>PERSON OF THE WEEK</h2>
<p class="description">Lorem ipsum dolor sit amet,
no porro appareat officiis usu, nullam euripidis vulputate ad
nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos. Lorem ipsum dolor sit amet,
no porro appareat officiis usu, nullam euripidis vulputate ad
nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos. Lorem ipsum dolor sit amet,
no porro appareat officiis usu.</p>
</div>
</div>
<article class="community-links-article">
<img src="assets/images/iris-lj-200px.jpg" alt="Author-img">
<div class="article-info">
<span class="author-name"><strong>Kelvin Omereshore</strong><em>wrote</em></span>
<h1 class="article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="article-description"><span class="published-date">October 16, 2020 — </span>
Lorem ipsum dolor sit amet,
no porro appareat officiis usu, <a href="#">nullam euripidis</a> vulputate
ad nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
</div>
</article>
<article class="community-links-article">
<img src="assets/images/iris-lj-200px.jpg" alt="Author-img">
<div class="article-info">
<span class="author-name"><strong>Kelvin Omereshore</strong><em>wrote</em></span>
<h1 class="article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="article-description"><span class="published-date">October 16, 2020 — </span>
Lorem ipsum dolor sit amet,
no porro appareat officiis usu, <a href="#">nullam euripidis</a> vulputate
ad nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
</div>
</article>
<article class="community-links-article">
<img src="assets/images/iris-lj-200px.jpg" alt="Author-img">
<div class="article-info">
<span class="author-name"><strong>Kelvin Omereshore</strong><em>wrote</em></span>
<h1 class="article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="article-description"><span class="published-date">October 16, 2020 — </span>
Lorem ipsum dolor sit amet,
no porro appareat officiis usu, <a href="#">nullam euripidis</a> vulputate
ad nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
</div>
</article>
<article class="community-links-article">
<img src="assets/images/iris-lj-200px.jpg" alt="Author-img">
<div class="article-info">
<span class="author-name"><strong>Kelvin Omereshore</strong><em>wrote</em></span>
<h1 class="article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="article-description"><span class="published-date">October 16, 2020 — </span>
Lorem ipsum dolor sit amet,
no porro appareat officiis usu, <a href="#">nullam euripidis</a> vulputate
ad nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
</div>
</article>
<article class="community-links-article">
<img src="assets/images/iris-lj-200px.jpg" alt="Author-img">
<div class="article-info">
<span class="author-name"><strong>Kelvin Omereshore</strong><em>wrote</em></span>
<h1 class="article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="article-description"><span class="published-date">October 16, 2020 — </span>
Lorem ipsum dolor sit amet,
no porro appareat officiis usu, <a href="#">nullam euripidis</a> vulputate
ad nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
</div>
</article>
<article class="community-links-article">
<img src="assets/images/iris-lj-200px.jpg" alt="Author-img">
<div class="article-info">
<span class="author-name"><strong>Kelvin Omereshore</strong><em>wrote</em></span>
<h1 class="article-title"><a href="#">Lorem Ipsum Dolor Sit Amet</a></h1>
<p class="article-description"><span class="published-date">October 16, 2020 — </span>
Lorem ipsum dolor sit amet,
no porro appareat officiis usu, <a href="#">nullam euripidis</a> vulputate
ad nec, te pri epicurei adolescens instructior. Commodo iuvaret
invidunt qui et, in nominavi partiendo delicatissimi eos.</p>
</div>
</article>
<a class="more-links" href="#">MORE LINKS ON TWITTER <span>→</span></a>
</section>
<div class="special-div featured">
<div class="special-div-text d-flex">
<span>FEATURED SMASHING BOOK</span>
<h1 class="special-div-title">Design Systems</h1>
<p>Commodo iuvaret invidunt qui et, in nominavi partiendo delicatissimi eos React, Vue, or perhaps the
lightweight Alpine.js? Whether you are an experienced
JavaScript developer working. Te pri epicurei adolescens instructior</p>
<button class="button special-button" type="button">Jump to table of contents ↬</button>
</div>
<div>
<a href="#"><img src="assets/images/design-systems-hardcover-book.png" alt="Red book"></a>
</div>
</div>
<section class="our-guides">
<h4 class="section-titles-h4 our-guides-title"><span>-------- Our Guides</span></h4>
<article class="card">
<span>A SMASHING GUIDE TO</span>
<h1 class="card-title">JacaScript & Frameworks</h1>
<p>React, Vue, or perhaps the lightweight Alpine.js? Whether you are an experienced
JavaScript developer working with one of these frameworks, or just starting to learn,
our authors have created some tutorials for you.</p>
<button class="button special-button" type="button">Explore Javascript & Frameworks</button>
</article>
<article class="card">
<span>A SMASHING GUIDE TO</span>
<h1 class="card-title">JacaScript & Frameworks</h1>
<p>React, Vue, or perhaps the lightweight Alpine.js? Whether you are an experienced
JavaScript developer working with one of these frameworks, or just starting to learn,
our authors have created some tutorials for you.</p>
<button class="button special-button" type="button">Explore Javascript & Frameworks</button>
</article>
<article class="card">
<span>A SMASHING GUIDE TO</span>
<h1 class="card-title">JacaScript & Frameworks</h1>
<p>React, Vue, or perhaps the lightweight Alpine.js? Whether you are an experienced
JavaScript developer working with one of these frameworks, or just starting to learn,
our authors have created some tutorials for you.</p>
<button class="button special-button" type="button">Explore Javascript & Frameworks</button>
</article>
<article class="card newsletter">
<a href="#">
<h1 class="card-title">JacaScript & Frameworks</h1>
</a>
<p>React, Vue, or perhaps the lightweight Alpine.js? Whether you are an experienced
JavaScript developer working with one of these frameworks, or just starting to learn,
our authors have created some tutorials for you.</p>
<form class="newsletter-form d-flex" action="#" method="POST">
<input type="email" name="email" id="email" placeholder="Your email">
<span><input type="submit" value="Meow!"></span>
</form>
<p>Front-end, UX and design. 1× a week.
You can always unsubscribe with just 1 click.</p>
</article>
<a class="more-links" href="#">SEE ALL GUIDES <span>→</span></a>
</section>
</main>
<footer class="footer d-flex">
<h4 class="topics-title">BROWSE ALL SMASHING MAGAZINE TOPICS</h4>
<ul class="topic-links d-flex">
<li><a href="#">Topic1</a></li>
<li><a href="#">Topic2</a></li>
<li><a href="#">Topic3</a></li>
<li><a href="#">Topic4</a></li>
<li><a href="#">Topic5</a></li>
<li><a href="#">Topic6</a></li>
<li><a href="#">Topic7</a></li>
<li><a href="#">Topic8</a></li>
<li><a href="#">Topic9</a></li>
<li><a href="#">Topic10</a></li>
<li><a href="#">Topic11</a></li>
<li><a href="#">Topic12</a></li>
<li><a href="#">Topic13</a></li>
<li><a href="#">Topic14</a></li>
<li><a href="#">Topic15</a></li>
<li><a href="#">Topic16</a></li>
<li><a href="#">Topic17</a></li>
<li><a href="#">Topic18</a></li>
<li><a href="#">Topic19</a></li>
<li><a href="#">Topic20</a></li>
<li><a href="#">Topic21</a></li>
<li><a href="#">Topic22</a></li>
<li><a href="#">Topic23</a></li>
<li><a href="#">Topic24</a></li>
<li><a href="#">Topic25</a></li>
<li><a href="#">Topic26</a></li>
<li><a href="#">Topic27</a></li>
<li><a href="#">Topic28</a></li>
<li><a href="#">Topic29</a></li>
<li><a href="#">Topic30</a></li>
<li><a href="#">Topic31</a></li>
<li><a href="#">Topic32</a></li>
<li><a href="#">Topic33</a></li>
<li><a href="#">Topic34</a></li>
<li><a href="#">Topic35</a></li>
</ul>
<p>
<em> With a commitment to quality content for the design community. </em><br>
Founded by Vitaly Friedman and Sven Lennartz. 2006–2020. <br>
Smashing is proudly running on Netlify. <br>
Fonts by Latinotype.
</p>
<nav class="nav-footer">
<ul class="nav-footer-items d-flex">
<li>✎<a href="#">Write for us</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">About us (Impressum)</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Membership ligin</a></li>
<li><a href="#">Delivery times</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</nav>
<a href="#" class="back-to-top square-button">
</a>
</footer>
</body>
</html>