-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (112 loc) · 16.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Technical -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="manifest.json">
<link rel="icon" href="./static/image/llll-favicon.svg" type="image/svg+xml">
<meta name="msapplication-TileColor" content="#33ff00">
<meta name="msapplication-TileImage" content="static/image/llll-logo.svg">
<link rel="mask-icon" href="./static/image/llll-favicon.svg" color="red">
<link rel="apple-touch-icon" href="./static/image/llll-192.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>Lean Low-Level Lessons</title>
<!-- Styles -->
<link rel="stylesheet" href="static/theme/default/reset.css" data-theme="default">
<link rel="stylesheet" href="static/theme/default/font.css" data-theme="default">
<link rel="stylesheet" href="static/theme/default/main.css" data-theme="default">
<link rel="stylesheet" href="static/theme/default/variant/dark.css" media="(prefers-color-scheme: dark)" data-theme-variant="dark">
<link rel="stylesheet" href="static/theme/default/variant/light.css" media="(not (prefers-color-scheme: dark))" data-theme-variant="light">
<link rel="stylesheet" href="static/theme/default/external/highlight/one-dark.min.css" media="(prefers-color-scheme: dark)" data-theme-variant="dark">
<link rel="stylesheet" href="static/theme/default/external/highlight/one-light.min.css" media="(not (prefers-color-scheme: dark))" data-theme-variant="light">
<!-- Scripts -->
<script src="static/lib/main.js" type="module"></script>
<script src="static/lib/external/highlight/highlight.min.js" type="module"></script>
<!-- SEO -->
<meta name="author" content="Lean Low-Level Lessons">
<meta name="description" content="Quality lessons for low-level web development in short and easy to understand videos and examples.">
<meta name="keywords" content="low-level, web development, html, css, javascript, nginx">
<meta name="language" content="English">
<meta name="revisit-after" content="7 days">
<meta name="robots" content="index, follow">
<!-- Social Media -->
<meta property="og:title" content="Lean Low-Level Lessons">
<meta property="og:image" content="/static/image/og-image.jpg">
<meta property="og:description" content="Quality lessons for low-level web development in short and easy to understand videos and examples.">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="/static/image/og-image.jpg">
<meta name="twitter:title" content="Lean Low-Level Lessons">
<meta name="twitter:description" content="Quality lessons for low-level web development in short and easy to understand videos and examples.">
</head>
<body>
<aside class="site-banner">
You can safely ignore this banner.
</aside>
<header class="site-header">
<section class="start">
start
</section>
<section class="center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, ex!
</section>
<section class="end">
<nav class="site-nav">
<a href="index.html">Home</a>
<a href="blog.html">Blog</a>
<a href="contact.html">Contact</a>
</nav>
</section>
</header>
<main class="site-content">
<button class="add-serial-device">Add Serial Device</button>
<ul class="serial-devices"></ul>
<div class="wrapper">
<!-- <div id="blob-02">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#FFF6E3" transform="translate(100 100)">
<animate attributeName="d" dur="5000ms" repeatCount="indefinite" values="M47.1,-69.7C57.8,-57.1,61.1,-39,64.2,-22.5C67.3,-6,70.3,8.9,64.8,19.5C59.2,30.1,45.2,36.5,32.9,45.3C20.7,54.2,10.4,65.6,-2.6,69.1C-15.5,72.7,-31.1,68.5,-45.4,60.3C-59.6,52.1,-72.6,39.9,-76.4,25.5C-80.3,11,-74.9,-5.8,-65.8,-17.6C-56.7,-29.3,-43.9,-36,-32.3,-48.3C-20.7,-60.6,-10.3,-78.5,3.9,-83.9C18.2,-89.3,36.4,-82.2,47.1,-69.7Z;M44.5,-60.7C55.1,-53.6,59.3,-37.1,64.5,-21C69.6,-4.9,75.8,10.9,70.6,21.7C65.4,32.6,48.9,38.6,35.2,49.6C21.6,60.7,10.8,76.9,0,77C-10.8,77,-21.6,60.8,-30.2,48.1C-38.8,35.4,-45.1,26,-53,14.3C-60.9,2.5,-70.3,-11.7,-68.4,-23.7C-66.5,-35.7,-53.3,-45.4,-40,-51.6C-26.7,-57.9,-13.4,-60.6,1.8,-63.1C17,-65.5,34,-67.8,44.5,-60.7Z;M45.1,-63.4C53.9,-55.7,53.5,-36.4,59.4,-19.1C65.4,-1.7,77.8,13.8,78,29.1C78.1,44.3,66.1,59.4,51.1,63C36.1,66.5,18,58.6,3.1,54.4C-11.8,50.1,-23.6,49.4,-39.1,46C-54.5,42.5,-73.6,36.3,-81.2,23.8C-88.9,11.3,-85.2,-7.6,-76.7,-22.2C-68.3,-36.9,-55.1,-47.3,-41.5,-53.5C-28,-59.6,-14,-61.5,2.1,-64.3C18.1,-67.2,36.3,-71.1,45.1,-63.4Z; M47.1,-69.7C57.8,-57.1,61.1,-39,64.2,-22.5C67.3,-6,70.3,8.9,64.8,19.5C59.2,30.1,45.2,36.5,32.9,45.3C20.7,54.2,10.4,65.6,-2.6,69.1C-15.5,72.7,-31.1,68.5,-45.4,60.3C-59.6,52.1,-72.6,39.9,-76.4,25.5C-80.3,11,-74.9,-5.8,-65.8,-17.6C-56.7,-29.3,-43.9,-36,-32.3,-48.3C-20.7,-60.6,-10.3,-78.5,3.9,-83.9C18.2,-89.3,36.4,-82.2,47.1,-69.7Z"></animate>
</path>
</svg>
</div>
<div id="blob-01">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#FFECDB" transform="translate(100 100)">
<animate attributeName="d" dur="5000ms" repeatCount="indefinite" values="M47.1,-69.7C57.8,-57.1,61.1,-39,64.2,-22.5C67.3,-6,70.3,8.9,64.8,19.5C59.2,30.1,45.2,36.5,32.9,45.3C20.7,54.2,10.4,65.6,-2.6,69.1C-15.5,72.7,-31.1,68.5,-45.4,60.3C-59.6,52.1,-72.6,39.9,-76.4,25.5C-80.3,11,-74.9,-5.8,-65.8,-17.6C-56.7,-29.3,-43.9,-36,-32.3,-48.3C-20.7,-60.6,-10.3,-78.5,3.9,-83.9C18.2,-89.3,36.4,-82.2,47.1,-69.7Z;M44.5,-60.7C55.1,-53.6,59.3,-37.1,64.5,-21C69.6,-4.9,75.8,10.9,70.6,21.7C65.4,32.6,48.9,38.6,35.2,49.6C21.6,60.7,10.8,76.9,0,77C-10.8,77,-21.6,60.8,-30.2,48.1C-38.8,35.4,-45.1,26,-53,14.3C-60.9,2.5,-70.3,-11.7,-68.4,-23.7C-66.5,-35.7,-53.3,-45.4,-40,-51.6C-26.7,-57.9,-13.4,-60.6,1.8,-63.1C17,-65.5,34,-67.8,44.5,-60.7Z;M45.1,-63.4C53.9,-55.7,53.5,-36.4,59.4,-19.1C65.4,-1.7,77.8,13.8,78,29.1C78.1,44.3,66.1,59.4,51.1,63C36.1,66.5,18,58.6,3.1,54.4C-11.8,50.1,-23.6,49.4,-39.1,46C-54.5,42.5,-73.6,36.3,-81.2,23.8C-88.9,11.3,-85.2,-7.6,-76.7,-22.2C-68.3,-36.9,-55.1,-47.3,-41.5,-53.5C-28,-59.6,-14,-61.5,2.1,-64.3C18.1,-67.2,36.3,-71.1,45.1,-63.4Z; M47.1,-69.7C57.8,-57.1,61.1,-39,64.2,-22.5C67.3,-6,70.3,8.9,64.8,19.5C59.2,30.1,45.2,36.5,32.9,45.3C20.7,54.2,10.4,65.6,-2.6,69.1C-15.5,72.7,-31.1,68.5,-45.4,60.3C-59.6,52.1,-72.6,39.9,-76.4,25.5C-80.3,11,-74.9,-5.8,-65.8,-17.6C-56.7,-29.3,-43.9,-36,-32.3,-48.3C-20.7,-60.6,-10.3,-78.5,3.9,-83.9C18.2,-89.3,36.4,-82.2,47.1,-69.7Z"></animate>
</path>
</svg>
</div>
<div id="blob-03">
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path fill="#ECBBAE" transform="translate(100 100)">
<animate attributeName="d" dur="5000ms" repeatCount="indefinite" values="M47.1,-69.7C57.8,-57.1,61.1,-39,64.2,-22.5C67.3,-6,70.3,8.9,64.8,19.5C59.2,30.1,45.2,36.5,32.9,45.3C20.7,54.2,10.4,65.6,-2.6,69.1C-15.5,72.7,-31.1,68.5,-45.4,60.3C-59.6,52.1,-72.6,39.9,-76.4,25.5C-80.3,11,-74.9,-5.8,-65.8,-17.6C-56.7,-29.3,-43.9,-36,-32.3,-48.3C-20.7,-60.6,-10.3,-78.5,3.9,-83.9C18.2,-89.3,36.4,-82.2,47.1,-69.7Z;M44.5,-60.7C55.1,-53.6,59.3,-37.1,64.5,-21C69.6,-4.9,75.8,10.9,70.6,21.7C65.4,32.6,48.9,38.6,35.2,49.6C21.6,60.7,10.8,76.9,0,77C-10.8,77,-21.6,60.8,-30.2,48.1C-38.8,35.4,-45.1,26,-53,14.3C-60.9,2.5,-70.3,-11.7,-68.4,-23.7C-66.5,-35.7,-53.3,-45.4,-40,-51.6C-26.7,-57.9,-13.4,-60.6,1.8,-63.1C17,-65.5,34,-67.8,44.5,-60.7Z;M45.1,-63.4C53.9,-55.7,53.5,-36.4,59.4,-19.1C65.4,-1.7,77.8,13.8,78,29.1C78.1,44.3,66.1,59.4,51.1,63C36.1,66.5,18,58.6,3.1,54.4C-11.8,50.1,-23.6,49.4,-39.1,46C-54.5,42.5,-73.6,36.3,-81.2,23.8C-88.9,11.3,-85.2,-7.6,-76.7,-22.2C-68.3,-36.9,-55.1,-47.3,-41.5,-53.5C-28,-59.6,-14,-61.5,2.1,-64.3C18.1,-67.2,36.3,-71.1,45.1,-63.4Z; M47.1,-69.7C57.8,-57.1,61.1,-39,64.2,-22.5C67.3,-6,70.3,8.9,64.8,19.5C59.2,30.1,45.2,36.5,32.9,45.3C20.7,54.2,10.4,65.6,-2.6,69.1C-15.5,72.7,-31.1,68.5,-45.4,60.3C-59.6,52.1,-72.6,39.9,-76.4,25.5C-80.3,11,-74.9,-5.8,-65.8,-17.6C-56.7,-29.3,-43.9,-36,-32.3,-48.3C-20.7,-60.6,-10.3,-78.5,3.9,-83.9C18.2,-89.3,36.4,-82.2,47.1,-69.7Z"></animate>
</path>
</svg>
</div> -->
</div>
<h1>Lean Low-Level Lessons</h1>
<x-code-box value="3">Fuck off!</x-code-box>
<p>Easy to understand tutorials for the native web platform</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis magni impedit consectetur vel pariatur minus magnam nesciunt odit velit quia libero aspernatur iste ex maiores, numquam nulla et? Saepe enim nesciunt quia animi vel harum illo laborum, culpa blanditiis illum unde, maiores earum alias eligendi quas vitae delectus in aspernatur. Fugit soluta quisquam esse blanditiis maiores magnam ipsum ea consectetur aut consequuntur officia, tempore eum praesentium nihil reiciendis facere adipisci sequi commodi quos expedita? Voluptatibus, eos consequatur officiis non expedita laudantium sunt fugit nesciunt nobis deleniti voluptatem at? Ad corporis fuga voluptates, obcaecati aliquid, necessitatibus alias sit ullam commodi vel repellat dolorum. Praesentium animi repellendus assumenda tenetur. Sit unde voluptate fuga quis debitis delectus nisi, voluptates ex iusto deleniti rem perferendis incidunt omnis iure fugiat temporibus totam quidem culpa minima! Sit, adipisci ut! Error eveniet officiis doloremque magnam facilis, rem nisi esse molestiae, adipisci sequi ut deserunt ullam nemo repellendus expedita, amet velit a exercitationem libero! Doloremque laborum, cumque animi iusto enim soluta nesciunt pariatur quae. Est maiores mollitia asperiores ex ad consectetur facere reprehenderit autem incidunt tenetur, a corrupti, hic esse cumque praesentium, voluptates dolores. Voluptas, a consequatur eligendi, dolor inventore necessitatibus quod vitae nemo animi omnis, accusamus suscipit magni! Consectetur exercitationem explicabo maiores tempore ex commodi, omnis iure obcaecati quam officia odio aspernatur suscipit a quae ab voluptas veritatis recusandae aliquid quisquam vel, delectus, fugit dolorem quaerat! Illo autem voluptatibus ipsam! Corporis, eveniet reiciendis molestiae repudiandae optio dolorem sed eum esse sit id earum laboriosam illo minus. Quibusdam aliquam sit esse velit, nihil quod enim possimus? Minima inventore laboriosam, sed dicta harum, laudantium, atque tenetur ex sint excepturi quod beatae modi pariatur accusantium nam obcaecati facilis. Voluptatem culpa quis, accusamus nulla deserunt dignissimos ratione eligendi ab ipsa modi veritatis. Ipsum, reiciendis. Exercitationem quibusdam, deserunt ratione sunt mollitia voluptatibus animi culpa tempore. Accusantium nulla deleniti voluptas voluptatum veniam tenetur iusto, quia distinctio minima odio ratione quibusdam saepe commodi, sequi aut modi quasi! Mollitia cupiditate corporis voluptate! Natus adipisci autem facilis sapiente totam amet doloribus suscipit illo ut iure cum animi temporibus at beatae nihil ea voluptatibus, sit deserunt magni aliquid enim! Distinctio aliquam nesciunt repellat mollitia natus culpa, commodi eaque explicabo maxime a ab esse quos possimus aspernatur sunt nobis. Aut eligendi deleniti, nemo odio nam recusandae rem laborum? Delectus aliquid magnam similique repellat sit ad culpa laboriosam inventore, voluptas doloribus minima suscipit maiores quidem deserunt quaerat ullam assumenda sed molestiae ut impedit exercitationem! Iure provident dolor facere, repellat quis quaerat sapiente, corrupti laudantium architecto nisi, molestias similique optio dolorum minima accusantium magni exercitationem natus ex debitis beatae itaque reprehenderit mollitia perspiciatis recusandae! Cupiditate eos excepturi fuga? Ipsa quam dignissimos doloribus velit corporis itaque ipsum cumque consequuntur cupiditate? Autem necessitatibus, non a aspernatur hic qui beatae praesentium iure. Obcaecati nulla nostrum reiciendis veniam minus, deserunt at. Voluptatum cum vitae modi dolorum assumenda dolores nam perferendis deserunt dolore aut autem blanditiis illo accusamus, eos sunt id eveniet ullam impedit numquam! Est, temporibus hic! Atque repellendus in iste quibusdam fugiat. Dignissimos, itaque tenetur. Nulla, voluptatem magnam dicta esse dolor hic reiciendis modi assumenda veritatis nemo adipisci quos explicabo quas iste tempore officia ipsam tenetur nihil impedit odio quia perferendis quod! At corrupti reiciendis est praesentium blanditiis similique obcaecati repudiandae, ratione, corporis fugit quasi ullam id veniam aliquid officiis vitae libero ipsa modi iusto, ea aut! Ducimus similique rem corrupti reprehenderit blanditiis laudantium libero, dolores assumenda. Autem hic magnam ut aliquam odit itaque maxime modi dolorum corrupti cupiditate id, earum officiis tempora alias veniam facilis. Sit nam impedit quasi fugit magni repudiandae ullam nihil deserunt, earum sequi ipsa vero labore beatae reiciendis. Blanditiis vel deserunt hic pariatur, ea, harum quibusdam ipsam qui perspiciatis exercitationem velit. Aperiam necessitatibus voluptate, accusamus mollitia corrupti id beatae eaque esse velit perspiciatis obcaecati delectus perferendis dolore! Maiores voluptatum unde ullam cumque eum. Est eaque, eos, qui, magnam dolorum deleniti eius delectus nobis consectetur in tempora! Nam temporibus hic, reprehenderit facilis qui perferendis obcaecati velit vel minus deserunt voluptatum dolorem voluptates dicta ex aspernatur recusandae nostrum aliquam fugiat exercitationem tempore mollitia ratione illum fugit. Quia vitae doloremque sed deleniti, corporis dolore sapiente accusamus tempore minima, totam rem accusantium, possimus facere ullam mollitia consequuntur vel officiis. Soluta asperiores placeat perspiciatis quo sed quam esse maiores porro modi voluptas minima consequatur aperiam ut sunt officiis dicta incidunt tenetur et, ratione veritatis minus. Dolorem quidem explicabo hic nobis neque voluptas, eligendi eum, vel, quod consequatur repellendus quisquam officiis cumque! Fugit repudiandae natus, voluptas error placeat mollitia ducimus a quisquam. Necessitatibus vero magnam, fugit culpa recusandae, pariatur placeat facere error rem, totam dolores perferendis modi cum in ipsa eos repellendus eaque veritatis corporis! Quia temporibus fugiat voluptate accusamus autem? Adipisci omnis deserunt delectus natus magni sequi laudantium molestiae magnam reiciendis! Fugiat perspiciatis dignissimos minima voluptate cupiditate officiis esse earum dolor quidem deserunt. Sint accusamus ullam dolorum aut tenetur totam adipisci ipsam blanditiis et laudantium. Aliquam, eaque natus a ipsa voluptates facilis iste veniam alias dolorum delectus laboriosam illo distinctio odio enim ut eum consequatur laborum tempora vel commodi vitae? Atque vero, et nemo sunt molestiae hic excepturi nostrum eveniet officia natus dolores omnis harum exercitationem! Blanditiis iusto neque quis dolor, tempora consectetur modi totam, aliquid consequatur repellendus recusandae eaque sunt, ex soluta enim quaerat quo voluptatem? Illum, soluta commodi quos sapiente veniam provident quia et alias! Cupiditate maxime quia commodi quae aut soluta natus, nemo aperiam quos laborum error ea ad quod unde assumenda voluptatem consequatur facere sed et asperiores dolorum repellat aliquam. Quia ea, minima error libero veritatis obcaecati temporibus in aliquid sed dicta vel, consectetur quaerat doloribus aut a, cumque minus quos voluptatum. Aliquam veritatis soluta est a magni. Reiciendis dolore sint molestiae perspiciatis doloremque non saepe. Est fugit animi incidunt quisquam repellendus voluptas voluptatem ipsa odit. Tenetur error culpa harum laboriosam a fugiat! Vero autem adipisci reiciendis nostrum totam necessitatibus labore assumenda veritatis fugit excepturi earum ducimus eaque recusandae illo error, id dolores magni vel delectus blanditiis aliquid perspiciatis libero repellendus. Corrupti possimus ad accusantium labore saepe libero totam.
</main>
<nav aria-label="Footer" class="site-footer-nav">
<a href="index.html">Home</a>
<a href="blog.html">Blog</a>
<a href="contact.html">Contact</a>
<a>Imprint</a>
</nav>
<footer class="site-footer">
<section class="start">
Want to stay up to date? Leave your email address here to receive my free newsletter.
<input type="text">
<input type="submit" value="Subscribe">
</section>
<section class="end">
© Lean Low-Level Lessons
</section>
</footer>
</body>
</html>