-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (146 loc) · 4.71 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ELearning</title>
<link rel="stylesheet" href="./src/css/style.css" />
<meta
name="description"
content=" Our modern courses across a range of in-demand skills will give you the knowledge you need to live the life you want. "
/>
<meta
name="keywords"
content="Skill,maximize,minimize,budget,modern courses, best platform"
/>
</head>
<body>
<div class="wrapper">
<header class="header">
<a href="#" class="logo">
<img
src="./src/assets/logo-dark.svg"
alt="skilled"
class="logo__image"
/>
</a>
<a href="#" class="link link--started">Get Started</a>
</header>
</div>
<div class="wrapper">
<section class="hero">
<div class="hero__content">
<h1 class="hero__title">Maximize skill, minimize budget</h1>
<p class="hero__description">
Our modern courses across a range of in-demand skills will give you
the knowledge you need to live the life you want.
</p>
<a href="#" class="link link--cta">Get Started</a>
</div>
<picture>
<source
srcset="./src/assets/image-hero-mobile.webp"
media="(max-width:44rem)"
/>
<source
srcset="./src/assets/image-hero-tablet.webp"
media="(max-width:54rem)"
/>
<img
src="./src/assets/image-hero-desktop.webp"
alt="Coding woman with floating statistics"
class="hero__image"
/>
</picture>
</section>
</div>
<div class="wrapper">
<section class="features">
<div class="feature feature--start">
<h2 class="feature__start-title">
Check out our most popular courses!
</h2>
</div>
<div class="feature">
<img
src="./src/assets/icon-animation.svg"
alt=""
class="feature__icon"
/>
<h2 class="feature__title">Animation</h2>
<p class="feature__description">
Learn the latest animation techniques to create stunning motion
design and captivate your audience.
</p>
<a href="#" class="link link--feature">Get Started</a>
</div>
<div class="feature">
<img
src="./src/assets/icon-design.svg"
alt=""
class="feature__icon"
/>
<h2 class="feature__title">Design</h2>
<p class="feature__description">
Create beautiful, usable interfaces to help shape the future of how
the web looks.
</p>
<a href="#" class="link link--feature">Get Started</a>
</div>
<div class="feature">
<img
src="./src/assets/icon-photography.svg"
alt=""
class="feature__icon"
/>
<h2 class="feature__title">Photography</h2>
<p class="feature__description">
Explore critical fundamentals like lighting, composition, and focus
to capture exceptional photos.
</p>
<a href="#" class="link link--feature">Get Started</a>
</div>
<div class="feature">
<img
src="./src/assets/icon-crypto.svg"
alt=""
class="feature__icon"
/>
<h2 class="feature__title">Crypto</h2>
<p class="feature__description">
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="link link--feature">Get Started</a>
</div>
<div class="feature">
<img
src="./src/assets/icon-business.svg"
alt=""
class="feature__icon"
/>
<h2 class="feature__title">Business</h2>
<p class="feature__description">
A step-by-step playbook to help you start, scale, and sustain your
business without outside investment.
</p>
<a href="#" class="link link--feature">Get Started</a>
</div>
</section>
</div>
<footer class="footer">
<div class="wrapper">
<div class="footer__content">
<a href="#" class="logo">
<img
src="./src/assets/logo-light.svg"
alt="skilled"
class="logo__image"
/>
</a>
<a href="#" class="link link--footer">Get Started</a>
</div>
</div>
</footer>
</body>
</html>