-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
429 lines (404 loc) · 24.5 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
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
<!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]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Document</title>
</head>
<body>
<!-- header section -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand fs-2" href="#"><span><a href="https://fontmeme.com/script-fonts/"></a><img src="https://fontmeme.com/permalink/240716/480d16a70f4de6ca43a819fe3de1aa20.png" alt="script-fonts"></a></span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item ms-4">
<a class="nav-link fs-5" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown ms-3">
<a class="nav-link dropdown-toggle fs-5" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Courses
</a>
<ul class="dropdown-menu dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Data Structures and Algorithms</a></li>
<li><a class="dropdown-item" href="#">Web Development</a></li>
<li><a class="dropdown-item" href="#">Machine Learning</a></li>
<li><a class="dropdown-item" href="#">Artificial Intelligence</a></li>
<li><a class="dropdown-item" href="#">App Development</a></li>
<li><a class="dropdown-item" href="#">Data Science</a></li>
<li><a class="dropdown-item" href="#">DevOps</a></li>
<li><a class="dropdown-item" href="#">Cyber Security</a></li>
<li><a class="dropdown-item" href="#">Cloud Computing</a></li>
</ul>
</li>
<li class="nav-item ms-4">
<a class="nav-link fs-5" aria-current="page" href="#">Blogs</a>
</li>
<li class="nav-item ms-4">
<a class="nav-link fs-5" aria-current="page" href="#">Events</a>
</li>
</ul>
<form class="d-flex w-50">
<input class="form-control me-2 w-75" type="search" placeholder="Search for courses, topics, or resources..." aria-label="Search">
<button class="custom-search-button btn-lg" type="submit">Search</button>
</form>
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link fs-5" aria-current="page" href="#">Contact Us</a>
</li>
<li class="nav-item">
<button type="button" class="btn-lg ms-3 custom-login-button">Login</button>
</li>
</ul>
</div>
</div>
</nav>
<!-- hero section -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/1.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Certifications to Boost Your Tech Career</h3>
<p>Explore valuable certifications that can enhance your resume and open up new job opportunities.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/2.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Top Programming Languages to Learn in 2024</h3>
<p>Discover the most in-demand programming languages that can boost your career in tech. Start your journey today!</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/3.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Tips for Effective Online Learning</h3>
<p>Maximize your online study experience with these proven strategies for staying focused and productive.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/4.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Essential Study Resources for Tech Students</h3>
<p>Unlock access to the best online courses, tutorials, and textbooks to excel in your studies and prepare for placements.</p>
</div>
</div>
<div class="carousel-item">
<img src="assets/5.png" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3>Interview Tips for Tech Job Positions</h3>
<p>Prepare effectively for your tech interviews with these essential tips and common questions to practice.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- courses section -->
<div class="container mx-auto mt-5">
<h1 class="text-center mb-4">Explore Our Courses</h1>
<div class="row row-cols-xs-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-5">
<div class="col">
<div class="card h-100" style="width: 20rem;">
<img src="assets/webdev.png" class="card-img-top" alt="..." >
<div class="card-body course-card d-flex flex-column">
<h4 class="card-title">Full Stack Web Development</h4>
<p class="card-text">Learn to build dynamic and responsive websites using HTML, CSS, JavaScript, and popular frameworks like React and Node.js.</p>
</div>
<a href="#" class="btn course-btn mt-auto">Enroll Now</a>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 20rem;">
<img src="assets/dsa.png" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Data Structures and Algorithms</h4>
<p class="card-text">Understand and implement core data structures and algorithms to enhance your problem-solving skills.</p>
</div>
<a href="#" class="btn course-btn mt-auto">Enroll Now</a>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 20rem;">
<img src="assets/datasci.png" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Data Science Bootcamp</h4>
<p class="card-text">Master data analysis, visualization, and machine learning with Python, R, and essential data science libraries.</p>
</div>
<a href="#" class="btn course-btn mt-auto">Enroll Now</a>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 20rem;">
<img src="assets/ai.png" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Artificial Intelligence Fundamentals</h4>
<p class="card-text">Dive into the basics of AI, including neural networks, deep learning, and natural language processing.</p>
</div>
<a href="#" class="btn course-btn mt-auto">Enroll Now</a>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 20rem;">
<img src="assets/ml.png" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Machine Learning Mastery</h4>
<p class="card-text">Gain expertise in machine learning algorithms, model training, and evaluation techniques using real-world data sets.</p>
</div>
<a href="#" class="btn course-btn mt-auto">Enroll Now</a>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 20rem;">
<img src="assets/cybsec.png" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Introduction to Cybersecurity</h4>
<p class="card-text">Explore the fundamentals of cybersecurity, including network security, encryption, and ethical hacking.</p>
</div>
<a href="#" class="btn course-btn mt-auto">Enroll Now</a>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 20rem;">
<img src="assets/appdev.png" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<h4 class="card-title">Mobile App Development</h4>
<p class="card-text">Create stunning mobile applications for iOS and Android using frameworks like Flutter, React Native, and Swift.</p>
</div>
<a href="#" class="btn course-btn mt-auto">Enroll Now</a>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 20rem;">
<img src="assets/devops.png" class="card-img-top" alt="...">
<div class="card-body d-flex flex-column">
<h4 class="card-title">DevOps Essentials</h4>
<p class="card-text">Learn the principles of DevOps, continuous integration/continuous deployment (CI/CD), and tools like Docker and Kubernetes.</p>
</div>
<a href="#" class="btn course-btn mt-auto">Enroll Now</a>
</div>
</div>
</div>
</div>
<!-- plan section -->
<div class="plan mt-5">
<h1 class="text-center">Choose Your Learning Plan</h1>
<p class="text-center mb-4">Select from our tailored subscription options to unlock full access to courses</p>
<div class="row text-center justify-content-evenly">
<div class="card plan-card col-sm-5 col-md-3 text-center">
<div class="card-header">
<h4>Starter Series</h4>
</div>
<div class="card-body">
<h5 class="card-title">$9.99/month</h5>
<ul class="list-unstyled">
<li><i class="fa-solid fa-check"></i> Foundational courses</li>
<li><i class="fa-solid fa-xmark"></i> Mock Interviews</li>
<li><i class="fa-solid fa-xmark"></i> Mentorship</li>
<li><i class="fa-solid fa-check"></i> Basic community forums</li>
<li><i class="fa-solid fa-check"></i> Course Completion Badge</li>
<li><i class="fa-solid fa-xmark"></i> Certification</li>
</ul>
<a href="#" class="btn btn-primary">Subscribe</a>
</div>
</div>
<div class="card plan-card col-md-3 text-center">
<div class="card-header">
<h4>Career Catalyst</h4>
</div>
<div class="card-body">
<h5 class="card-title">$19.99/month</h5>
<ul class="list-unstyled">
<li><i class="fa-solid fa-check"></i> Intermediate courses</li>
<li><i class="fa-solid fa-check"></i> Mock Interviews</li>
<li><i class="fa-solid fa-check"></i> Group Mentorship</li>
<li><i class="fa-solid fa-check"></i> Active community forums</li>
<li><i class="fa-solid fa-check"></i> Course Completion Badge</li>
<li><i class="fa-solid fa-xmark"></i></i> Certification</li>
</ul>
<a href="#" class="btn btn-primary">Subscribe</a>
</div>
</div>
<div class="card plan-card col-md-3 text-center">
<div class="card-header">
<h4>Mastery Program</h4>
</div>
<div class="card-body">
<h5 class="card-title">$39.99/month</h5>
<ul class="list-unstyled">
<li><i class="fa-solid fa-check"></i> Unlimited access to all courses</li>
<li><i class="fa-solid fa-check"></i> Mock Interviews</li>
<li><i class="fa-solid fa-check"></i> Personalised Mentorship</li>
<li><i class="fa-solid fa-check"></i> Exclusive networking events</li>
<li><i class="fa-solid fa-check"></i> Course Completion Badge</li>
<li><i class="fa-solid fa-check"></i> Certification</li>
</ul>
<a href="#" class="btn btn-primary">Subscribe</a>
</div>
</div>
</div>
</div>
<!--free courses break section -->
<div class="card bg-dark text-white text-center mt-5">
<img src="assets/bg.png" class="card-img" alt="...">
<div class="card-img-overlay d-flex flex-column justify-content-center align-items-center">
<h2 class="card-title">Unlock Your Potential with Free Courses!</h2>
<p class="card-text">Access a wide range of courses without spending a dime.</p>
<p class="card-text">Expert-Led Tutorials</p>
<p class="card-text">Flexible Learning at Your Own Pace</p>
<a href="#" class="btn btn-outline-primary d-block w-auto mt-3">Get Started</a>
</div>
</div>
<!-- faq's section -->
<div class="container mx-auto mt-5">
<h1 class="text-center mb-4">Frequently Asked Questions</h1>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
What is PrepMate?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
PrepMate is an online learning platform designed to help tech students advance their skills through a wide range of courses, from foundational topics to advanced technologies. We offer personalized mentorship, community support, and resources to help you succeed in your tech career.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How do I sign up for a course?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
Signing up for a course is easy! Simply browse our course catalog, choose the course you're interested in, and click the "Enroll Now" button. You can create an account or log in if you already have one, then complete the enrollment process.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
What if I need help or have questions during a course?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
Our community forums are a great place to ask questions and get help from peers and instructors. Additionally, depending on your subscription plan, you may have access to group mentorship sessions or personalized support.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Are there any free courses available?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample">
<div class="accordion-body">
Yes, we offer a selection of free courses that you can access without a subscription. These are great for getting a taste of what PrepMate has to offer before committing to a subscription plan.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
How do I earn certifications?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample">
<div class="accordion-body">
Certifications are awarded upon successful completion of courses in the mastery and passing the associated assessments. However you may earn badges for any course irrespective of the plan. These can be added to your resume or LinkedIn profile to showcase your skills.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingSix">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
Can I cancel my subscription at any time?
</button>
</h2>
<div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample">
<div class="accordion-body">
Yes, you can cancel your subscription at any time through your account settings. Your access to the courses and features will remain active until the end of your current billing period.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingSeven">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
Do you offer refunds?
</button>
</h2>
<div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="headingSeven" data-bs-parent="#accordionExample">
<div class="accordion-body">
We offer a 7-day refund policy for new subscriptions. If you're not satisfied with your subscription, you can request a refund within 7 days of purchase.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingEight">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
How do I contact customer support?
</button>
</h2>
<div id="collapseEight" class="accordion-collapse collapse" aria-labelledby="headingEight" data-bs-parent="#accordionExample">
<div class="accordion-body">
If you need further assistance, you can reach out to our customer support team via email at [email protected] or through the contact form on our website. We're here to help!
</div>
</div>
</div>
</div>
</div>
<!-- footer section -->
<footer class="container-fluid text-white pt-4 mt-5" style="background-color: #0F0C24;">
<div class="container-fluid text-center">
<h5>Subscribe to our Newsletter</h5>
<p>Stay updated with the latest news and courses from PrepMate.</p>
<div class="input-group mb-5 justify-content-center w-25 m-auto">
<input type="email" class="form-control" placeholder="Enter your email" aria-label="Email">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div class="container-fluid text-center mt-4">
<div class="row">
<div class="col-md-6 text-left">
<p>© 2024 PrepMate. All Rights Reserved.</p>
</div>
<div class="col-md-6 text-right social">
<a href="#" class="text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-white"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>