-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
309 lines (290 loc) · 19.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="LEARNDAILY is a platform for learning new skills online. We offer courses from various disciplines: art, science, business, and technology.">
<title>Learn Daily | Home</title>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Source+Sans+3&family=Work+Sans:wght@800&display=swap"
rel="stylesheet">
<!-- stylesheets -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- note: make nav transparent -->
<header>
<div class="container">
<h1><a href="index.html">learn by habit</a></h1>
<nav id="menu">
<ul>
<li><a href="#">courses</a></li>
<li><a href="#">rewards</a></li>
<li><a href="#">pricing</a></li>
<li><a href="#">resources</a></li>
<li><a href="#">blog</a></li>
</ul>
</nav>
<div>
<a class="login-button" href="#">
<!-- login button svg -->
<span>login</span>
<svg version="1.1" id="login-icon" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 402.161 402.161"
style="enable-background:new 0 0 402.161 402.161;" xml:space="preserve">
<path d="M201.08,49.778c-38.794,0-70.355,31.561-70.355,70.355c0,18.828,7.425,40.193,19.862,57.151
c14.067,19.181,32,29.745,50.493,29.745c18.494,0,36.426-10.563,50.494-29.745c12.437-16.958,19.862-38.323,19.862-57.151
C271.436,81.339,239.874,49.778,201.08,49.778z M201.08,192.029c-13.396,0-27.391-8.607-38.397-23.616
c-10.46-14.262-16.958-32.762-16.958-48.28c0-30.523,24.832-55.355,55.355-55.355s55.355,24.832,55.355,55.355
C256.436,151.824,230.372,192.029,201.08,192.029z" />
<path
d="M201.08,0C109.387,0,34.788,74.598,34.788,166.292c0,91.693,74.598,166.292,166.292,166.292
s166.292-74.598,166.292-166.292C367.372,74.598,292.773,0,201.08,0z M201.08,317.584c-30.099-0.001-58.171-8.839-81.763-24.052
c0.82-22.969,11.218-44.503,28.824-59.454c6.996-5.941,17.212-6.59,25.422-1.615c8.868,5.374,18.127,8.099,27.52,8.099
c9.391,0,18.647-2.724,27.511-8.095c8.201-4.97,18.39-4.345,25.353,1.555c17.619,14.93,28.076,36.526,28.895,59.512
C259.25,308.746,231.178,317.584,201.08,317.584z M296.981,283.218c-3.239-23.483-15.011-45.111-33.337-60.64
c-11.89-10.074-29.1-11.256-42.824-2.939c-12.974,7.861-26.506,7.86-39.483-0.004c-13.74-8.327-30.981-7.116-42.906,3.01
c-18.31,15.549-30.035,37.115-33.265,60.563c-33.789-27.77-55.378-69.868-55.378-116.915C49.788,82.869,117.658,15,201.08,15
c83.423,0,151.292,67.869,151.292,151.292C352.372,213.345,330.778,255.448,296.981,283.218z" />
<path d="M302.806,352.372H99.354c-4.142,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5h203.452c4.142,0,7.5-3.358,7.5-7.5
C310.307,355.73,306.948,352.372,302.806,352.372z" />
<path d="M302.806,387.161H99.354c-4.142,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5h203.452c4.142,0,7.5-3.358,7.5-7.5
C310.307,390.519,306.948,387.161,302.806,387.161z" />
</svg>
</a>
<button class="menu-button" aria-expanded="false" aria-label="navigation menu button" aria-controls="menu">
<!-- menu collapsed state -->
<svg version="1.1" id="open" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 484 340"
style="enable-background:new 0 0 484 340;" xml:space="preserve">
<path d="M446.32,340H37.01c-20.63,0-37.35-16.72-37.35-37.35v-1.31c0-20.63,16.72-37.35,37.35-37.35h409.31
c20.63,0,37.35,16.72,37.35,37.35v1.31C483.67,323.28,466.95,340,446.32,340z" />
<path d="M362.21,208H33.46c-18.66,0-33.79-15.13-33.79-33.79v-8.41c0-18.66,15.13-33.79,33.79-33.79h328.74
c18.66,0,33.79,15.13,33.79,33.79v8.41C396,192.87,380.87,208,362.21,208z" />
<path d="M446.32,76H37.01C16.39,76-0.33,59.28-0.33,38.65v-1.31C-0.33,16.72,16.39,0,37.01,0l409.31,0
c20.63,0,37.35,16.72,37.35,37.35v1.31C483.67,59.28,466.95,76,446.32,76z" />
</svg>
<!-- menu exapanded state -->
<svg version="1.1" id="close" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 484 340"
style="enable-background:new 0 0 484 340;" xml:space="preserve">
<path d="M344,318.5L93.5,68c-12.6-12.6-12.6-33.1,0-45.7l0.8-0.8c12.6-12.6,33.1-12.6,45.7,0L390.5,272c12.6,12.6,12.6,33.1,0,45.7
l-0.8,0.8C377.1,331.2,356.6,331.2,344,318.5z" />
<path d="M390.5,68L140,318.5c-12.6,12.6-33.1,12.6-45.7,0l-0.8-0.8c-12.6-12.6-12.6-33.1,0-45.7L344,21.5
c12.6-12.6,33.1-12.6,45.7,0l0.8,0.8C403.2,34.9,403.2,55.4,390.5,68z" />
</svg>
</button>
</div>
</div>
</header>
<main>
<div class="hero-banner">
<div class="container">
<h2>#learndaily</h2>
<div class="call-to-action">
<p>from beginning to advanced</p>
<a href="#">
<span>sign up and start</span>
<svg version="1.1" id="sign-up-arrow" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330 330"
style="enable-background:new 0 0 330 330;" xml:space="preserve">
<path id="sign-arrow"
d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255
s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0
c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z" />
</svg>
</a>
</div>
</div>
</div>
<div class="learners container">
<div>
<!-- brain svg -->
<svg version="1.1" id="brain-icon" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 489.914 489.914"
style="enable-background:new 0 0 489.914 489.914;" xml:space="preserve">
<path d="M446.802,136.214c-9.7-58.2-51.6-111-107.6-128.5c-36.1-11.3-74.5-8.5-111.8-2.3c-48.9,8.2-103.3,26.8-123.1,72.2
c-10.5,24.1-11.6,51.2-11.6,77.3c0,59.8-51.6,83.9-52,95.5c-0.4,22.5,45.8,25.6,41.5,48.1c-1.9,10.1-14.8,18.6-10.1,27.6
c2.3,4.3,7.4,5.8,10.5,9.3c8.9,10.1-5.4,24.8-4.7,38.4c0.8,17.1,22.9,23.7,40,21.4c17.1-2.3,35.7-8.2,49.7,1.9
c21.1,12.9,22.5,71.1,20.2,92.8h107.2c1.2-62.9-0.4-175.9-7-238.8c-2.7-26.4,8.9-90.2-123.1-78c-16.3-5.5-15.5-17.1-15.9-21.7
c-2.3-31.1,13.6-61.7,37.7-81.5c79-65.2,177.9-16.4,204.6,44.7c19.2,43.8,19.8,97.5-10.9,134.3c-15.5,17.9-36.1,30.7-56.7,42.3
c-6.2,3.5-10.1,10.1-10.1,17.1v180.5h48.5c-7-35.3-3.9-72.2-0.4-108.3c1.4-48,26.8-69.9,36.1-80.8
C436.302,255.014,456.502,194.014,446.802,136.214z" />
<path
d="M216.102,132.714L216.102,132.714c4.5-1.6,7.1-6.1,6.1-11.1c-2-8.5,1.9-22.5,5.2-31.7c0.2-5.3-3.6-10.2-8.8-10.4l0,0
c-5.5-0.5-10.2,3.6-10.8,9.1c-2.8,10.1-7,26.3-4.7,37.4C204.302,131.714,210.702,135.014,216.102,132.714z" />
<path
d="M289.102,112.114L289.102,112.114c-4.7-1.2-9.3,1.2-11.3,5.8c-3.1,8.2-8.5,15.5-14,22.5c-3.1,4.3-2.7,10.5,1.6,13.6l0,0
c4.3,3.5,10.5,2.7,14-1.6c6.2-8.2,12.4-17.1,16.7-27.6C298.402,119.514,294.902,113.314,289.102,112.114z" />
<path
d="M263.002,60.714L263.002,60.714c-4.6,1.3-7.5,5.6-6.9,10.6c1.3,8.6,0.3,17.7-1,26.5c-0.6,5.2,2.8,10.5,8.1,11l0,0
c5.4,0.9,10.5-2.8,11.4-8.3c1.4-10.2,2.3-21,0.8-32.2C274.702,62.514,268.602,58.914,263.002,60.714z" />
<path
d="M327.802,94.914L327.802,94.914c-4.5,1.7-7,6.2-6,11.2c2.1,8.5,1.8,17.6,1.3,26.5c-0.1,5.3,3.7,10.2,9,10.3l0,0
c5.5,0.5,10.2-3.7,10.6-9.2c0.5-10.2,0.5-21.1-1.9-32.2C339.702,95.714,333.302,92.514,327.802,94.914z" />
<path
d="M355.502,193.614L355.502,193.614c4.7,3.9,11.6,2.7,14.8-2.3c5.9-7.1,6.6-20.2,6.6-25.2c-0.4-5.8-5.4-10.1-11.3-9.3l0,0
c-5,0.8-8.9,5-8.5,10.5c0,3.1,0.1,10.1-3.5,13.6C350.902,184.714,352.002,190.114,355.502,193.614z" />
<path
d="M324.102,214.614L324.102,214.614c5.4,0,9.7-4.3,10.1-9.7c0.4-8.9,0.8-17.9,1.6-26.8c0.4-5.4-3.5-10.1-8.9-10.5l0,0
c-5.4-0.4-10.5,3.5-10.9,8.9c-0.8,9.3-1.2,18.6-1.6,28C314.402,209.914,318.602,214.614,324.102,214.614z" />
</svg>
<p>From beginners to advanced learners, all courses you need to start learning that new habit, the easy
way.
From machine learnign to sign language to cooking. Find your next interest and expand your horizons
here.</p>
</div>
<section>
<div><img src="img/beginner.webp" alt="image of a woman drinking a hot drink while studying"></div>
<div>
<h2> <span>01</span> beginner learners</h2>
<p>We believe starter-level courses should be as simple and straightforward as possible. This is the
place for you if you are looking to explore your next passion in life.</p>
</div>
</section>
<section>
<div><img src="img/intermediate.webp" alt="image of a person reading a book"></div>
<div>
<h2> <span>02</span> intermediate learners</h2>
<p>You feel stuck in the same old grooves and don’t know how to get to the next level? You want a
step-by-step method to explore deeper.</p>
</div>
</section>
<section>
<div><img src="img/expert.webp" alt="image of two people studying at the library"></div>
<div>
<h2> <span>03</span> advanced learners</h2>
<p>You want to develop your own unique style, explore advanced techniques, frills and flourishes.
Nothing is outside of your reach and we can help you obtain that higher level.</p>
</div>
</section>
</div>
<aside class="habit">
<div class="container">
<div>
<svg version="1.1" id="cycle-icon" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 396.593 396.594"
style="enable-background:new 0 0 396.593 396.594;" xml:space="preserve">
<path d="M232.114,45.272c-25.092-20.196-55.692-30.6-84.456-44.676c-4.896-1.836-11.016,0.612-11.016,6.732
c0,7.956,0,15.912,1.836,23.256C-21.254,2.432-48.182,356.168,137.254,372.08c6.732,0.611,6.732-8.568,1.224-10.404
c-39.78-14.076-70.38-31.211-92.412-68.543c-19.584-34.273-25.704-75.277-23.256-114.445
c4.284-72.828,46.512-135.864,119.952-134.64c0.612,1.224,1.224,3.06,2.448,4.284c-6.732,3.672-12.852,8.568-18.972,13.464
c-4.284,3.672-1.836,10.404,3.06,11.628c34.884,9.792,70.379-2.448,101.592-17.136C234.562,55.064,235.786,48.332,232.114,45.272z
M145.822,63.02c5.508-4.284,11.017-7.956,17.136-11.628c4.284-2.448,2.448-7.956-1.224-8.568c0.612-2.448,0-5.508-3.06-6.732
c-1.836-0.612-3.061-1.224-4.896-1.224c-1.224-4.896-1.836-10.404-1.836-15.912c20.808,9.18,42.84,17.136,61.812,30.6
C192.333,58.736,169.078,65.468,145.822,63.02z" />
<path d="M371.65,96.68c-14.688-32.436-53.244-66.096-91.188-62.424c-6.731,0.612-8.567,9.792-1.836,12.24
c36.108,12.24,61.812,20.808,80.172,57.528c17.137,34.272,17.748,76.5,11.628,113.832
c-9.18,60.588-49.571,145.045-120.563,135.865c7.956-11.629,14.076-24.48,17.136-38.557c1.836-6.119-4.896-10.404-10.404-7.955
c-31.823,14.076-61.199,31.822-88.128,53.855c-4.283,3.672-1.835,10.404,3.061,12.24c29.987,9.791,59.976,19.584,91.8,23.256
c6.12,0.611,8.568-7.344,4.896-11.629c-4.896-4.895-9.793-12.852-15.301-19.584c75.889,11.016,119.952-79.559,131.58-144.432
C391.845,179.912,389.398,135.236,371.65,96.68z M233.337,353.107C233.337,353.107,233.337,353.721,233.337,353.107
c-1.224,1.225-1.836,2.449-2.447,3.061c-3.673,4.896,0.611,9.793,5.508,9.793c2.447,4.283,5.508,9.18,9.18,13.463
c-18.972-4.283-37.944-9.791-56.916-15.912c18.36-14.688,38.556-26.316,59.977-36.719
C244.354,335.973,239.458,344.541,233.337,353.107z" />
</svg>
<h2>habit (noun)</h2>
<p>A regular tendency or repeated practice, especially one that is hard to give up. Helps create
community and order.</p>
</div>
<div>
<p>Not sure what to learn?</p>
<a href="#">
<span>take the quiz</span>
<svg version="1.1" id="quiz-arrow" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 330 330"
style="enable-background:new 0 0 330 330;" xml:space="preserve">
<path
d="M15,180h263.787l-49.394,49.394c-5.858,5.857-5.858,15.355,0,21.213C232.322,253.535,236.161,255,240,255
s7.678-1.465,10.606-4.394l75-75c5.858-5.857,5.858-15.355,0-21.213l-75-75c-5.857-5.857-15.355-5.857-21.213,0
c-5.858,5.857-5.858,15.355,0,21.213L278.787,150H15c-8.284,0-15,6.716-15,15S6.716,180,15,180z" />
</svg>
</a>
</div>
</div>
</aside>
<section class="courses container">
<h2>courses</h2>
<div class="course-search">
<p>All courses fit your schedule and your lifestyle, so you can progress at your own pace, in your own
time.
Rewatch lessons as many times as you want, whenever you want, with unlimited access.</p>
<input type="search" name="course-search" id="course-search" placeholder="SEARCH">
</div>
<div class="img-gallery">
<div>
<img src="img/course-guitar.webp" alt="image of a person playing a guitar">
<a class="overlay" href="#"><span>Guitar Lessons</span></a>
</div>
<div>
<img src="img/course-project-mgmt.webp" alt="image of notebooks and a cup of coffee">
<a class="overlay" href="#"><span>Project Management</span></a>
</div>
<div>
<img src="img/course-marketing.webp" alt="image of a woman having a virtual meeting">
<a class="overlay" href="#"><span>Marketing</span></a>
</div>
<div>
<img src="img/course-nutrition.webp" alt="image of berries in a bowl">
<a class="overlay" href="#"><span>Nutrition</span></a>
</div>
<div>
<img src="img/course-instrumentation.webp" alt="image of an automation equipment">
<a class="overlay" href="#"><span>Instrumentation</span></a>
</div>
<div>
<img src="img/course-language.webp" alt="image of language books: russian, spanish, romanian, etc.">
<a class="overlay" href="#"><span>Language</span></a>
</div>
<div>
<img src="img/course-photography.webp" alt="image of a man taking a photo">
<a class="overlay" href="#"><span>Photography</span></a>
</div>
<div>
<img src="img/course-wine-tasting.webp" alt="image of wine ouring on a glass">
<a class="overlay" href="#"><span>Wine Tasting</span></a>
</div>
<div>
<img src="img/course-robotics.webp" alt="image of a robot">
<a class="overlay" href="#"><span>Robotics</span></a>
</div>
<div>
<img src="img/course-painting.webp" alt="image paint and paint brushes">
<a class="overlay" href="#"><span>Painting</span></a>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<h2>statistics</h2>
<div class="stats">
<div>
<p>431,743</p>
<p>Positive Reviews</p>
</div>
<div>
<p>23,532</p>
<p>Active Users</p>
</div>
<div>
<p>654,697</p>
<p>Course Topics</p>
</div>
<div>
<p>3,964</p>
<p>Guest Contributors</p>
</div>
<div>
<p>45,832</p>
<p>Blog Post</p>
</div>
</div>
<p>For Educational Purposes | 2024</p>
</div>
</footer>
<script src="./js/navbar.js"></script>
</body>
</html>