-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
246 lines (223 loc) · 13.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Learn-Up | Online Education</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn-Up Education Online School">
<meta name="keywords"
content="Data Science, Machine Learning, Web Design, Web Development, Digital Marketing, Graphic Design, Online Learning">
<meta name="author" content="Ad
olf Mathebula">
<!-- www.adolfmathebula.co.za -->
<link rel="icon" type="image/x-icon" href="/images/favicon.png" />
<link href="/css/output.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
</head>
<body>
<main>
<nav
class="fixed top-0 w-full bg-white flex flex-row justify-between align-center py-4 px-12 border-b border-white lg:border-lightgray z-50">
<h2 class="text-main font-extrabold text-2xl self-center hover:text-blue cursor-pointer">LEARN-UP</h2>
<div class="hidden md:flex justify-center align-center self-center text-main gap-4">
<a href="index.html" class="hover:text-blue">Home</a>
<a href="about.html" class="hover:text-blue">About</a>
<a href="#courses" class="hover:text-blue">Courses</a>
<a href="#instructors" class="hover:text-blue">Instructors</a>
<a href="#resources" class="hover:text-blue">Resources</a>
<a href="contact.html" class="hover:text-blue">Contact</a>
</div>
<a href="#resources"
class="hidden md:block py-2 px-5 text-white bg-main rounded-2xl baseline self-center hover:bg-orange hover:text-main">Sign
Up</a>
<!-- hamburger icon -->
<div class="flex md:hidden">
<i id="menu-btn"
class="fa-solid fa-bars flex text-main text-3xl self-center md:hidden cursor-pointer z-40"></i>
</div>
</nav>
<!-- Mobile Menu -->
<div class="flex lg:hidden">
<div id="menu"
class="absolute hidden flex flex-col items-center w-[300px] h-screen text-main bg-white self-end pt-16 pb-8 mt-10 space-y-4 font-bold top-0 right-0 z-30 drop-shadow-xl shadow-black ">
<a href="index.html" class="hover:text-blue text-2xl mobile-link">Home</a>
<a href="index.html" class="hover:text-blue text-2xl mobile-link">About</a>
<a href="index.html" class="hover:text-blue text-2xl mobile-link">Courses</a>
<a href="index.html" class="hover:text-blue text-2xl mobile-link">Instructors</a>
<a href="index.html" class="hover:text-blue text-2xl mobile-link">Resources</a>
<a href="index.html" class="hover:text-blue text-2xl mobile-link">Contact</a>
<a href="index.html"
class="py-2 px-5 text-white text-center bg-main w-2/4 rounded-2xl baseline self-center hover:bg-orange hover:text-main">Sign
Up</a>
</div>
</div>
<!-- Hero Section -->
<div
class="flex flex-col justify-center items-center w-full min-h-[600px] px-3 lg:px-20 pt-20 pb-10 mt-8 bg-[url('/images/header2.png')] bg-cover bg-no-repeat bg-center md:pb-20">
<h1 class="text-black font-black text-5xl text-center text-white drop-shadow-sm shadow-black lg:text-6xl">
Step Up Your
Expertise With Our Specialized Training
</h1>
<p class="my-6 text-center text-xl text-white md:px-20">Take your career to the next level with our
expert-led
training programs </p>
<div class="flex flex-row gap-4">
<button class="bg-blue text-white font-semibold py-3 px-5 rounded-2xl hover:bg-mainhover">Get
Started</button>
<button
class="bg-white text-main font-semibold py-3 px-5 rounded-2xl hover:bg-mainhover hover:text-white">Our
Courses</button>
</div>
</div>
<!-- Featured Section -->
<span id="courses"></span>
<section class="mt-16">
<!-- Featured Intro -->
<div class="container flex flex-col gap-8 px-4 mx-auto mt-10 space-y-12 md:space-y-0 md:flex-row">
<div class="flex flex-col space-y-3 flex-1">
<h2 class="max-01w-md text-main text-4xl font-bold text-center md:text-left">Featured Courses</h2>
<p class="mam-w-small text-center text-main md:text-left">Our popular and highly-regarded
courses.
Whether you're looking to upskill in your current job, start a new career, or simply learn
something new, we have something for everyone. <span class="text-orange">Our courses cover a
wide range of subjects, taught
by expert instructors for top-quality education.</span>
</p>
</div>
<!-- Courses List -->
<div class="flex flex-col flex-1">
<div class="flex flex-col w-full mb-3">
<div class="flex items-center">
<span class="rounded-full text-xs bg-main text-white py-1 px-3 mr-3">1</span>
<h2 class="font-extrabold uppercase text-main text-xl">Data
Science & Machine Learning</h2>
</div>
<p class="text-sm pl-7 mt-2">A comprehensive course covering the latest techniques and tools in
data
science and machine
learning, including programming languages like Python and data analysis techniques. <a
href="#" class="text-red italic cursor-pointer">Learn More...</a>
</p>
</div>
<div class="flex flex-col w-full mb-3 mt-2">
<div class="flex items-center">
<span class="rounded-full text-xs bg-main text-white py-1 px-3 mr-3">2</span>
<h2 class="font-extrabold uppercase text-main text-xl">Web
Development
</h2>
</div>
<p class="text-sm pl-7 mt-2">A hands-on course teaching the skills and technologies needed to
build
dynamic websites and
web applications, including HTML, CSS, JavaScript, and modern frameworks like React. <a
href="#" class="text-red italic cursor-pointer">Learn More...</a>
</p>
</div>
<div class="flex flex-col w-full mb-3 mt-2">
<div class="flex items-center">
<span class="rounded-full text-xs bg-main text-white py-1 px-3 mr-3">3</span>
<h2 class="font-extrabold uppercase text-main text-xl ">Digital
Marketing</h2>
</div>
<p class="text-sm pl-7 mt-2">A course that covers the key concepts and tactics used in digital
marketing,
including search
engine optimization (SEO), social media marketing, email marketing, and Google Analytics.
<a href="#" class="text-red italic cursor-pointer">Learn More...</a>
</p>
</div>
<div class="flex flex-col w-full mb-3 mt-2">
<div class="flex items-center">
<span class="rounded-full text-xs bg-main text-white py-1 px-3 mr-3">4</span>
<h2 class="font-extrabold uppercase text-main text-xl ">Graphic Design
</h2>
</div>
<p class="text-sm pl-7 mt-2">The course covers graphic design principles in depth. Students will
learn design softwares such as Adobe Photoshop, Illustrator and InDesign and learn how to
thrive as a freelencer
<a href="#" class="text-red italic cursor-pointer">Learn More...</a>
</p>
</div>
</div>
</div>
</section>
<!-- Gift Section -->
<section class="flex flex-col gap-8 w-full px-14 py-20 mb-20 mt-12 bg-main md:flex-row md:px-28">
<div class="flex flex-col w-full md:w-1/2">
<h1 class="text-orange font-bold text-3xl">Free Seth Godin Book</h1>
<p class="text-white font-light pt-6">Get Seth Godin's "Permission Marketing" book when you register
for our Digital Marketing diploma. Permission Marketing, the marketing
classic, enables advertisers to shape their message as per clients’ eagerness. Seth rejects the idea
of ‘Interruption Marketing’ where organizations offer the item by pushing the thought like a pushy
sales representative. The book will be delievered to you as soon as the classes starts
</p>
<button
class="bg-white text-main rounded-2xl hover:bg-mainhover hover:text-white w-fit py-3 px-5 mt-8 ml-4">Register
Now</button>
</div>
<div class="flex justify-center w-full align-center md:w-1/2">
<img src="/images/Seth.jpg" alt="free book" width="250px" class="transform rotate-12" />
</div>
</section>
<!-- Instructors Sections -->
<span id="instructors"></span>
<section class="flex flex-col align=center w-full px-14 my-12">
<h1 class="text-center text-3xl font-bold w-full text-orange mb-4">Our Instructors</h1>
<p class="text-center text-sm w-full text-main mb-8">Meet our expert instructors committed to providing
top-notch learning and igniting passion for knowledge</p>
<div class="flex flex-col w-full justify-center align-center gap-6 md:flex-row">
<div class="relative">
<img src="images/instructor1.png" alt="instructor" class="w-full" />
<span
class="absolute bottom-6 left-6 text-white w-fit bg-maintransparent px-4 py-2 border-l-4 border-orange">Data
Science<br>Thabo K. Kekana</span>
</div>
<div class="relative">
<img src="images/instructor2.png" alt="instructor" class="w-full" />
<span
class="absolute bottom-6 left-6 text-white w-fit bg-maintransparent px-4 py-2 border-l-4 border-orange">Digital
Marketing<br>Lucia Mulaudzi</span>
</div>
<div class="relative">
<img src="images/instructor3.png" alt="instructor" class="w-full" />
<span
class="absolute bottom-6 left-6 text-white w-fit bg-maintransparent px-4 py-2 border-l-4 border-orange">Web
Development<br>Steven P. Smith</span>
</div>
</div>
</section>
<!-- Subscribe Section -->
<span id="resources"></span>
<section
class="flex flex-col px-8 py-12 mt-20 mb-1 w-full bg-orange md:flex-row md:px-20 md:py-32 md:justify-around">
<div>
<h2 class="text-3xl text-main">Subscribe</h2>
<p class="text-white">To Our Newsletter</p>
</div>
<div class="flex flex-col mt-6 md:mt-0">
<input type="text" class="max-h-sm px-4" placeholder="your email..." />
<input type="submit"
class="bg-main text-white hover:bg-mainhover hover:text-white w-fit py-1 px-5 mt-2" />
</div>
</section>
<!-- Footer -->
<footer class="flex flex-col bg-main px-16 py-8 text-white text-sm md:flex-row md:justify-between">
<div>
© 2023 Learn-Up Education. All Rights Reserved
</div>
<div>
Built and Designed By: <a href="https://adolfmathebula.co.za" class="text-orange">Adolf Mathebula</a>
</div>
</footer>
</main>
<script src="/js/script.js"></script>
</body>
</html>