-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
278 lines (270 loc) · 9.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Web Design Mastery | Mystic</title>
</head>
<body>
<header class="header">
<nav>
<div class="logo">
<img src="assets/logo.png" alt="logo" />
</div>
<div class="nav__actions">
<button class="btn">Sign Up</button>
</div>
</nav>
<div class="section__container header__container">
<div class="header__image">
<img src="assets/header.jpg" alt="header" />
</div>
<div class="header__content">
<h1>Course Is On Sale!</h1>
<p class="section__description">
Unleash your inner photographer with our exclusive photography
course, now on sale! Whether you're a beginner or looking to level
up your skills, this limited-time offer is your opportunity to
master the art of photography at an unbeatable price.
</p>
<div class="header__btn">
<button class="btn">Contact Us</button>
</div>
</div>
</div>
</header>
<section class="banner">
<div class="section__container banner__header">
<h2 class="section__header">New Course Will Start Soon</h2>
<p class="section__description">
Our next photography course is just around the corner! Get ready to
embark on a journey of creativity and exploration as we launch our
brand-new course.
</p>
<div class="banner__header__grid">
<div>
<h4>22</h4>
<p>Hours</p>
</div>
<div>
<h4>37</h4>
<p>Minutes</p>
</div>
<div>
<h4>14</h4>
<p>Seconds</p>
</div>
</div>
</div>
<div class="banner__container">
<div class="section__container banner__content">
<h2 class="section__header">
We're Ready For You. Learn With Us Now!
</h2>
<button class="btn">Contact Us</button>
</div>
</div>
</section>
<section class="section__container information__container">
<div class="information__header">
<div class="information__content">
<h2 class="section__header">Information</h2>
<p class="section__description">
Whether you're a budding enthusiast or an experienced shutterbug,
this upcoming opportunity promises to be your gateway to capturing
life's moments like never before.
</p>
<button class="btn">Contact Us</button>
</div>
<div class="information__image">
<img src="assets/information.jpg" alt="information" />
</div>
</div>
<div class="information__grid">
<div class="information__card">
<h4>Beginner</h4>
<h5>Booking Price</h5>
<h3><sup>$</sup>29<sup>.99</sup></h3>
<p>Per Month</p>
<p>
This foundational course is designed for those who are new to
photography.
</p>
<button class="btn">Know More</button>
</div>
<div class="information__card">
<h4>Advanced</h4>
<h5>Booking Price</h5>
<h3><sup>$</sup>49<sup>.99</sup></h3>
<p>Per Month</p>
<p>
For intermediate to advanced photographers looking to hone their
skills.
</p>
<button class="btn">Know More</button>
</div>
<div class="information__card">
<h4>Smartphone</h4>
<h5>Booking Price</h5>
<h3><sup>$</sup>39<sup>.99</sup></h3>
<p>Per Month</p>
<p>
Participants learn how to maximize the potential of their smartphone
cameras.
</p>
<button class="btn">Know More</button>
</div>
</div>
</section>
<section class="testimonial">
<div class="section__container testimonial__container">
<h2 class="section__header">Testimonials</h2>
<p class="section__description">
Hear from our passionate photography enthusiasts who have embarked on
a transformative journey with our courses.
</p>
<div class="testimonial__grid">
<div class="testimonial__card">
<div>
<img src="assets/testimonial-1.jpg" alt="testimonial" />
<h4>RIZADHA IZZETH</h4>
</div>
<p>
Enrolling in this photography course was a game-changer for me. I
went from taking ordinary snapshots to capturing mesmerizing
images that truly tell a story. The instructors are fantastic, and
the curriculum is well-structured. I couldn't be happier with my
progress.
</p>
</div>
<div class="testimonial__card">
<div>
<img src="assets/testimonial-2.jpg" alt="testimonial" />
<h4>SAKEEKA</h4>
</div>
<p>
I'm so grateful for this photography class! The lessons are easy
to follow, even for a complete beginner like me. The supportive
online community and feedback from instructors helped boost my
confidence, and I'm now taking photos I never thought possible.
Highly recommended.
</p>
</div>
<div class="testimonial__card">
<div>
<img src="assets/testimonial-3.jpg" alt="testimonial" />
<h4>AMANI ZULFI</h4>
</div>
<p>
This course has reignited my passion for photography. The in-depth
modules and hands-on assignments have expanded my skills, and I've
discovered a newfound love for different photography styles. The
best part? It's affordable and flexible, making it accessible for
anyone.
</p>
</div>
</div>
</div>
</section>
<section class="section__container experience__container">
<div class="experience__header">
<h2>7</h2>
<p>Years<br />Of Experience</p>
</div>
<div class="experience__grid">
<img src="assets/icon-1.png" alt="icon" />
<img src="assets/icon-2.png" alt="icon" />
<img src="assets/icon-3.png" alt="icon" />
<img src="assets/icon-4.png" alt="icon" />
</div>
<div class="experience__image">
<img src="assets/experience.jpg" alt="experience" />
</div>
</section>
<section class="section__container instructor__container">
<h2 class="section__header">Instructors</h2>
<div class="instructor__grid">
<div class="instructor__card">
<img src="assets/instructor-1.jpg" alt="instructor" />
<h4>BIA</h4>
<p>Wildlife Photographer</p>
</div>
<div class="instructor__card">
<img src="assets/instructor-2.jpg" alt="instructor" />
<h4>NIYOMI WATHSALA</h4>
<p>Event Photographer</p>
</div>
<div class="instructor__card">
<img src="assets/instructor-3.jpg" alt="instructor" />
<h4>YURENI</h4>
<p>Commercial Photographer</p>
</div>
</div>
</section>
<section class="section__container subscribe__container">
<div class="subscribe__content">
<h2 class="section__header">Subscribe To Our Newsletter</h2>
<form action="/">
<input type="text" placeholder="Your Email" />
<button class="btn">Subscribe</button>
</form>
<p>
Subscribe to our newsletter and be the first to receive exciting
updates, photography tips, exclusive offers, and more.
</p>
</div>
</section>
<footer class="footer">
<div class="section__container footer__container">
<div class="footer__col">
<div class="logo">
<img src="assets/logo.png" alt="logo" />
</div>
<p class="section__description">
Elevate your photography skills with our exclusive course, now on
sale! Unleash your creativity and learn the art of photography with
expert guidance at a limited-time discounted price.
</p>
</div>
<div class="footer__col">
<h4>Services</h4>
<ul class="footer__links">
<li><a href="#">Online Courses</a></li>
<li><a href="#">Expert Instructors</a></li>
<li><a href="#">Live Workshops</a></li>
<li><a href="#">Student Galleries</a></li>
<li><a href="#">Photography Resources</a></li>
</ul>
</div>
<div class="footer__col">
<h4>Useful Links</h4>
<ul class="footer__links">
<li><a href="#">Course Catalog</a></li>
<li><a href="#">Instructor Bios</a></li>
<li><a href="#">Blog & Tutorials</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="footer__col">
<h4>Follow Us</h4>
<div class="footer__socials">
<a href="#"><i class="ri-facebook-fill"></i></a>
<a href="#"><i class="ri-twitter-fill"></i></a>
<a href="#"><i class="ri-instagram-fill"></i></a>
<a href="#"><i class="ri-youtube-fill"></i></a>
</div>
</div>
</div>
<div class="footer__bar">
Copyright © 2023 Web Design Mastery. All rights reserved.
</div>
</footer>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="main.js"></script>
</body>
</html>