├── assets
    ├── css
    │   ├── reset.css
    │   └── styles.css
    ├── icons
    │   ├── chevron-left.svg
    │   ├── chevron-right.svg
    │   ├── code.svg
    │   ├── facebook.svg
    │   ├── instagram.svg
    │   ├── linkedin.svg
    │   ├── list.svg
    │   ├── open-quotes.svg
    │   ├── play.svg
    │   ├── speaker.svg
    │   ├── star.svg
    │   └── twitter.svg
    └── img
    │   ├── blog-1.jpg
    │   ├── blog-2.jpg
    │   ├── blog-3.jpg
    │   ├── course-1.jpg
    │   ├── course-2.jpg
    │   ├── course-3.jpg
    │   ├── feature-1.jpg
    │   ├── feature-2.jpg
    │   ├── feature-3.jpg
    │   ├── feedback-avatar-1.jpg
    │   ├── feedback-avatar-2.jpg
    │   ├── feedback-avatar-3.jpg
    │   ├── hero-img.jpg
    │   ├── logo-white.svg
    │   └── logo.svg
└── index.html


/assets/css/reset.css:
--------------------------------------------------------------------------------
  1 | /* http://meyerweb.com/eric/tools/css/reset/ 
  2 |    v2.0 | 20110126
  3 |    License: none (public domain)
  4 | */
  5 | 
  6 | html,
  7 | body,
  8 | div,
  9 | span,
 10 | applet,
 11 | object,
 12 | iframe,
 13 | h1,
 14 | h2,
 15 | h3,
 16 | h4,
 17 | h5,
 18 | h6,
 19 | p,
 20 | blockquote,
 21 | pre,
 22 | a,
 23 | abbr,
 24 | acronym,
 25 | address,
 26 | big,
 27 | cite,
 28 | code,
 29 | del,
 30 | dfn,
 31 | em,
 32 | img,
 33 | ins,
 34 | kbd,
 35 | q,
 36 | s,
 37 | samp,
 38 | small,
 39 | strike,
 40 | strong,
 41 | sub,
 42 | sup,
 43 | tt,
 44 | var,
 45 | b,
 46 | u,
 47 | i,
 48 | center,
 49 | dl,
 50 | dt,
 51 | dd,
 52 | ol,
 53 | ul,
 54 | li,
 55 | fieldset,
 56 | form,
 57 | label,
 58 | legend,
 59 | table,
 60 | caption,
 61 | tbody,
 62 | tfoot,
 63 | thead,
 64 | tr,
 65 | th,
 66 | td,
 67 | article,
 68 | aside,
 69 | canvas,
 70 | details,
 71 | embed,
 72 | figure,
 73 | figcaption,
 74 | footer,
 75 | header,
 76 | hgroup,
 77 | menu,
 78 | nav,
 79 | output,
 80 | ruby,
 81 | section,
 82 | summary,
 83 | time,
 84 | mark,
 85 | audio,
 86 | video {
 87 |     margin: 0;
 88 |     padding: 0;
 89 |     border: 0;
 90 |     font-size: 100%;
 91 |     font: inherit;
 92 |     vertical-align: baseline;
 93 | }
 94 | /* HTML5 display-role reset for older browsers */
 95 | article,
 96 | aside,
 97 | details,
 98 | figcaption,
 99 | figure,
100 | footer,
101 | header,
102 | hgroup,
103 | menu,
104 | nav,
105 | section {
106 |     display: block;
107 | }
108 | body {
109 |     line-height: 1;
110 | }
111 | ol,
112 | ul {
113 |     list-style: none;
114 | }
115 | blockquote,
116 | q {
117 |     quotes: none;
118 | }
119 | blockquote:before,
120 | blockquote:after,
121 | q:before,
122 | q:after {
123 |     content: "";
124 |     content: none;
125 | }
126 | table {
127 |     border-collapse: collapse;
128 |     border-spacing: 0;
129 | }
130 | 


--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | :root {
  6 |     --primary-color: #ffb900;
  7 |     --font-heading: Sen, sans-serif;
  8 | }
  9 | 
 10 | html {
 11 |     font-size: 62.5%;
 12 | }
 13 | 
 14 | body {
 15 |     font-size: 1.6rem;
 16 |     font-family: "Poppins", sans-serif;
 17 | }
 18 | 
 19 | /* Common */
 20 | a {
 21 |     text-decoration: none;
 22 | }
 23 | 
 24 | .btn {
 25 |     display: inline-block;
 26 |     min-width: 118px;
 27 |     padding: 0 16px;
 28 |     line-height: 50px;
 29 |     font-weight: 600;
 30 |     font-size: 1.6rem;
 31 |     text-align: center;
 32 |     color: #ffffff;
 33 |     background: #171100;
 34 |     border-radius: 999px;
 35 | }
 36 | 
 37 | .btn:hover {
 38 |     opacity: 0.9;
 39 |     cursor: pointer;
 40 | }
 41 | 
 42 | .heading {
 43 |     font-family: var(--font-heading);
 44 |     font-weight: 700;
 45 |     letter-spacing: -0.02em;
 46 |     color: #171100;
 47 | }
 48 | 
 49 | .heading.lv1 {
 50 |     font-size: 5.8rem;
 51 |     line-height: 1.17;
 52 | }
 53 | 
 54 | .heading.lv2 {
 55 |     font-size: 3.8rem;
 56 |     line-height: 1.26;
 57 | }
 58 | 
 59 | .main-content {
 60 |     width: 1170px;
 61 |     max-width: calc(100% - 48px);
 62 |     margin-left: auto;
 63 |     margin-right: auto;
 64 | }
 65 | 
 66 | .line-clamp {
 67 |     display: -webkit-box;
 68 |     -webkit-line-clamp: var(--line-clamp, 1);
 69 |     -webkit-box-orient: vertical;
 70 |     overflow: hidden;
 71 | }
 72 | 
 73 | .line-clamp.line-2 {
 74 |     --line-clamp: 2;
 75 | }
 76 | 
 77 | .break-all {
 78 |     word-break: break-all;
 79 | }
 80 | 
 81 | /* Header */
 82 | .header {
 83 |     background: #fffcf4;
 84 | }
 85 | 
 86 | .header.fixed {
 87 |     position: sticky;
 88 |     top: -28px;
 89 |     z-index: 1;
 90 | }
 91 | 
 92 | .header .body {
 93 |     display: flex;
 94 |     align-items: center;
 95 |     padding: 36px 0 8px;
 96 | }
 97 | 
 98 | .nav {
 99 |     margin-left: auto;
100 | }
101 | 
102 | .nav ul {
103 |     display: flex;
104 | }
105 | 
106 | .nav a {
107 |     position: relative;
108 |     padding: 8px 21px;
109 |     font-size: 1.6rem;
110 |     color: #5f5b53;
111 | }
112 | 
113 | .nav a:hover,
114 | .nav li.active a {
115 |     text-shadow: 1px 0 0 currentColor;
116 |     color: #171100;
117 | }
118 | 
119 | .nav li.active a::after {
120 |     position: absolute;
121 |     left: 21px;
122 |     bottom: 6px;
123 |     content: "";
124 |     display: block;
125 |     width: 12px;
126 |     height: 2px;
127 |     background: #171100;
128 |     border-radius: 1px;
129 | }
130 | 
131 | .header .sign-up-btn {
132 |     min-width: 144px;
133 | }
134 | 
135 | .header .action {
136 |     margin-left: 49px;
137 | }
138 | 
139 | /* Hero */
140 | .hero {
141 |     padding: 56px 0 65px;
142 |     background: #fffcf4;
143 | }
144 | 
145 | .hero .body {
146 |     display: flex;
147 | }
148 | 
149 | /* Hero left */
150 | .hero .media-block {
151 |     position: relative;
152 |     width: 48%;
153 | }
154 | 
155 | .hero .media-block .img {
156 |     display: block;
157 |     width: 470px;
158 |     height: 685px;
159 |     object-fit: cover;
160 |     border-radius: 20px;
161 | }
162 | 
163 | .hero-summary {
164 |     position: absolute;
165 |     right: 0;
166 |     bottom: 48px;
167 |     width: 270px;
168 |     padding: 24px;
169 |     background: #ffffff;
170 |     box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.05);
171 |     border-radius: 12px;
172 | }
173 | 
174 | .hero-summary .item {
175 |     display: flex;
176 |     align-items: center;
177 | }
178 | 
179 | .hero-summary .item + .item {
180 |     margin-top: 22px;
181 | }
182 | 
183 | .hero-summary .icon {
184 |     width: 48px;
185 |     height: 48px;
186 |     border-radius: 50%;
187 |     display: flex;
188 |     align-items: center;
189 |     justify-content: center;
190 |     background: #fff9e8;
191 | }
192 | 
193 | .hero-summary .item:nth-of-type(2) .icon {
194 |     background: #fcefff;
195 | }
196 | 
197 | .hero-summary .item:nth-of-type(3) .icon {
198 |     background: #ebeaff;
199 | }
200 | 
201 | .hero-summary .info {
202 |     margin-left: 16px;
203 | }
204 | 
205 | .hero-summary .label {
206 |     font-size: 1.4rem;
207 |     line-height: 1.86;
208 |     color: #5f5b53;
209 | }
210 | 
211 | .hero-summary .title {
212 |     font-weight: 600;
213 |     font-size: 1.8rem;
214 |     line-height: 1.67;
215 |     color: #171100;
216 | }
217 | 
218 | /* Hero right */
219 | .hero .content-block {
220 |     width: 52%;
221 |     padding: 64px 0 0 130px;
222 | }
223 | 
224 | .hero .desc {
225 |     margin-top: 22px;
226 |     font-size: 1.8rem;
227 |     line-height: 1.67;
228 |     color: #5f5b53;
229 | }
230 | 
231 | .hero .cta-group {
232 |     display: flex;
233 |     align-items: center;
234 |     margin: 38px 0 48px;
235 | }
236 | 
237 | .hero-cta {
238 |     min-width: 180px;
239 |     line-height: 64px;
240 |     background-color: var(--primary-color);
241 | }
242 | 
243 | .hero .watch-video {
244 |     display: flex;
245 |     align-items: center;
246 |     margin-left: 28px;
247 |     border: none;
248 |     background: transparent;
249 |     cursor: pointer;
250 | }
251 | 
252 | .hero .watch-video .icon {
253 |     display: flex;
254 |     align-items: center;
255 |     justify-content: center;
256 |     width: 40px;
257 |     height: 40px;
258 |     border-radius: 50%;
259 |     background: #ffffff;
260 |     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.07);
261 | }
262 | 
263 | .hero .watch-video span {
264 |     margin-left: 14px;
265 |     font-weight: 600;
266 |     font-size: 1.8rem;
267 |     line-height: 1.67;
268 |     color: #171100;
269 | }
270 | 
271 | .hero .stats {
272 |     margin: 8px 0 0 -28px;
273 | }
274 | 
275 | .hero .stats strong {
276 |     padding: 0 8px 0 28px;
277 |     font-family: var(--font-heading);
278 |     font-weight: 700;
279 |     font-size: 4.4rem;
280 |     line-height: 1.23;
281 |     color: #171100;
282 | }
283 | 
284 | /* Popular */
285 | .popular {
286 |     padding: 65px 0;
287 |     margin-top: 135px;
288 | }
289 | 
290 | .popular-top {
291 |     display: flex;
292 |     align-items: center;
293 |     justify-content: space-between;
294 | }
295 | 
296 | .popular-top .desc {
297 |     margin-top: 16px;
298 |     width: 458px;
299 |     font-size: 1.8rem;
300 |     line-height: 1.67;
301 |     color: #5f5b53;
302 | }
303 | 
304 | .popular-top .controls {
305 |     display: flex;
306 |     gap: 18px;
307 | }
308 | 
309 | .popular-top .control-btn {
310 |     display: flex;
311 |     align-items: center;
312 |     justify-content: center;
313 |     width: 40px;
314 |     height: 40px;
315 |     border-radius: 50%;
316 |     color: var(--primary-color);
317 |     border: 1px solid var(--primary-color);
318 |     background: transparent;
319 | }
320 | 
321 | .popular-top .control-btn:hover {
322 |     color: #fff;
323 |     background: var(--primary-color);
324 |     cursor: pointer;
325 | }
326 | 
327 | .popular .course-list {
328 |     display: flex;
329 |     gap: 30px;
330 |     margin-top: 55px;
331 | }
332 | 
333 | .popular .course-item {
334 |     flex: 1;
335 |     background: #ffffff;
336 |     border: 1px solid #e2dfda;
337 |     border-radius: 12px;
338 | }
339 | 
340 | .popular .course-item:hover {
341 |     border-color: transparent;
342 |     box-shadow: 0px 18px 36px rgba(0, 0, 0, 0.05);
343 | }
344 | 
345 | .popular .course-item .thumb {
346 |     width: calc(100% + 2px);
347 |     height: 278px;
348 |     margin: -1px;
349 |     object-fit: cover;
350 |     border-radius: 12px 12px 0px 0px;
351 | }
352 | 
353 | .popular .course-item .info {
354 |     padding: 16px 22px 22px;
355 | }
356 | 
357 | .popular .course-item .rating,
358 | .popular .course-item .foot,
359 | .popular .course-item .head {
360 |     display: flex;
361 |     align-items: center;
362 |     justify-content: space-between;
363 | }
364 | 
365 | .popular .course-item .title a {
366 |     padding-right: 6px;
367 |     font-weight: 600;
368 |     font-size: 1.8rem;
369 |     line-height: 1.67;
370 |     color: #171100;
371 | }
372 | 
373 | .popular .rating .value {
374 |     margin-left: 6px;
375 |     font-size: 1.6rem;
376 |     line-height: 1.75;
377 |     color: #fea31b;
378 | }
379 | 
380 | .popular .course-item .desc {
381 |     margin-top: 6px;
382 |     font-size: 1.4rem;
383 |     line-height: 1.86;
384 |     color: #5f5b53;
385 | }
386 | 
387 | .popular .course-item .foot {
388 |     margin-top: 12px;
389 | }
390 | 
391 | .popular .course-item .price {
392 |     font-weight: 600;
393 |     font-size: 1.8rem;
394 |     line-height: 1.67;
395 |     color: #171100;
396 | }
397 | 
398 | .popular .course-item .book-btn {
399 |     border: none;
400 | }
401 | 
402 | .popular .course-item .book-btn:hover {
403 |     color: #fff;
404 |     background: var(--primary-color);
405 | }
406 | 
407 | /* Feedback */
408 | .feedback {
409 |     margin-top: 135px;
410 |     padding: 96px 0;
411 |     background: #2e2100;
412 | }
413 | 
414 | .feedback-list {
415 |     display: flex;
416 |     overflow: hidden;
417 | }
418 | 
419 | .feedback-item {
420 |     display: flex;
421 |     width: 100%;
422 |     flex-shrink: 0;
423 | }
424 | 
425 | .feedback-item .avatar {
426 |     width: 72px;
427 |     height: 72px;
428 |     border-radius: 50%;
429 |     object-fit: cover;
430 | }
431 | 
432 | .feedback-item .info .title {
433 |     font-family: var(--font-heading);
434 |     margin-top: 18px;
435 |     font-weight: 700;
436 |     font-size: 2.4rem;
437 |     line-height: 1.42;
438 |     color: #f7f7f7;
439 | }
440 | 
441 | .feedback-item .info .desc {
442 |     margin-top: 4px;
443 |     font-size: 1.4rem;
444 |     line-height: 1.86;
445 |     color: #bfbcb3;
446 | }
447 | 
448 | .feedback-item .dots {
449 |     display: flex;
450 |     margin-top: 28px;
451 | }
452 | 
453 | .feedback-item .dot {
454 |     margin-right: 6px;
455 |     width: 6px;
456 |     height: 6px;
457 |     border-radius: 50%;
458 |     background: #634700;
459 |     cursor: pointer;
460 | }
461 | 
462 | .feedback-item .dot.active {
463 |     background: #ffb900;
464 |     cursor: default;
465 | }
466 | 
467 | .feedback-item .content {
468 |     width: 66%;
469 |     margin-left: auto;
470 | }
471 | 
472 | .feedback-item blockquote {
473 |     margin-left: 30px;
474 |     font-style: italic;
475 |     font-size: 2.6rem;
476 |     line-height: 1.54;
477 |     color: #ffffff;
478 | }
479 | 
480 | /* Features */
481 | .features {
482 |     margin-top: 135px;
483 |     padding: 65px 0;
484 | }
485 | 
486 | .features .body {
487 |     display: flex;
488 |     justify-content: space-between;
489 | }
490 | 
491 | .features .images {
492 |     display: flex;
493 |     gap: 0 30px;
494 | }
495 | 
496 | .features .images img {
497 |     width: 270px;
498 |     height: 404px;
499 |     border-radius: 16px;
500 |     object-fit: cover;
501 | }
502 | 
503 | .features img.lower {
504 |     margin-top: 34px;
505 | }
506 | 
507 | .features .content {
508 |     width: 41%;
509 |     display: flex;
510 |     flex-direction: column;
511 |     align-items: flex-start;
512 |     justify-content: center;
513 | }
514 | 
515 | .features .desc {
516 |     margin-top: 16px;
517 |     font-size: 1.6rem;
518 |     line-height: 1.75;
519 |     color: #5f5b53;
520 | }
521 | 
522 | .features .content .cta-btn {
523 |     margin-top: 32px;
524 |     min-width: 137px;
525 |     color: #fff;
526 |     background: var(--primary-color);
527 | }
528 | 
529 | .features-2nd {
530 |     margin-top: 70px;
531 | }
532 | 
533 | .features-2nd .body {
534 |     flex-direction: row-reverse;
535 | }
536 | 
537 | .features-2nd .content {
538 |     width: 49%;
539 | }
540 | 
541 | .features-2nd .images img {
542 |     width: 470px;
543 |     height: 440px;
544 | }
545 | 
546 | /* Blog */
547 | .blog {
548 |     margin-top: 135px;
549 |     padding: 96px 0;
550 |     background: #fffcf4;
551 | }
552 | 
553 | .blog .blog-top {
554 |     text-align: center;
555 | }
556 | 
557 | .blog .blog-top .desc {
558 |     margin: 16px auto auto;
559 |     width: 448px;
560 |     font-size: 1.6rem;
561 |     line-height: 1.75;
562 |     color: #696262;
563 | }
564 | 
565 | .blog .blog-list {
566 |     display: flex;
567 |     gap: 30px;
568 |     margin-top: 55px;
569 |     overflow: hidden;
570 | }
571 | 
572 | .blog .item {
573 |     flex-shrink: 0;
574 |     width: calc(33.33% - 20px);
575 |     background: #ffffff;
576 |     border-radius: 16px;
577 | }
578 | 
579 | .blog .item:hover {
580 |     box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.05);
581 | }
582 | 
583 | .blog .item .thumb {
584 |     width: 100%;
585 |     height: 250px;
586 |     object-fit: cover;
587 |     border-radius: 16px 16px 0px 0px;
588 | }
589 | 
590 | .blog .item .info {
591 |     padding: 20px 20px 28px;
592 | }
593 | 
594 | .blog .item .date {
595 |     position: relative;
596 |     display: inline-flex;
597 |     align-items: center;
598 |     padding-bottom: 12px;
599 |     font-size: 1.4rem;
600 |     line-height: 1.86;
601 |     color: #5f5b53;
602 | }
603 | 
604 | .blog .item .date::before {
605 |     content: "";
606 |     display: inline-block;
607 |     width: 6px;
608 |     height: 6px;
609 |     margin-right: 4px;
610 |     border-radius: 50%;
611 |     background: var(--primary-color);
612 | }
613 | 
614 | .blog .item .date::after {
615 |     position: absolute;
616 |     left: 0;
617 |     right: -27px;
618 |     bottom: 0;
619 |     content: "";
620 |     display: inline-block;
621 |     height: 1px;
622 |     background: #e2dfda;
623 |     border-radius: 0.5px;
624 | }
625 | 
626 | .blog .item .title a {
627 |     display: inline-block;
628 |     margin: 12px 0;
629 |     font-weight: 600;
630 |     font-size: 1.6rem;
631 |     line-height: 1.75;
632 |     color: #171100;
633 | }
634 | 
635 | .blog .item .btn {
636 |     font-size: 1.4rem;
637 | }
638 | 
639 | .blog .item .btn:hover {
640 |     background: var(--primary-color);
641 | }
642 | 
643 | .blog .dots {
644 |     display: flex;
645 |     gap: 6px;
646 |     justify-content: center;
647 |     margin-top: 38px;
648 | }
649 | 
650 | .blog .dot {
651 |     width: 6px;
652 |     height: 6px;
653 |     border-radius: 50%;
654 |     background: #5f5b53;
655 |     cursor: pointer;
656 | }
657 | 
658 | .blog .dot.active {
659 |     cursor: default;
660 |     background: var(--primary-color);
661 | }
662 | 
663 | /* Footer */
664 | .footer {
665 |     padding: 96px 135px 0;
666 |     background: #2e2100;
667 | }
668 | 
669 | .footer .row {
670 |     display: flex;
671 |     padding-bottom: 38px;
672 |     border-bottom: 1px solid #59554b;
673 | }
674 | 
675 | .footer .row .column {
676 |     width: 21.6%;
677 | }
678 | 
679 | .footer .row .column:first-child {
680 |     width: 35%;
681 | }
682 | 
683 | .footer .desc {
684 |     margin-top: 18px;
685 |     max-width: 267px;
686 |     font-size: 1.4rem;
687 |     line-height: 1.86;
688 |     color: #bfbcb2;
689 | }
690 | 
691 | .footer .socials {
692 |     display: flex;
693 |     gap: 18px;
694 |     margin-top: 18px;
695 | }
696 | 
697 | .footer .title {
698 |     display: inline-block;
699 |     padding: 0 48px 14px 0;
700 |     border-bottom: 1px solid #59554b;
701 |     font-weight: 600;
702 |     font-size: 1.6rem;
703 |     line-height: 1.75;
704 |     color: #ffffff;
705 | }
706 | 
707 | .footer .list {
708 |     margin-top: 28px;
709 | }
710 | 
711 | .footer .list a {
712 |     display: inline-block;
713 |     margin-bottom: 12px;
714 |     font-size: 1.4rem;
715 |     line-height: 1.86;
716 |     color: #bfbcb2;
717 | }
718 | 
719 | .footer .list li:last-child a {
720 |     margin-bottom: 0;
721 | }
722 | 
723 | .footer .list strong {
724 |     font-weight: 600;
725 |     color: #ffffff;
726 | }
727 | 
728 | .footer .copyright {
729 |     padding: 28px 0;
730 | }
731 | 
732 | .footer .copyright p {
733 |     font-size: 1.4rem;
734 |     line-height: 1.86;
735 |     text-align: center;
736 |     color: #807d74;
737 | }
738 | 


--------------------------------------------------------------------------------
/assets/icons/chevron-left.svg:
--------------------------------------------------------------------------------
1 | <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M7 1L1 7L7 13" stroke="#FFB900" stroke-linecap="round" stroke-linejoin="round"/>
3 | </svg>


--------------------------------------------------------------------------------
/assets/icons/chevron-right.svg:
--------------------------------------------------------------------------------
1 | <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M1 1L7 7L1 13" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/icons/code.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M0.75 8.25V21H23.25V8.25H0.75ZM10.3286 16.7569C10.3956 16.8307 10.4472 16.9171 10.4804 17.0111C10.5136 17.1051 10.5277 17.2048 10.5219 17.3043C10.5161 17.4038 10.4906 17.5012 10.4467 17.5907C10.4029 17.6802 10.3417 17.7601 10.2666 17.8257C10.1915 17.8913 10.1041 17.9412 10.0095 17.9726C9.91491 18.004 9.81499 18.0163 9.7156 18.0086C9.61622 18.001 9.51935 17.9736 9.43067 17.9281C9.34199 17.8825 9.26327 17.8198 9.19913 17.7435L6.1425 14.2448L9.19988 10.7573C9.26397 10.6805 9.34276 10.6174 9.4316 10.5716C9.52044 10.5258 9.61755 10.4982 9.71721 10.4904C9.81687 10.4827 9.91708 10.4949 10.0119 10.5264C10.1068 10.558 10.1944 10.6081 10.2696 10.674C10.3448 10.7399 10.4061 10.8201 10.4498 10.91C10.4935 10.9999 10.5189 11.0976 10.5243 11.1974C10.5297 11.2972 10.5151 11.3971 10.4814 11.4912C10.4477 11.5853 10.3955 11.6717 10.3279 11.7454L8.13525 14.2463L10.3286 16.7569ZM14.8286 17.7435C14.7645 17.8198 14.6858 17.8825 14.5971 17.9281C14.5084 17.9736 14.4115 18.001 14.3121 18.0086C14.2128 18.0163 14.1128 18.004 14.0182 17.9726C13.9236 17.9412 13.8362 17.8913 13.7612 17.8257C13.6861 17.7601 13.6248 17.6802 13.581 17.5907C13.5372 17.5012 13.5116 17.4038 13.5058 17.3043C13.5001 17.2048 13.5142 17.1051 13.5474 17.0111C13.5805 16.9171 13.6321 16.8307 13.6991 16.7569L15.8925 14.2463L13.6999 11.7439C13.6323 11.6702 13.5801 11.5838 13.5463 11.4897C13.5126 11.3956 13.498 11.2957 13.5035 11.1959C13.5089 11.0961 13.5342 10.9984 13.5779 10.9085C13.6217 10.8186 13.683 10.7384 13.7581 10.6725C13.8333 10.6066 13.9209 10.5565 14.0158 10.5249C14.1107 10.4934 14.2109 10.4812 14.3105 10.4889C14.4102 10.4967 14.5073 10.5243 14.5962 10.5701C14.685 10.6159 14.7638 10.679 14.8279 10.7557L17.8853 14.2432L14.8286 17.7435Z" fill="#A13FB9"/>
3 | <path d="M0.75 3V6.75H23.25V3H0.75ZM3 5.625C2.85166 5.625 2.70666 5.58101 2.58332 5.4986C2.45999 5.41619 2.36386 5.29906 2.30709 5.16201C2.25032 5.02497 2.23547 4.87417 2.26441 4.72868C2.29335 4.5832 2.36478 4.44956 2.46967 4.34467C2.57456 4.23978 2.7082 4.16835 2.85368 4.13941C2.99917 4.11047 3.14997 4.12532 3.28701 4.18209C3.42406 4.23886 3.54119 4.33499 3.6236 4.45832C3.70601 4.58166 3.75 4.72666 3.75 4.875C3.75 5.07391 3.67098 5.26468 3.53033 5.40533C3.38968 5.54598 3.19891 5.625 3 5.625ZM5.25 5.625C5.10166 5.625 4.95666 5.58101 4.83332 5.4986C4.70999 5.41619 4.61386 5.29906 4.55709 5.16201C4.50032 5.02497 4.48547 4.87417 4.51441 4.72868C4.54335 4.5832 4.61478 4.44956 4.71967 4.34467C4.82456 4.23978 4.9582 4.16835 5.10368 4.13941C5.24917 4.11047 5.39997 4.12532 5.53701 4.18209C5.67406 4.23886 5.79119 4.33499 5.8736 4.45832C5.95601 4.58166 6 4.72666 6 4.875C6 5.07391 5.92098 5.26468 5.78033 5.40533C5.63968 5.54598 5.44891 5.625 5.25 5.625ZM7.5 5.625C7.35166 5.625 7.20666 5.58101 7.08332 5.4986C6.95999 5.41619 6.86386 5.29906 6.80709 5.16201C6.75032 5.02497 6.73547 4.87417 6.76441 4.72868C6.79335 4.5832 6.86478 4.44956 6.96967 4.34467C7.07456 4.23978 7.2082 4.16835 7.35368 4.13941C7.49917 4.11047 7.64997 4.12532 7.78701 4.18209C7.92406 4.23886 8.04119 4.33499 8.1236 4.45832C8.20601 4.58166 8.25 4.72666 8.25 4.875C8.25 5.07391 8.17098 5.26468 8.03033 5.40533C7.88968 5.54598 7.69891 5.625 7.5 5.625Z" fill="#A13FB9"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/assets/icons/facebook.svg:
--------------------------------------------------------------------------------
1 | <svg width="9" height="15" viewBox="0 0 9 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M8.41028 8.37379L8.87669 5.67961H5.95891V3.93204C5.95891 3.1948 6.36575 2.47573 7.67262 2.47573H9V0.182039C9 0.182039 7.79588 0 6.6452 0C4.24113 0 2.67125 1.29064 2.67125 3.62621V5.67961H0V8.37379H2.67125V14.8871C3.20753 14.9618 3.75618 15 4.31508 15C4.87398 15 5.42263 14.9618 5.95891 14.8871V8.37379H8.41028Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/icons/instagram.svg:
--------------------------------------------------------------------------------
1 | <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M12.75 3.375C12.75 3.99632 12.2463 4.5 11.625 4.5C11.0037 4.5 10.5 3.99632 10.5 3.375C10.5 2.75368 11.0037 2.25 11.625 2.25C12.2463 2.25 12.75 2.75368 12.75 3.375Z" fill="white"/>
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 11.25C9.57107 11.25 11.25 9.57107 11.25 7.5C11.25 5.42893 9.57107 3.75 7.5 3.75C5.42893 3.75 3.75 5.42893 3.75 7.5C3.75 9.57107 5.42893 11.25 7.5 11.25ZM7.5 9.75C8.74264 9.75 9.75 8.74264 9.75 7.5C9.75 6.25736 8.74264 5.25 7.5 5.25C6.25736 5.25 5.25 6.25736 5.25 7.5C5.25 8.74264 6.25736 9.75 7.5 9.75Z" fill="white"/>
4 | <path fill-rule="evenodd" clip-rule="evenodd" d="M0 7.2C0 4.67976 0 3.41965 0.490471 2.45704C0.921901 1.61031 1.61031 0.921901 2.45704 0.490471C3.41965 0 4.67976 0 7.2 0H7.8C10.3202 0 11.5804 0 12.543 0.490471C13.3897 0.921901 14.0781 1.61031 14.5095 2.45704C15 3.41965 15 4.67976 15 7.2V7.8C15 10.3202 15 11.5804 14.5095 12.543C14.0781 13.3897 13.3897 14.0781 12.543 14.5095C11.5804 15 10.3202 15 7.8 15H7.2C4.67976 15 3.41965 15 2.45704 14.5095C1.61031 14.0781 0.921901 13.3897 0.490471 12.543C0 11.5804 0 10.3202 0 7.8V7.2ZM7.2 1.5H7.8C9.08487 1.5 9.95831 1.50117 10.6334 1.55633C11.2911 1.61006 11.6274 1.70745 11.862 1.82698C12.4265 2.1146 12.8854 2.57354 13.173 3.13803C13.2926 3.37263 13.3899 3.70893 13.4437 4.36656C13.4988 5.04169 13.5 5.91513 13.5 7.2V7.8C13.5 9.08487 13.4988 9.95831 13.4437 10.6334C13.3899 11.2911 13.2926 11.6274 13.173 11.862C12.8854 12.4265 12.4265 12.8854 11.862 13.173C11.6274 13.2926 11.2911 13.3899 10.6334 13.4437C9.95831 13.4988 9.08487 13.5 7.8 13.5H7.2C5.91513 13.5 5.04169 13.4988 4.36656 13.4437C3.70893 13.3899 3.37263 13.2926 3.13803 13.173C2.57354 12.8854 2.1146 12.4265 1.82698 11.862C1.70745 11.6274 1.61006 11.2911 1.55633 10.6334C1.50117 9.95831 1.5 9.08487 1.5 7.8V7.2C1.5 5.91513 1.50117 5.04169 1.55633 4.36656C1.61006 3.70893 1.70745 3.37263 1.82698 3.13803C2.1146 2.57354 2.57354 2.1146 3.13803 1.82698C3.37263 1.70745 3.70893 1.61006 4.36656 1.55633C5.04169 1.50117 5.91513 1.5 7.2 1.5Z" fill="white"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/assets/icons/linkedin.svg:
--------------------------------------------------------------------------------
1 | <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M3.61856 1.81302C3.61856 2.81432 2.80852 3.62603 1.80928 3.62603C0.810041 3.62603 0 2.81432 0 1.81302C0 0.811715 0.810041 0 1.80928 0C2.80852 0 3.61856 0.811715 3.61856 1.81302Z" fill="white"/>
3 | <path d="M0.247423 4.95868H3.34021V15H0.247423V4.95868Z" fill="white"/>
4 | <path d="M8.31959 4.95868H5.2268V15H8.31959C8.31959 15 8.31959 11.8388 8.31959 9.86235C8.31959 8.67602 8.69766 7.4845 10.2062 7.4845C11.911 7.4845 11.9008 9.037 11.8928 10.2397C11.8824 11.8119 11.9072 13.4163 11.9072 15H15V9.70041C14.9738 6.31647 14.1508 4.75723 11.4433 4.75723C9.8354 4.75723 8.83871 5.53935 8.31959 6.24696V4.95868Z" fill="white"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/assets/icons/list.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M0.75 8.25V21H23.25V8.25H0.75ZM12.75 18H5.25C5.05109 18 4.86032 17.921 4.71967 17.7803C4.57902 17.6397 4.5 17.4489 4.5 17.25C4.5 17.0511 4.57902 16.8603 4.71967 16.7197C4.86032 16.579 5.05109 16.5 5.25 16.5H12.75C12.9489 16.5 13.1397 16.579 13.2803 16.7197C13.421 16.8603 13.5 17.0511 13.5 17.25C13.5 17.4489 13.421 17.6397 13.2803 17.7803C13.1397 17.921 12.9489 18 12.75 18ZM18.75 15H5.25C5.05109 15 4.86032 14.921 4.71967 14.7803C4.57902 14.6397 4.5 14.4489 4.5 14.25C4.5 14.0511 4.57902 13.8603 4.71967 13.7197C4.86032 13.579 5.05109 13.5 5.25 13.5H18.75C18.9489 13.5 19.1397 13.579 19.2803 13.7197C19.421 13.8603 19.5 14.0511 19.5 14.25C19.5 14.4489 19.421 14.6397 19.2803 14.7803C19.1397 14.921 18.9489 15 18.75 15ZM18.75 12H5.25C5.05109 12 4.86032 11.921 4.71967 11.7803C4.57902 11.6397 4.5 11.4489 4.5 11.25C4.5 11.0511 4.57902 10.8603 4.71967 10.7197C4.86032 10.579 5.05109 10.5 5.25 10.5H18.75C18.9489 10.5 19.1397 10.579 19.2803 10.7197C19.421 10.8603 19.5 11.0511 19.5 11.25C19.5 11.4489 19.421 11.6397 19.2803 11.7803C19.1397 11.921 18.9489 12 18.75 12Z" fill="#FFB900"/>
3 | <path d="M0.75 3V6.75H23.25V3H0.75ZM3 5.625C2.85166 5.625 2.70666 5.58101 2.58332 5.4986C2.45999 5.41619 2.36386 5.29906 2.30709 5.16201C2.25032 5.02497 2.23547 4.87417 2.26441 4.72868C2.29335 4.5832 2.36478 4.44956 2.46967 4.34467C2.57456 4.23978 2.7082 4.16835 2.85368 4.13941C2.99917 4.11047 3.14997 4.12532 3.28701 4.18209C3.42406 4.23886 3.54119 4.33499 3.6236 4.45832C3.70601 4.58166 3.75 4.72666 3.75 4.875C3.75 5.07391 3.67098 5.26468 3.53033 5.40533C3.38968 5.54598 3.19891 5.625 3 5.625ZM5.25 5.625C5.10166 5.625 4.95666 5.58101 4.83332 5.4986C4.70999 5.41619 4.61386 5.29906 4.55709 5.16201C4.50032 5.02497 4.48547 4.87417 4.51441 4.72868C4.54335 4.5832 4.61478 4.44956 4.71967 4.34467C4.82456 4.23978 4.9582 4.16835 5.10368 4.13941C5.24917 4.11047 5.39997 4.12532 5.53701 4.18209C5.67406 4.23886 5.79119 4.33499 5.8736 4.45832C5.95601 4.58166 6 4.72666 6 4.875C6 5.07391 5.92098 5.26468 5.78033 5.40533C5.63968 5.54598 5.44891 5.625 5.25 5.625ZM7.5 5.625C7.35166 5.625 7.20666 5.58101 7.08332 5.4986C6.95999 5.41619 6.86386 5.29906 6.80709 5.16201C6.75032 5.02497 6.73547 4.87417 6.76441 4.72868C6.79335 4.5832 6.86478 4.44956 6.96967 4.34467C7.07456 4.23978 7.2082 4.16835 7.35368 4.13941C7.49917 4.11047 7.64997 4.12532 7.78701 4.18209C7.92406 4.23886 8.04119 4.33499 8.1236 4.45832C8.20601 4.58166 8.25 4.72666 8.25 4.875C8.25 5.07391 8.17098 5.26468 8.03033 5.40533C7.88968 5.54598 7.69891 5.625 7.5 5.625Z" fill="#FFB900"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/assets/icons/open-quotes.svg:
--------------------------------------------------------------------------------
1 | <svg width="30" height="28" viewBox="0 0 30 28" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M12.9168 1.23505V6.26199C12.9168 6.94407 12.3663 7.49652 11.6875 7.49652C9.26544 7.49652 7.94779 9.99114 7.76491 14.9155H11.6875C12.3662 14.9155 12.9168 15.4688 12.9168 16.1501V26.7647C12.9168 27.4465 12.3663 27.999 11.6875 27.999H1.22938C0.550794 27.999 1.90735e-06 27.4459 1.90735e-06 26.7647V16.15C1.90735e-06 13.7896 0.237283 11.6235 0.703081 9.71055C1.1816 7.74949 1.91613 6.035 2.8858 4.61422C3.88306 3.15417 5.13161 2.00845 6.59457 1.21054C8.06863 0.407542 9.78211 0 11.688 0C12.3662 0.000517841 12.9168 0.553485 12.9168 1.23505ZM28.771 7.49696C29.4496 7.49696 30 6.94407 30 6.26294V1.23497C30 0.553488 29.4496 0.000951767 28.771 0.000951767C26.866 0.000951767 25.1517 0.408578 23.6785 1.21149C22.2148 2.00931 20.9664 3.15408 19.9693 4.61517C18.999 6.03595 18.2645 7.75053 17.786 9.71254C17.32 11.6255 17.0832 13.7917 17.0832 16.151V26.7657C17.0832 27.4476 17.6341 28 18.3125 28H28.771C29.4496 28 30 27.447 30 26.7657V16.151C30 15.4693 29.4496 14.9165 28.771 14.9165H24.9035C25.0841 9.99165 26.3828 7.49696 28.771 7.49696Z" fill="#634700"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/icons/play.svg:
--------------------------------------------------------------------------------
1 | <svg width="10" height="12" viewBox="0 0 10 12" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M9.9861 5.99998L0.974093 11.1753L0.998162 0.783001L9.9861 5.99998Z" fill="#FFB900"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/icons/speaker.svg:
--------------------------------------------------------------------------------
1 | <svg width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M21 5.875V0.625C17.698 2.94934 13.7862 4.25325 9.75 4.375H6.75V11.875C6.75 14.1625 6.75 17.65 10.9875 19.3375H11.25C11.431 19.3448 11.6085 19.2863 11.7497 19.1729C11.8909 19.0595 11.9864 18.8989 12.0184 18.7206C12.0504 18.5423 12.0168 18.3585 11.9238 18.2031C11.8308 18.0476 11.6847 17.9311 11.5125 17.875C8.25 16.6 8.25 14.0875 8.25 11.875H9.75C13.8052 11.8857 17.7494 13.2005 21 15.625V10.375C21.5967 10.375 22.169 10.1379 22.591 9.71599C23.0129 9.29403 23.25 8.72174 23.25 8.125C23.25 7.52826 23.0129 6.95597 22.591 6.53401C22.169 6.11205 21.5967 5.875 21 5.875V5.875ZM0.75 6.625V9.625C0.75 10.2217 0.987053 10.794 1.40901 11.216C1.83097 11.6379 2.40326 11.875 3 11.875H5.25V4.375H3C2.40326 4.375 1.83097 4.61205 1.40901 5.03401C0.987053 5.45597 0.75 6.02826 0.75 6.625V6.625Z" fill="#5C50E4"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/icons/star.svg:
--------------------------------------------------------------------------------
1 | <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M9 0L11.0206 6.21885H17.5595L12.2694 10.0623L14.2901 16.2812L9 12.4377L3.70993 16.2812L5.73056 10.0623L0.440492 6.21885H6.97937L9 0Z" fill="#FEA31B"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/icons/twitter.svg:
--------------------------------------------------------------------------------
1 | <svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M5.64991 15C3.57026 15 1.63168 14.3864 0 13.3276C1.38535 13.4185 3.83019 13.2007 5.35087 11.7292C3.06326 11.6227 2.0316 9.8428 1.89703 9.08215C2.0914 9.15822 3.01841 9.24949 3.54172 9.03651C0.91022 8.36714 0.506525 6.02434 0.596235 5.30933C1.08964 5.65923 1.92694 5.78093 2.25587 5.75051C-0.196205 3.97059 0.685945 1.2931 1.11954 0.71501C2.87924 3.18826 5.51649 4.57733 8.7791 4.65459C8.71759 4.38089 8.6851 4.09593 8.6851 3.80325C8.6851 1.70277 10.3586 0 12.423 0C13.5016 0 14.4735 0.46484 15.1558 1.20837C15.8766 1.03703 16.9613 0.635914 17.4916 0.289047C17.2243 1.26268 16.3922 2.07488 15.8888 2.37592C15.893 2.38616 15.8847 2.36563 15.8888 2.37592C16.331 2.30807 17.5274 2.07481 18 1.74949C17.7663 2.29647 16.884 3.20591 16.16 3.71506C16.2947 9.74221 11.7492 15 5.64991 15Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/assets/img/blog-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/blog-1.jpg


--------------------------------------------------------------------------------
/assets/img/blog-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/blog-2.jpg


--------------------------------------------------------------------------------
/assets/img/blog-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/blog-3.jpg


--------------------------------------------------------------------------------
/assets/img/course-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/course-1.jpg


--------------------------------------------------------------------------------
/assets/img/course-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/course-2.jpg


--------------------------------------------------------------------------------
/assets/img/course-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/course-3.jpg


--------------------------------------------------------------------------------
/assets/img/feature-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/feature-1.jpg


--------------------------------------------------------------------------------
/assets/img/feature-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/feature-2.jpg


--------------------------------------------------------------------------------
/assets/img/feature-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/feature-3.jpg


--------------------------------------------------------------------------------
/assets/img/feedback-avatar-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/feedback-avatar-1.jpg


--------------------------------------------------------------------------------
/assets/img/feedback-avatar-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/feedback-avatar-2.jpg


--------------------------------------------------------------------------------
/assets/img/feedback-avatar-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/feedback-avatar-3.jpg


--------------------------------------------------------------------------------
/assets/img/hero-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/sondnpt00343/htmlcss-project-02/e96c9a840fb3e6656e93e28fbaf190678a9ff652/assets/img/hero-img.jpg


--------------------------------------------------------------------------------
/assets/img/logo-white.svg:
--------------------------------------------------------------------------------
1 | <svg width="82" height="17" viewBox="0 0 82 17" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M3.60156 0.296875V13.0703H11.4531V16H0.34375V0.296875H3.60156ZM19.9375 3.85938C21.0938 3.85938 22.0859 4.10938 22.9141 4.60938C23.7578 5.10938 24.3984 5.80469 24.8359 6.69531C25.2891 7.57031 25.5156 8.58594 25.5156 9.74219V11.0078H16.9375C17.0938 11.8047 17.4844 12.4453 18.1094 12.9297C18.7344 13.4141 19.5 13.6562 20.4062 13.6562C21.2656 13.6562 22.0469 13.4844 22.75 13.1406C23.4531 12.7969 24.0156 12.4453 24.4375 12.0859L24.4141 14.8516C24.0391 15.1797 23.4766 15.5156 22.7266 15.8594C21.9922 16.1875 21.1797 16.3516 20.2891 16.3516C19.1172 16.3516 18.0469 16.0859 17.0781 15.5547C16.125 15.0234 15.3594 14.2969 14.7812 13.375C14.2188 12.4531 13.9375 11.3984 13.9375 10.2109C13.9375 9.05469 14.1953 8 14.7109 7.04688C15.2266 6.09375 15.9375 5.32812 16.8438 4.75C17.75 4.15625 18.7812 3.85938 19.9375 3.85938ZM19.8672 6.46094C19.1328 6.46094 18.5156 6.6875 18.0156 7.14062C17.5156 7.59375 17.1719 8.20312 16.9844 8.96875H22.6562C22.5938 8.125 22.2812 7.5 21.7188 7.09375C21.1562 6.67188 20.5391 6.46094 19.8672 6.46094ZM32.0547 3.85938C32.7891 3.85938 33.4688 3.96875 34.0938 4.1875C34.7188 4.40625 35.2031 4.65625 35.5469 4.9375V7.5625C35.1719 7.3125 34.7109 7.07031 34.1641 6.83594C33.6328 6.60156 33.0781 6.48438 32.5 6.48438C31.9375 6.48438 31.4922 6.60938 31.1641 6.85938C30.8359 7.10938 30.6719 7.40625 30.6719 7.75C30.6719 8 30.7656 8.23438 30.9531 8.45312C31.1406 8.65625 31.5 8.83594 32.0312 8.99219L33.3672 9.4375C35.1641 9.96875 36.0625 11.0078 36.0625 12.5547C36.0625 13.2891 35.8516 13.9453 35.4297 14.5234C35.0234 15.0859 34.4688 15.5312 33.7656 15.8594C33.0781 16.1875 32.3125 16.3516 31.4688 16.3516C30.6719 16.3516 29.8984 16.2266 29.1484 15.9766C28.3984 15.7266 27.8281 15.4531 27.4375 15.1562V12.5547C27.7344 12.7578 28.0938 12.9531 28.5156 13.1406C28.9375 13.3281 29.375 13.4844 29.8281 13.6094C30.2812 13.7188 30.6953 13.7734 31.0703 13.7734C31.6641 13.7734 32.1172 13.6719 32.4297 13.4688C32.7578 13.25 32.9219 12.9453 32.9219 12.5547C32.9219 12.2578 32.7891 12.0234 32.5234 11.8516C32.2578 11.6797 31.8672 11.5078 31.3516 11.3359L29.8984 10.8203C28.9922 10.5234 28.3672 10.1016 28.0234 9.55469C27.6797 9.00781 27.5078 8.35938 27.5078 7.60938C27.5078 6.85938 27.6953 6.21094 28.0703 5.66406C28.4609 5.10156 29 4.66406 29.6875 4.35156C30.375 4.02344 31.1641 3.85938 32.0547 3.85938ZM42.4141 3.85938C43.1484 3.85938 43.8281 3.96875 44.4531 4.1875C45.0781 4.40625 45.5625 4.65625 45.9062 4.9375V7.5625C45.5312 7.3125 45.0703 7.07031 44.5234 6.83594C43.9922 6.60156 43.4375 6.48438 42.8594 6.48438C42.2969 6.48438 41.8516 6.60938 41.5234 6.85938C41.1953 7.10938 41.0312 7.40625 41.0312 7.75C41.0312 8 41.125 8.23438 41.3125 8.45312C41.5 8.65625 41.8594 8.83594 42.3906 8.99219L43.7266 9.4375C45.5234 9.96875 46.4219 11.0078 46.4219 12.5547C46.4219 13.2891 46.2109 13.9453 45.7891 14.5234C45.3828 15.0859 44.8281 15.5312 44.125 15.8594C43.4375 16.1875 42.6719 16.3516 41.8281 16.3516C41.0312 16.3516 40.2578 16.2266 39.5078 15.9766C38.7578 15.7266 38.1875 15.4531 37.7969 15.1562V12.5547C38.0938 12.7578 38.4531 12.9531 38.875 13.1406C39.2969 13.3281 39.7344 13.4844 40.1875 13.6094C40.6406 13.7188 41.0547 13.7734 41.4297 13.7734C42.0234 13.7734 42.4766 13.6719 42.7891 13.4688C43.1172 13.25 43.2812 12.9453 43.2812 12.5547C43.2812 12.2578 43.1484 12.0234 42.8828 11.8516C42.6172 11.6797 42.2266 11.5078 41.7109 11.3359L40.2578 10.8203C39.3516 10.5234 38.7266 10.1016 38.3828 9.55469C38.0391 9.00781 37.8672 8.35938 37.8672 7.60938C37.8672 6.85938 38.0547 6.21094 38.4297 5.66406C38.8203 5.10156 39.3594 4.66406 40.0469 4.35156C40.7344 4.02344 41.5234 3.85938 42.4141 3.85938ZM54.4609 3.85938C55.6172 3.85938 56.6719 4.14062 57.625 4.70312C58.5781 5.25 59.3438 6 59.9219 6.95312C60.5156 7.89062 60.8125 8.94531 60.8125 10.1172C60.8125 11.2891 60.5156 12.3438 59.9219 13.2812C59.3438 14.2188 58.5781 14.9688 57.625 15.5312C56.6719 16.0781 55.6172 16.3516 54.4609 16.3516C53.3203 16.3516 52.2656 16.0781 51.2969 15.5312C50.3438 14.9688 49.5781 14.2188 49 13.2812C48.4219 12.3438 48.1328 11.2891 48.1328 10.1172C48.1328 8.94531 48.4219 7.89062 49 6.95312C49.5781 6 50.3438 5.25 51.2969 4.70312C52.2656 4.14062 53.3203 3.85938 54.4609 3.85938ZM54.4609 6.74219C53.8984 6.74219 53.375 6.875 52.8906 7.14062C52.4062 7.40625 52.0156 7.78906 51.7188 8.28906C51.4375 8.78906 51.2969 9.39844 51.2969 10.1172C51.2969 10.8359 51.4375 11.4453 51.7188 11.9453C52.0156 12.4453 52.4062 12.8281 52.8906 13.0938C53.375 13.3438 53.8984 13.4688 54.4609 13.4688C55.0234 13.4688 55.5469 13.3438 56.0312 13.0938C56.5156 12.8281 56.9062 12.4453 57.2031 11.9453C57.5 11.4453 57.6484 10.8359 57.6484 10.1172C57.6484 9.39844 57.5 8.78906 57.2031 8.28906C56.9062 7.78906 56.5156 7.40625 56.0312 7.14062C55.5469 6.875 55.0234 6.74219 54.4609 6.74219ZM66.6016 4.16406V5.85156C66.9609 5.36719 67.4453 4.91406 68.0547 4.49219C68.6797 4.07031 69.3906 3.85938 70.1875 3.85938C71.3906 3.85938 72.3984 4.26562 73.2109 5.07812C74.0234 5.89062 74.4297 7.10938 74.4297 8.73438V16H71.4531L71.4297 9.13281C71.4297 8.33594 71.2344 7.74219 70.8438 7.35156C70.4688 6.96094 69.9453 6.76562 69.2734 6.76562C68.7422 6.76562 68.2422 6.9375 67.7734 7.28125C67.3203 7.625 66.9297 8.03125 66.6016 8.5V16H63.625V4.16406H66.6016Z" fill="white"/>
3 | <path d="M79.2578 12.6719C79.7734 12.6719 80.2109 12.8594 80.5703 13.2344C80.9453 13.5938 81.1328 14.0312 81.1328 14.5469C81.1328 15.0625 80.9453 15.5078 80.5703 15.8828C80.2109 16.2422 79.7734 16.4219 79.2578 16.4219C78.7422 16.4219 78.2969 16.2422 77.9219 15.8828C77.5625 15.5078 77.3828 15.0625 77.3828 14.5469C77.3828 14.0312 77.5625 13.5938 77.9219 13.2344C78.2969 12.8594 78.7422 12.6719 79.2578 12.6719Z" fill="#FFB900"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/assets/img/logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="82" height="17" viewBox="0 0 82 17" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M3.60156 0.296875V13.0703H11.4531V16H0.34375V0.296875H3.60156ZM19.9375 3.85938C21.0938 3.85938 22.0859 4.10938 22.9141 4.60938C23.7578 5.10938 24.3984 5.80469 24.8359 6.69531C25.2891 7.57031 25.5156 8.58594 25.5156 9.74219V11.0078H16.9375C17.0938 11.8047 17.4844 12.4453 18.1094 12.9297C18.7344 13.4141 19.5 13.6562 20.4062 13.6562C21.2656 13.6562 22.0469 13.4844 22.75 13.1406C23.4531 12.7969 24.0156 12.4453 24.4375 12.0859L24.4141 14.8516C24.0391 15.1797 23.4766 15.5156 22.7266 15.8594C21.9922 16.1875 21.1797 16.3516 20.2891 16.3516C19.1172 16.3516 18.0469 16.0859 17.0781 15.5547C16.125 15.0234 15.3594 14.2969 14.7812 13.375C14.2188 12.4531 13.9375 11.3984 13.9375 10.2109C13.9375 9.05469 14.1953 8 14.7109 7.04688C15.2266 6.09375 15.9375 5.32812 16.8438 4.75C17.75 4.15625 18.7812 3.85938 19.9375 3.85938ZM19.8672 6.46094C19.1328 6.46094 18.5156 6.6875 18.0156 7.14062C17.5156 7.59375 17.1719 8.20312 16.9844 8.96875H22.6562C22.5938 8.125 22.2812 7.5 21.7188 7.09375C21.1562 6.67188 20.5391 6.46094 19.8672 6.46094ZM32.0547 3.85938C32.7891 3.85938 33.4688 3.96875 34.0938 4.1875C34.7188 4.40625 35.2031 4.65625 35.5469 4.9375V7.5625C35.1719 7.3125 34.7109 7.07031 34.1641 6.83594C33.6328 6.60156 33.0781 6.48438 32.5 6.48438C31.9375 6.48438 31.4922 6.60938 31.1641 6.85938C30.8359 7.10938 30.6719 7.40625 30.6719 7.75C30.6719 8 30.7656 8.23438 30.9531 8.45312C31.1406 8.65625 31.5 8.83594 32.0312 8.99219L33.3672 9.4375C35.1641 9.96875 36.0625 11.0078 36.0625 12.5547C36.0625 13.2891 35.8516 13.9453 35.4297 14.5234C35.0234 15.0859 34.4688 15.5312 33.7656 15.8594C33.0781 16.1875 32.3125 16.3516 31.4688 16.3516C30.6719 16.3516 29.8984 16.2266 29.1484 15.9766C28.3984 15.7266 27.8281 15.4531 27.4375 15.1562V12.5547C27.7344 12.7578 28.0938 12.9531 28.5156 13.1406C28.9375 13.3281 29.375 13.4844 29.8281 13.6094C30.2812 13.7188 30.6953 13.7734 31.0703 13.7734C31.6641 13.7734 32.1172 13.6719 32.4297 13.4688C32.7578 13.25 32.9219 12.9453 32.9219 12.5547C32.9219 12.2578 32.7891 12.0234 32.5234 11.8516C32.2578 11.6797 31.8672 11.5078 31.3516 11.3359L29.8984 10.8203C28.9922 10.5234 28.3672 10.1016 28.0234 9.55469C27.6797 9.00781 27.5078 8.35938 27.5078 7.60938C27.5078 6.85938 27.6953 6.21094 28.0703 5.66406C28.4609 5.10156 29 4.66406 29.6875 4.35156C30.375 4.02344 31.1641 3.85938 32.0547 3.85938ZM42.4141 3.85938C43.1484 3.85938 43.8281 3.96875 44.4531 4.1875C45.0781 4.40625 45.5625 4.65625 45.9062 4.9375V7.5625C45.5312 7.3125 45.0703 7.07031 44.5234 6.83594C43.9922 6.60156 43.4375 6.48438 42.8594 6.48438C42.2969 6.48438 41.8516 6.60938 41.5234 6.85938C41.1953 7.10938 41.0312 7.40625 41.0312 7.75C41.0312 8 41.125 8.23438 41.3125 8.45312C41.5 8.65625 41.8594 8.83594 42.3906 8.99219L43.7266 9.4375C45.5234 9.96875 46.4219 11.0078 46.4219 12.5547C46.4219 13.2891 46.2109 13.9453 45.7891 14.5234C45.3828 15.0859 44.8281 15.5312 44.125 15.8594C43.4375 16.1875 42.6719 16.3516 41.8281 16.3516C41.0312 16.3516 40.2578 16.2266 39.5078 15.9766C38.7578 15.7266 38.1875 15.4531 37.7969 15.1562V12.5547C38.0938 12.7578 38.4531 12.9531 38.875 13.1406C39.2969 13.3281 39.7344 13.4844 40.1875 13.6094C40.6406 13.7188 41.0547 13.7734 41.4297 13.7734C42.0234 13.7734 42.4766 13.6719 42.7891 13.4688C43.1172 13.25 43.2812 12.9453 43.2812 12.5547C43.2812 12.2578 43.1484 12.0234 42.8828 11.8516C42.6172 11.6797 42.2266 11.5078 41.7109 11.3359L40.2578 10.8203C39.3516 10.5234 38.7266 10.1016 38.3828 9.55469C38.0391 9.00781 37.8672 8.35938 37.8672 7.60938C37.8672 6.85938 38.0547 6.21094 38.4297 5.66406C38.8203 5.10156 39.3594 4.66406 40.0469 4.35156C40.7344 4.02344 41.5234 3.85938 42.4141 3.85938ZM54.4609 3.85938C55.6172 3.85938 56.6719 4.14062 57.625 4.70312C58.5781 5.25 59.3438 6 59.9219 6.95312C60.5156 7.89062 60.8125 8.94531 60.8125 10.1172C60.8125 11.2891 60.5156 12.3438 59.9219 13.2812C59.3438 14.2188 58.5781 14.9688 57.625 15.5312C56.6719 16.0781 55.6172 16.3516 54.4609 16.3516C53.3203 16.3516 52.2656 16.0781 51.2969 15.5312C50.3438 14.9688 49.5781 14.2188 49 13.2812C48.4219 12.3438 48.1328 11.2891 48.1328 10.1172C48.1328 8.94531 48.4219 7.89062 49 6.95312C49.5781 6 50.3438 5.25 51.2969 4.70312C52.2656 4.14062 53.3203 3.85938 54.4609 3.85938ZM54.4609 6.74219C53.8984 6.74219 53.375 6.875 52.8906 7.14062C52.4062 7.40625 52.0156 7.78906 51.7188 8.28906C51.4375 8.78906 51.2969 9.39844 51.2969 10.1172C51.2969 10.8359 51.4375 11.4453 51.7188 11.9453C52.0156 12.4453 52.4062 12.8281 52.8906 13.0938C53.375 13.3438 53.8984 13.4688 54.4609 13.4688C55.0234 13.4688 55.5469 13.3438 56.0312 13.0938C56.5156 12.8281 56.9062 12.4453 57.2031 11.9453C57.5 11.4453 57.6484 10.8359 57.6484 10.1172C57.6484 9.39844 57.5 8.78906 57.2031 8.28906C56.9062 7.78906 56.5156 7.40625 56.0312 7.14062C55.5469 6.875 55.0234 6.74219 54.4609 6.74219ZM66.6016 4.16406V5.85156C66.9609 5.36719 67.4453 4.91406 68.0547 4.49219C68.6797 4.07031 69.3906 3.85938 70.1875 3.85938C71.3906 3.85938 72.3984 4.26562 73.2109 5.07812C74.0234 5.89062 74.4297 7.10938 74.4297 8.73438V16H71.4531L71.4297 9.13281C71.4297 8.33594 71.2344 7.74219 70.8438 7.35156C70.4688 6.96094 69.9453 6.76562 69.2734 6.76562C68.7422 6.76562 68.2422 6.9375 67.7734 7.28125C67.3203 7.625 66.9297 8.03125 66.6016 8.5V16H63.625V4.16406H66.6016Z" fill="#171100"/>
3 | <path d="M79.2578 12.6719C79.7734 12.6719 80.2109 12.8594 80.5703 13.2344C80.9453 13.5938 81.1328 14.0312 81.1328 14.5469C81.1328 15.0625 80.9453 15.5078 80.5703 15.8828C80.2109 16.2422 79.7734 16.4219 79.2578 16.4219C78.7422 16.4219 78.2969 16.2422 77.9219 15.8828C77.5625 15.5078 77.3828 15.0625 77.3828 14.5469C77.3828 14.0312 77.5625 13.5938 77.9219 13.2344C78.2969 12.8594 78.7422 12.6719 79.2578 12.6719Z" fill="#FFB900"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |     <head>
  4 |         <meta charset="UTF-8" />
  5 |         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |         <title>F8 Project 02</title>
  8 |         <!-- Reset CSS -->
  9 |         <link rel="stylesheet" href="./assets/css/reset.css" />
 10 | 
 11 |         <!-- Embed fonts -->
 12 |         <link rel="preconnect" href="https://fonts.googleapis.com" />
 13 |         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 14 |         <link
 15 |             href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Sen:wght@700&display=swap"
 16 |             rel="stylesheet"
 17 |         />
 18 | 
 19 |         <!-- Styles -->
 20 |         <link rel="stylesheet" href="./assets/css/styles.css" />
 21 |     </head>
 22 |     <body>
 23 |         <!-- Header -->
 24 |         <header class="header fixed">
 25 |             <div class="main-content">
 26 |                 <div class="body">
 27 |                     <!-- Logo -->
 28 |                     <img
 29 |                         src="./assets/img/logo.svg"
 30 |                         alt="Lesson."
 31 |                         class="logo"
 32 |                     />
 33 | 
 34 |                     <!-- Nav -->
 35 |                     <nav class="nav">
 36 |                         <ul>
 37 |                             <li class="active">
 38 |                                 <a href="#!">Home</a>
 39 |                             </li>
 40 |                             <li>
 41 |                                 <a href="#!">Courses</a>
 42 |                             </li>
 43 |                             <li>
 44 |                                 <a href="#!">Pricing</a>
 45 |                             </li>
 46 |                             <li>
 47 |                                 <a href="#!">Reviews</a>
 48 |                             </li>
 49 |                         </ul>
 50 |                     </nav>
 51 | 
 52 |                     <!-- Action -->
 53 |                     <div class="action">
 54 |                         <a href="#!" class="btn sign-up-btn">Sign Up</a>
 55 |                     </div>
 56 |                 </div>
 57 |             </div>
 58 |         </header>
 59 | 
 60 |         <main>
 61 |             <!-- Hero -->
 62 |             <div class="hero">
 63 |                 <div class="main-content">
 64 |                     <div class="body">
 65 |                         <!-- Hero left -->
 66 |                         <div class="media-block">
 67 |                             <img
 68 |                                 src="./assets/img/hero-img.jpg"
 69 |                                 alt="Learn without limits and spread knowledge."
 70 |                                 class="img"
 71 |                             />
 72 | 
 73 |                             <div class="hero-summary">
 74 |                                 <div class="item">
 75 |                                     <div class="icon">
 76 |                                         <img
 77 |                                             src="./assets/icons/list.svg"
 78 |                                             alt=""
 79 |                                         />
 80 |                                     </div>
 81 |                                     <div class="info">
 82 |                                         <p class="label">20 Courses</p>
 83 |                                         <p class="title">UI/UX Design</p>
 84 |                                     </div>
 85 |                                 </div>
 86 |                                 <div class="item">
 87 |                                     <div class="icon">
 88 |                                         <img
 89 |                                             src="./assets/icons/code.svg"
 90 |                                             alt=""
 91 |                                         />
 92 |                                     </div>
 93 |                                     <div class="info">
 94 |                                         <p class="label">20 Courses</p>
 95 |                                         <p class="title">Development</p>
 96 |                                     </div>
 97 |                                 </div>
 98 |                                 <div class="item">
 99 |                                     <div class="icon">
100 |                                         <img
101 |                                             src="./assets/icons/speaker.svg"
102 |                                             alt=""
103 |                                         />
104 |                                     </div>
105 |                                     <div class="info">
106 |                                         <p class="label">30 Courses</p>
107 |                                         <p class="title">Marketing</p>
108 |                                     </div>
109 |                                 </div>
110 |                             </div>
111 |                         </div>
112 | 
113 |                         <!-- Hero right -->
114 |                         <div class="content-block">
115 |                             <h1 class="heading lv1">
116 |                                 Learn without limits and spread knowledge.
117 |                             </h1>
118 |                             <p class="desc">
119 |                                 Build new skills for that “this is my year”
120 |                                 feeling with courses, certificates, and degrees
121 |                                 from world-class universities and companies.
122 |                             </p>
123 |                             <div class="cta-group">
124 |                                 <a href="#!" class="btn hero-cta"
125 |                                     >See Courses</a
126 |                                 >
127 |                                 <button class="watch-video">
128 |                                     <div class="icon">
129 |                                         <img
130 |                                             src="./assets/icons/play.svg"
131 |                                             alt=""
132 |                                         />
133 |                                     </div>
134 |                                     <span>Watch Video</span>
135 |                                 </button>
136 |                             </div>
137 |                             <p class="desc">Recent engagement</p>
138 |                             <p class="desc stats">
139 |                                 <strong>50K</strong> Students
140 |                                 <strong>70+</strong> Courses
141 |                             </p>
142 |                         </div>
143 |                     </div>
144 |                 </div>
145 |             </div>
146 | 
147 |             <!-- Popular -->
148 |             <div class="popular">
149 |                 <div class="main-content">
150 |                     <div class="popular-top">
151 |                         <div class="info">
152 |                             <h2 class="heading lv2">Our popular courses</h2>
153 |                             <p class="desc">
154 |                                 Build new skills with new trendy courses and
155 |                                 shine for the next future career.
156 |                             </p>
157 |                         </div>
158 |                         <div class="controls">
159 |                             <button class="control-btn">
160 |                                 <svg
161 |                                     width="8"
162 |                                     height="14"
163 |                                     viewBox="0 0 8 14"
164 |                                     fill="none"
165 |                                     xmlns="http://www.w3.org/2000/svg"
166 |                                 >
167 |                                     <path
168 |                                         d="M7 1L1 7L7 13"
169 |                                         stroke="currentColor"
170 |                                         stroke-linecap="round"
171 |                                         stroke-linejoin="round"
172 |                                     />
173 |                                 </svg>
174 |                             </button>
175 |                             <button class="control-btn">
176 |                                 <svg
177 |                                     width="8"
178 |                                     height="14"
179 |                                     viewBox="0 0 8 14"
180 |                                     fill="none"
181 |                                     xmlns="http://www.w3.org/2000/svg"
182 |                                 >
183 |                                     <path
184 |                                         d="M1 1L7 7L1 13"
185 |                                         stroke="currentColor"
186 |                                         stroke-linecap="round"
187 |                                         stroke-linejoin="round"
188 |                                     />
189 |                                 </svg>
190 |                             </button>
191 |                         </div>
192 |                     </div>
193 | 
194 |                     <div class="course-list">
195 |                         <!-- Course item 1 -->
196 |                         <div class="course-item">
197 |                             <a href="#!">
198 |                                 <img
199 |                                     src="./assets/img/course-1.jpg"
200 |                                     alt="Basic web design"
201 |                                     class="thumb"
202 |                                 />
203 |                             </a>
204 |                             <div class="info">
205 |                                 <div class="head">
206 |                                     <h3 class="title">
207 |                                         <a
208 |                                             href="#!"
209 |                                             class="line-clamp break-all"
210 |                                         >
211 |                                             Basic web design
212 |                                         </a>
213 |                                     </h3>
214 |                                     <div class="rating">
215 |                                         <img
216 |                                             src="./assets/icons/star.svg"
217 |                                             alt="Star"
218 |                                             class="star"
219 |                                         />
220 |                                         <span class="value">4.5</span>
221 |                                     </div>
222 |                                 </div>
223 |                                 <p class="desc line-clamp line-2 break-all">
224 |                                     Get the best course, gain knowledge and
225 |                                     shine for your future career.
226 |                                 </p>
227 |                                 <div class="foot">
228 |                                     <span class="price">$120.75</span>
229 |                                     <button class="btn book-btn">
230 |                                         Book Now
231 |                                     </button>
232 |                                 </div>
233 |                             </div>
234 |                         </div>
235 | 
236 |                         <!-- Course item 2 -->
237 |                         <div class="course-item">
238 |                             <a href="#!">
239 |                                 <img
240 |                                     src="./assets/img/course-2.jpg"
241 |                                     alt="UI/UX design"
242 |                                     class="thumb"
243 |                                 />
244 |                             </a>
245 |                             <div class="info">
246 |                                 <div class="head">
247 |                                     <h3 class="title">
248 |                                         <a
249 |                                             href="#!"
250 |                                             class="line-clamp break-all"
251 |                                         >
252 |                                             UI/UX design
253 |                                         </a>
254 |                                     </h3>
255 |                                     <div class="rating">
256 |                                         <img
257 |                                             src="./assets/icons/star.svg"
258 |                                             alt="Star"
259 |                                             class="star"
260 |                                         />
261 |                                         <span class="value">4.5</span>
262 |                                     </div>
263 |                                 </div>
264 |                                 <p class="desc line-clamp line-2 break-all">
265 |                                     Get the best course, gain knowledge and
266 |                                     shine for your future career.
267 |                                 </p>
268 |                                 <div class="foot">
269 |                                     <span class="price">$120.75</span>
270 |                                     <button class="btn book-btn">
271 |                                         Book Now
272 |                                     </button>
273 |                                 </div>
274 |                             </div>
275 |                         </div>
276 | 
277 |                         <!-- Course item 3 -->
278 |                         <div class="course-item">
279 |                             <a href="#!">
280 |                                 <img
281 |                                     src="./assets/img/course-3.jpg"
282 |                                     alt="Web App design"
283 |                                     class="thumb"
284 |                                 />
285 |                             </a>
286 |                             <div class="info">
287 |                                 <div class="head">
288 |                                     <h3 class="title">
289 |                                         <a
290 |                                             href="#!"
291 |                                             class="line-clamp break-all"
292 |                                         >
293 |                                             Web App design
294 |                                         </a>
295 |                                     </h3>
296 |                                     <div class="rating">
297 |                                         <img
298 |                                             src="./assets/icons/star.svg"
299 |                                             alt="Star"
300 |                                             class="star"
301 |                                         />
302 |                                         <span class="value">4.5</span>
303 |                                     </div>
304 |                                 </div>
305 |                                 <p class="desc line-clamp line-2 break-all">
306 |                                     Get the best course, gain knowledge and
307 |                                     shine for your future career.
308 |                                 </p>
309 |                                 <div class="foot">
310 |                                     <span class="price">$120.75</span>
311 |                                     <button class="btn book-btn">
312 |                                         Book Now
313 |                                     </button>
314 |                                 </div>
315 |                             </div>
316 |                         </div>
317 |                     </div>
318 |                 </div>
319 |             </div>
320 | 
321 |             <!-- Feedback -->
322 |             <div class="feedback">
323 |                 <div class="main-content">
324 |                     <div class="feedback-list">
325 |                         <!-- Feedback item 1 -->
326 |                         <div class="feedback-item">
327 |                             <div class="info">
328 |                                 <img
329 |                                     src="./assets/img/feedback-avatar-1.jpg"
330 |                                     alt="Peter Moor"
331 |                                     class="avatar"
332 |                                 />
333 |                                 <p class="title">Peter Moor</p>
334 |                                 <p class="desc">Student of Web Design</p>
335 |                                 <div class="dots">
336 |                                     <span class="dot active"></span>
337 |                                     <span class="dot"></span>
338 |                                     <span class="dot"></span>
339 |                                 </div>
340 |                             </div>
341 |                             <div class="content">
342 |                                 <img
343 |                                     src="./assets/icons/open-quotes.svg"
344 |                                     alt=""
345 |                                     class="open-quotes"
346 |                                 />
347 |                                 <blockquote>
348 |                                     Not only does my resume look
349 |                                     impressive—filled with the names and logos
350 |                                     of world-class institutions—but these
351 |                                     certificates also bring me closer to my
352 |                                     career goals by validating the skills I've
353 |                                     learned."
354 |                                 </blockquote>
355 |                             </div>
356 |                         </div>
357 | 
358 |                         <!-- Feedback item 2 -->
359 |                         <div class="feedback-item">
360 |                             <div class="info">
361 |                                 <img
362 |                                     src="./assets/img/feedback-avatar-2.jpg"
363 |                                     alt="Peter Moor"
364 |                                     class="avatar"
365 |                                 />
366 |                                 <p class="title">Peter Moor</p>
367 |                                 <p class="desc">Student of Web Design</p>
368 |                                 <div class="dots">
369 |                                     <span class="dot"></span>
370 |                                     <span class="dot active"></span>
371 |                                     <span class="dot"></span>
372 |                                 </div>
373 |                             </div>
374 |                             <div class="content">
375 |                                 <img
376 |                                     src="./assets/icons/open-quotes.svg"
377 |                                     alt=""
378 |                                     class="open-quotes"
379 |                                 />
380 |                                 <blockquote>
381 |                                     Not only does my resume look
382 |                                     impressive—filled with the names and logos
383 |                                     of world-class institutions—but these
384 |                                     certificates also bring me closer to my
385 |                                     career goals by validating the skills I've
386 |                                     learned."
387 |                                 </blockquote>
388 |                             </div>
389 |                         </div>
390 | 
391 |                         <!-- Feedback item 3 -->
392 |                         <div class="feedback-item">
393 |                             <div class="info">
394 |                                 <img
395 |                                     src="./assets/img/feedback-avatar-3.jpg"
396 |                                     alt="Peter Moor"
397 |                                     class="avatar"
398 |                                 />
399 |                                 <p class="title">Peter Moor</p>
400 |                                 <p class="desc">Student of Web Design</p>
401 |                                 <div class="dots">
402 |                                     <span class="dot"></span>
403 |                                     <span class="dot"></span>
404 |                                     <span class="dot active"></span>
405 |                                 </div>
406 |                             </div>
407 |                             <div class="content">
408 |                                 <img
409 |                                     src="./assets/icons/open-quotes.svg"
410 |                                     alt=""
411 |                                     class="open-quotes"
412 |                                 />
413 |                                 <blockquote>
414 |                                     Not only does my resume look
415 |                                     impressive—filled with the names and logos
416 |                                     of world-class institutions—but these
417 |                                     certificates also bring me closer to my
418 |                                     career goals by validating the skills I've
419 |                                     learned."
420 |                                 </blockquote>
421 |                             </div>
422 |                         </div>
423 |                     </div>
424 |                 </div>
425 |             </div>
426 | 
427 |             <!-- Features 1 -->
428 |             <div class="features">
429 |                 <div class="main-content">
430 |                     <div class="body">
431 |                         <div class="images">
432 |                             <img
433 |                                 class="lower"
434 |                                 src="./assets/img/feature-1.jpg"
435 |                                 alt="Learner outcomes through our awesome platform"
436 |                             />
437 |                             <img
438 |                                 src="./assets/img/feature-2.jpg"
439 |                                 alt="Learner outcomes through our awesome platform"
440 |                             />
441 |                         </div>
442 |                         <div class="content">
443 |                             <h2 class="heading lv2">
444 |                                 Learner outcomes through our awesome platform
445 |                             </h2>
446 |                             <p class="desc">
447 |                                 87% of people learning for professional
448 |                                 development report career benefits like getting
449 |                                 a promotion, a raise, or starting a new career.
450 |                             </p>
451 |                             <p class="desc">Lesson Impact Report (2022)</p>
452 |                             <a href="#!" class="btn cta-btn">Sign Up</a>
453 |                         </div>
454 |                     </div>
455 |                 </div>
456 |             </div>
457 | 
458 |             <!-- Features 2 -->
459 |             <div class="features features-2nd">
460 |                 <div class="main-content">
461 |                     <div class="body">
462 |                         <div class="images">
463 |                             <img
464 |                                 src="./assets/img/feature-3.jpg"
465 |                                 alt="Take the next step toward your personal and professional goals with Lesson."
466 |                             />
467 |                         </div>
468 |                         <div class="content">
469 |                             <h2 class="heading lv2">
470 |                                 Take the next step toward your personal and
471 |                                 professional goals with Lesson.
472 |                             </h2>
473 |                             <p class="desc">
474 |                                 Take the next step toward. Join now to receive
475 |                                 personalized and more recommendations from the
476 |                                 full Coursera catalog.
477 |                             </p>
478 |                             <a href="#!" class="btn cta-btn">Join Now</a>
479 |                         </div>
480 |                     </div>
481 |                 </div>
482 |             </div>
483 | 
484 |             <!-- Blog -->
485 |             <div class="blog">
486 |                 <div class="main-content">
487 |                     <div class="blog-top">
488 |                         <h2 class="heading lv2">Our blog</h2>
489 |                         <p class="desc">
490 |                             Read our regular travel blog and know the latest
491 |                             update of tour and travel
492 |                         </p>
493 |                     </div>
494 |                     <div class="blog-list">
495 |                         <!-- Blog item 1 -->
496 |                         <div class="item">
497 |                             <a href="#!">
498 |                                 <img
499 |                                     src="./assets/img/blog-1.jpg"
500 |                                     alt="How to become a pro web designer in 2022 and
501 |                                 get remot job?"
502 |                                     class="thumb"
503 |                                 />
504 |                             </a>
505 |                             <div class="info">
506 |                                 <span class="date">21 November 2021</span>
507 |                                 <h3 class="title">
508 |                                     <a href="#!">
509 |                                         How to become a pro web designer in 2022
510 |                                         and get remot job?
511 |                                     </a>
512 |                                 </h3>
513 |                                 <a href="#!" class="btn">Read More</a>
514 |                             </div>
515 |                         </div>
516 | 
517 |                         <!-- Blog item 2 -->
518 |                         <div class="item">
519 |                             <a href="#!">
520 |                                 <img
521 |                                     src="./assets/img/blog-2.jpg"
522 |                                     alt="How to become a pro web designer in 2022 and
523 |                                 get remot job?"
524 |                                     class="thumb"
525 |                                 />
526 |                             </a>
527 |                             <div class="info">
528 |                                 <span class="date">21 November 2021</span>
529 |                                 <h3 class="title">
530 |                                     <a href="#!">
531 |                                         How to become a pro web designer in 2022
532 |                                         and get remot job?
533 |                                     </a>
534 |                                 </h3>
535 |                                 <a href="#!" class="btn">Read More</a>
536 |                             </div>
537 |                         </div>
538 | 
539 |                         <!-- Blog item 3 -->
540 |                         <div class="item">
541 |                             <a href="#!">
542 |                                 <img
543 |                                     src="./assets/img/blog-3.jpg"
544 |                                     alt="How to become a pro web designer in 2022 and
545 |                                 get remot job?"
546 |                                     class="thumb"
547 |                                 />
548 |                             </a>
549 |                             <div class="info">
550 |                                 <span class="date">21 November 2021</span>
551 |                                 <h3 class="title">
552 |                                     <a href="#!">
553 |                                         How to become a pro web designer in 2022
554 |                                         and get remot job?
555 |                                     </a>
556 |                                 </h3>
557 |                                 <a href="#!" class="btn">Read More</a>
558 |                             </div>
559 |                         </div>
560 |                         <!-- Blog item 4 -->
561 |                         <div class="item">
562 |                             <a href="#!">
563 |                                 <img
564 |                                     src="./assets/img/blog-1.jpg"
565 |                                     alt="How to become a pro web designer in 2022 and
566 |                                 get remot job?"
567 |                                     class="thumb"
568 |                                 />
569 |                             </a>
570 |                             <div class="info">
571 |                                 <span class="date">21 November 2021</span>
572 |                                 <h3 class="title">
573 |                                     <a href="#!">
574 |                                         How to become a pro web designer in 2022
575 |                                         and get remot job?
576 |                                     </a>
577 |                                 </h3>
578 |                                 <a href="#!" class="btn">Read More</a>
579 |                             </div>
580 |                         </div>
581 | 
582 |                         <!-- Blog item 5 -->
583 |                         <div class="item">
584 |                             <a href="#!">
585 |                                 <img
586 |                                     src="./assets/img/blog-2.jpg"
587 |                                     alt="How to become a pro web designer in 2022 and
588 |                                 get remot job?"
589 |                                     class="thumb"
590 |                                 />
591 |                             </a>
592 |                             <div class="info">
593 |                                 <span class="date">21 November 2021</span>
594 |                                 <h3 class="title">
595 |                                     <a href="#!">
596 |                                         How to become a pro web designer in 2022
597 |                                         and get remot job?
598 |                                     </a>
599 |                                 </h3>
600 |                                 <a href="#!" class="btn">Read More</a>
601 |                             </div>
602 |                         </div>
603 | 
604 |                         <!-- Blog item 6 -->
605 |                         <div class="item">
606 |                             <a href="#!">
607 |                                 <img
608 |                                     src="./assets/img/blog-3.jpg"
609 |                                     alt="How to become a pro web designer in 2022 and
610 |                                 get remot job?"
611 |                                     class="thumb"
612 |                                 />
613 |                             </a>
614 |                             <div class="info">
615 |                                 <span class="date">21 November 2021</span>
616 |                                 <h3 class="title">
617 |                                     <a href="#!">
618 |                                         How to become a pro web designer in 2022
619 |                                         and get remot job?
620 |                                     </a>
621 |                                 </h3>
622 |                                 <a href="#!" class="btn">Read More</a>
623 |                             </div>
624 |                         </div>
625 |                         <!-- Blog item 7 -->
626 |                         <div class="item">
627 |                             <a href="#!">
628 |                                 <img
629 |                                     src="./assets/img/blog-1.jpg"
630 |                                     alt="How to become a pro web designer in 2022 and
631 |                                 get remot job?"
632 |                                     class="thumb"
633 |                                 />
634 |                             </a>
635 |                             <div class="info">
636 |                                 <span class="date">21 November 2021</span>
637 |                                 <h3 class="title">
638 |                                     <a href="#!">
639 |                                         How to become a pro web designer in 2022
640 |                                         and get remot job?
641 |                                     </a>
642 |                                 </h3>
643 |                                 <a href="#!" class="btn">Read More</a>
644 |                             </div>
645 |                         </div>
646 | 
647 |                         <!-- Blog item 8 -->
648 |                         <div class="item">
649 |                             <a href="#!">
650 |                                 <img
651 |                                     src="./assets/img/blog-2.jpg"
652 |                                     alt="How to become a pro web designer in 2022 and
653 |                                 get remot job?"
654 |                                     class="thumb"
655 |                                 />
656 |                             </a>
657 |                             <div class="info">
658 |                                 <span class="date">21 November 2021</span>
659 |                                 <h3 class="title">
660 |                                     <a href="#!">
661 |                                         How to become a pro web designer in 2022
662 |                                         and get remot job?
663 |                                     </a>
664 |                                 </h3>
665 |                                 <a href="#!" class="btn">Read More</a>
666 |                             </div>
667 |                         </div>
668 | 
669 |                         <!-- Blog item 9 -->
670 |                         <div class="item">
671 |                             <a href="#!">
672 |                                 <img
673 |                                     src="./assets/img/blog-3.jpg"
674 |                                     alt="How to become a pro web designer in 2022 and
675 |                                 get remot job?"
676 |                                     class="thumb"
677 |                                 />
678 |                             </a>
679 |                             <div class="info">
680 |                                 <span class="date">21 November 2021</span>
681 |                                 <h3 class="title">
682 |                                     <a href="#!">
683 |                                         How to become a pro web designer in 2022
684 |                                         and get remot job?
685 |                                     </a>
686 |                                 </h3>
687 |                                 <a href="#!" class="btn">Read More</a>
688 |                             </div>
689 |                         </div>
690 |                     </div>
691 |                     <div class="dots">
692 |                         <span class="dot"></span>
693 |                         <span class="dot active"></span>
694 |                         <span class="dot"></span>
695 |                     </div>
696 |                 </div>
697 |             </div>
698 |         </main>
699 | 
700 |         <!-- Footer -->
701 |         <footer class="footer">
702 |             <div class="main-content">
703 |                 <div class="row">
704 |                     <!-- Column 1 -->
705 |                     <div class="column">
706 |                         <img
707 |                             src="./assets/img/logo-white.svg"
708 |                             alt="Lesson."
709 |                             class="logo"
710 |                         />
711 |                         <p class="desc">
712 |                             Need to help for your dream Career? trust us. With
713 |                             Lesson, study becomes a lot easier with us.
714 |                         </p>
715 |                         <div class="socials">
716 |                             <a href="#!">
717 |                                 <img
718 |                                     src="./assets/icons/twitter.svg"
719 |                                     alt="Twitter"
720 |                                     class="icon"
721 |                                 />
722 |                             </a>
723 |                             <a href="#!">
724 |                                 <img
725 |                                     src="./assets/icons/facebook.svg"
726 |                                     alt="Facebook"
727 |                                     class="icon"
728 |                                 />
729 |                             </a>
730 |                             <a href="#!">
731 |                                 <img
732 |                                     src="./assets/icons/linkedin.svg"
733 |                                     alt="Linkedin"
734 |                                     class="icon"
735 |                                 />
736 |                             </a>
737 |                             <a href="#!">
738 |                                 <img
739 |                                     src="./assets/icons/instagram.svg"
740 |                                     alt="Instagram"
741 |                                     class="icon"
742 |                                 />
743 |                             </a>
744 |                         </div>
745 |                     </div>
746 | 
747 |                     <!-- Column 2 -->
748 |                     <div class="column">
749 |                         <h3 class="title">Company</h3>
750 |                         <ul class="list">
751 |                             <li>
752 |                                 <a href="#!">About Us</a>
753 |                             </li>
754 |                             <li>
755 |                                 <a href="#!">Features</a>
756 |                             </li>
757 |                             <li>
758 |                                 <a href="#!">Our Pricing</a>
759 |                             </li>
760 |                             <li>
761 |                                 <a href="#!">Latest News</a>
762 |                             </li>
763 |                         </ul>
764 |                     </div>
765 | 
766 |                     <!-- Column 3 -->
767 |                     <div class="column">
768 |                         <h3 class="title">Support</h3>
769 |                         <ul class="list">
770 |                             <li>
771 |                                 <a href="#!">FAQ’s</a>
772 |                             </li>
773 |                             <li>
774 |                                 <a href="#!">Terms & Conditions</a>
775 |                             </li>
776 |                             <li>
777 |                                 <a href="#!">Privacy Policy</a>
778 |                             </li>
779 |                             <li>
780 |                                 <a href="#!">Contact Us</a>
781 |                             </li>
782 |                         </ul>
783 |                     </div>
784 | 
785 |                     <!-- Column 4 -->
786 |                     <div class="column">
787 |                         <h3 class="title">Address</h3>
788 |                         <ul class="list">
789 |                             <li>
790 |                                 <a href="#!">
791 |                                     <strong>Location:</strong> 27 Division St,
792 |                                     New York, NY 10002, USA
793 |                                 </a>
794 |                             </li>
795 |                             <li>
796 |                                 <a href="#!">
797 |                                     <strong>Email:</strong> email@gmail.com
798 |                                 </a>
799 |                             </li>
800 |                             <li>
801 |                                 <a href="#!">
802 |                                     <strong>Phone:</strong> + 000 1234 567 890
803 |                                 </a>
804 |                             </li>
805 |                         </ul>
806 |                     </div>
807 |                 </div>
808 |                 <div class="copyright">
809 |                     <p>Copyright ©2022 webdesign.gdn All rights reserved</p>
810 |                 </div>
811 |             </div>
812 |         </footer>
813 |     </body>
814 | </html>
815 | 


--------------------------------------------------------------------------------