forked from GrazewalSingh07/Coursera_Backend
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcoursePage.html
313 lines (300 loc) · 11.3 KB
/
coursePage.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./components/icons/image.png">
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<link rel="stylesheet" href="./style/coursePage.css" />
<link rel="stylesheet" href="style/navbarForNayan.css" />
<link rel="stylesheet" href="style/footer.css" />
<title>Course</title>
<style></style>
</head>
<body>
<!-- navbar -->
<div class="navbar" id="navbar"></div>
<!-- banner part start -->
<div class="head-banner" id="head-banner">
<!--
Data coming from local storage
-->
</div>
<!-- cousre overview -->
<div class="overview" id="overview">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#howitworks">How It Works</a></li>
<li><a href="#about">Courses</a></li>
<li><a href="#enrollment-opt">Enrollment Options</a></li>
<li><a href="#faq-div">FAQ</a></li>
</ul>
</div>
<div class="about" id="about">
<div class="about-course" id="about-course">
<!--
Data coming from local storage
-->
</div>
<div class="side-about">
<div class="side-item">
<div class="icon">
<i class="material-icons"> picture_in_picture </i>
</div>
<div class="icon-info">
<h2>Shareable Certificate</h2>
<p>Earn a Certificate upon completion</p>
</div>
</div>
<div class="side-item">
<div class="icon">
<i class="material-icons">language </i>
</div>
<div class="icon-info">
<h2>100% online courses</h2>
<p>Start instantly and learn at your own schedule.</p>
</div>
</div>
<div class="side-item">
<div class="icon">
<i class="material-icons">calendar_month </i>
</div>
<div class="icon-info">
<h2>Flexible Schedule</h2>
<p>Set and maintain flexible deadlines.</p>
</div>
</div>
<div class="side-item">
<div class="icon">
<i class="material-icons">signal_cellular_alt_2_bar</i>
</div>
<div class="icon-info">
<h2>Beginner Level</h2>
<p>Start instantly and learn at your own schedule.</p>
</div>
</div>
<div class="side-item">
<div class="icon">
<i class="material-icons">watch_later</i>
</div>
<div class="icon-info">
<h2>Approximately to complete</h2>
<p>Suggested pace of 4 hours/week</p>
</div>
</div>
<div class="side-item">
<div class="icon">
<i class="material-icons">sms </i>
</div>
<div class="icon-info">
<h2>English</h2>
<p>
Subtitles: English, Arabic, French, Portuguese (European),
Italian, Vietnamese, German, Russian, Turkish, Spanish, Persian,
Korean
</p>
</div>
</div>
</div>
</div>
<!-- how it works -->
<div class="Certificate" id="howitworks">
<div class="certificate-head">
<h2>What is a Professional Certificate?</h2>
</div>
<div class="certificate-content">
<div class="certificate-info">
<h3>Build the Skills to Get Job Ready</h3>
<p>
Whether you’re looking to start a new career, or change your current
one, Professional Certificates on Coursera help you become job
ready. Learn at your own pace, whenever and wherever it’s most
convenient for you. Enroll today and explore a new career path with
a 7 day free trial. You can pause your learning or end your
subscription at any time.
</p>
<h3>Hands-On Projects</h3>
<p>
Apply your skills with hands-on projects and build a portfolio that
showcases your job readiness to potential employers. You'll need to
successfully finish the project(s) to earn your Certificate.
</p>
<h3>Earn a Career Credential</h3>
<p>
When you complete all of the courses in the program, you'll earn a
Certificate to share with your professional network as well as
unlock access to career support resources to help you kickstart your
new career. Many Professional Certificates have hiring partners that
recognize the Professional Certificate credential and others can
help prepare you for a certification exam. You can find more
information on individual Professional Certificate pages where it
applies.
</p>
</div>
<div class="certificate-imgDiv">
<img
src="https://d3njjcbhbojbot.cloudfront.net/api/utilities/v1/imageproxy/https://coursera_assets.s3.amazonaws.com/lady_looking_at_computer.png?auto=format%2Ccompress&dpr=1&h=350&w=350"
alt=""
/>
</div>
</div>
</div>
<!-- Enrollment options -->
<div id="enrollment-opt">
<div>
<h2>Start Learning Today</h2>
<a href="#">Financial aid available</a>
<div class="icon-tic">
<p>
<i class="material-icons"> check </i> Taught by top companies and
universities
</p>
<p><i class="material-icons"> check </i>Affordable programs</p>
<p>
<i class="material-icons"> check </i>Apply your skills with hands-on
projects
</p>
<p><i class="material-icons"> check </i>Learn on your own schedule</p>
<p><i class="material-icons"> check </i>Course videos and readings</p>
<p>
<i class="material-icons"> check </i>Graded quizzes and assignments
</p>
<p>
<i class="material-icons"> check </i>No degree or experience
required for many programs
</p>
<p>
<i class="material-icons"> check </i>Shareable Certificate upon
completion
</p>
</div>
<button><a href="#">Start up for free</a></button>
</div>
<div>
<p>
Shareable on
<img
src="https://d3njjcbhbojbot.cloudfront.net/api/utilities/v1/imageproxy/https://coursera_assets.s3.amazonaws.com/growth/xdp/linkedin-logo.svg?auto=format%2Ccompress&dpr=1&w=128&h=30&q=40"
alt=""
/>
</p>
<div
class="rc-CertificateBlock"
style="
background-image: url('https://d3njjcbhbojbot.cloudfront.net/api/utilities/v1/imageproxy/https://coursera_assets.s3.amazonaws.com/growth/xdp/certificateSDP.jpg?auto=format%2Ccompress&dpr=1&w=900');
background-size: contain;
height: 250px;
width: auto;
background-repeat: no-repeat;
margin: 1rem;
"
></div>
<p>
Shareable on LinkedIn You can share your Certificate in the
Certifications section of your LinkedIn profile, on printed resumes,
CVs, or other documents.
</p>
</div>
</div>
<!-- FAQ section -->
<div id="faq-div">
<h1>Frequently Asked Questions</h1>
<section id="faq-section">
<div class="faq">
<div class="question">
<i class="material-icons"> arrow_forward_ios </i>
<p>How much does a Professional Certificate cost?</p>
</div>
<div class="answer">
<p>
In the U.S. and Canada, Professional Certificates start at
$39/month after the initial 7 day free trial period. Price can
vary by country and will be adjusted for your location at
checkout.
</p>
</div>
</div>
<div class="faq">
<div class="question">
<i class="material-icons"> arrow_forward_ios </i>
<p>How long does it take to complete a Professional Certificate?</p>
</div>
<div class="answer">
<p>
Time to complete a Professional Certificate can vary by subject or
how you choose to learn at your own pace. On average, a
Professional Certificate can be completed in less than 6 months at
10 hours per week.
</p>
</div>
</div>
<div class="faq">
<div class="question">
<i class="material-icons"> arrow_forward_ios </i>
<p>What resources will be available for the job search process?</p>
</div>
<div class="answer">
<p>
In addition to hands-on projects designed to showcase your
experience, you'll get access to a 5-step job search guide to help
navigate the process. You’ll also get support to build a standout
resume and LinkedIn profile, virtual interview practice for your
specific industry, job, and experience level, and access to the
Professional Certificate Alumni Community to network with other
career switchers.
</p>
</div>
</div>
<div class="faq">
<div class="question">
<i class="material-icons"> arrow_forward_ios </i>
<p>What background knowledge is necessary</p>
</div>
<div class="answer">
<p>
None! Whether you’re completely new to the job field or have had
some experience, an entry-level Professional Certificate doesn’t
require any background knowledge.
</p>
</div>
</div>
<div class="faq">
<div class="question">
<i class="material-icons"> arrow_forward_ios </i>
<p>Who designed the Professional Certificates on Coursera?</p>
</div>
<div class="answer">
<p>
Professional Certificates on Coursera were designed by subject
matter experts at top companies. They were created to equip
learners with theoretical and practical knowledge and real-life
problem-solving skills to be successful in an entry-level job.
</p>
</div>
</div>
<div class="faq">
<div class="question">
<i class="material-icons"> arrow_forward_ios </i>
<p>Are Professional Certificates 100% online?</p>
</div>
<div class="answer">
<p>
Professional Certificates are completely online. You can access
your instructional videos, readings, and assignments anytime and
anywhere via the web or your mobile device.
</p>
</div>
</div>
</section>
</div>
<!-- footer part -->
<div class="footer" id="footer_div"></div>
</body>
</html>
<script src="https://code.iconify.design/2/2.1.2/iconify.min.js"></script>
<script src="./script/coursePage.js" type="module"></script>
<script src="./script/navbar.js" type="module"></script>