skilled-elearning-landing-page/index.html at main · DalaScript/skilled-elearning-landing-page · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">

  <title>Skilled e-learning landing page | Frontend Mentor</title>
  <link rel="stylesheet" href="./assets/styles/styles.css">
</head>
<body>
  <header>
    <div class="header">
      <a href="#" class="header__link">
        <picture>
          <source media="(min-width: 1440px)" width="111" height="28" srcset="./assets/images/logo-dark.svg">
          <img class="header__img" width="79.29" height="20" src="./assets/images/logo-dark.svg" alt="logo">
        </picture>
      </a>
      <button class="header__btn">Get Started</button>
    </div>
  </header>
  <main>
    <section class="intro">
      <div class="intro__wrapper">
        <div class="intro__inner">
          <h1 class="intro__title">
            Maximize skill, minimize budget
          </h1>
          <p class="intro__caption">
            Our modern courses across a range of in-demand skills will give you the
    knowledge you need to live the life you want.
          </p>
          <button class="intro__btn">Get Started</button>
        </div>
        <div class="intro__img-wrapper">
          <picture>
            <source media="(min-width: 1440px)" srcset="./assets/images/image-hero-desktop@2x.webp">
            <source media="(min-width: 768px)" srcset="./assets/images/image-hero-tablet@2x.webp">
            <img class="intro__img" src="./assets/images/image-hero-mobile@2x.webp" alt="logo">
          </picture>
        </div>
      </div>
    </section>
    <section class="content">
      <div class="content__wrapper">
        <article class="content__title-box">
          <p class="content__title">
            Check out our most popular courses!
          </p>
        </article>
        <article class="content__card">
          <img class="content__card-icon" src="./assets/images/icon-animation.svg" alt="animation icon">
          <div class="content__card-inner">
            <span class="content__card-title">Animation</span>
            <p class="content__card-caption">
              Learn the latest animation techniques to create stunning motion design and captivate your audience.
            </p>
            <a href="#" class="content__card-link">Get Started</a>
          </div>
        </article>
        <article class="content__card">
          <img class="content__card-icon" src="./assets/images/icon-design.svg" alt="design icon">
          <div class="content__card-inner">
            <span class="content__card-title">Design</span>
            <p class="content__card-caption">
              Create beautiful, usable interfaces to help shape the future of how the web looks.
            </p>
            <a href="#" class="content__card-link">Get Started</a>
          </div>
        </article>
        <article class="content__card">
          <img class="content__card-icon" src="./assets/images/icon-photography.svg" alt="photography icon">
          <div class="content__card-inner">
            <span class="content__card-title">Photography</span>
            <p class="content__card-caption">
              Explore critical fundamentals like lighting, composition, and focus to capture exceptional photos.
            </p>
            <a href="#" class="content__card-link">Get Started</a>
          </div>
        </article>
        <article class="content__card">
          <img class="content__card-icon" src="./assets/images/icon-crypto.svg" alt="crypto icon">
          <div class="content__card-inner">
            <span class="content__card-title">Crypto</span>
            <p class="content__card-caption">
              All you need to know to get started investing in crypto. Go from beginner to advanced with this 54 hour course.
            </p>
            <a href="#" class="content__card-link">Get Started</a>
          </div>
        </article>
        <article class="content__card">
          <img class="content__card-icon" src="./assets/images/icon-business.svg" alt="business icon">
          <div class="content__card-inner">
            <span class="content__card-title">Business</span>
            <p class="content__card-caption">
              A step-by-step playbook to help you start, scale, and sustain your business without outside investment.
            </p>
            <a href="#" class="content__card-link">Get Started</a>
          </div>
        </article>
      </div>
    </section>
  </main>
  <footer>
    <div class="footer">
      <a href="#" class="footer__link">
        <picture>
          <source media="(min-width: 1440px)" width="111" height="28" srcset="./assets/images/logo-light.svg">
          <img class="footer__img" width="79.29" height="20" src="./assets/images/logo-light.svg" alt="">
        </picture>
      </a>
      <button class="footer__btn">Get Started</button>
    </div>
  </footer>
</body>
</html>