-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
322 lines (246 loc) · 14.9 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
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel = "stylesheet" href = "./style.css">
<title> Frontend Bootcamp </title>
</head>
<body>
<!-- navbar -->
<nav class = "navbar navbar-expand-lg bg-dark navbar-dark py-2 fixed-top" >
<div class="container">
<a href="#" class="navbar-brand"> Frontend Bootcamp </a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#threelines"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="threelines">
<ul class="navbar-nav ms-auto" >
<li class="nav-item">
<a href="#learn" class="nav-link"> What you'll learn </a>
</li>
<li class="nav-item">
<a href="#Questions" class="nav-link"> Questions </a>
</li>
<li class="nav-item">
<a href="#Instructors" class="nav-link"> Instructors </a>
</li>
</ul>
</div>
</div>
</nav>
<!-- showcase -->
<section class="bg-dark text-light p-5 p-lg-0 pt-lg-5 text-center text-sm-start">
<div class="container">
<div class="d-sm-flex align-items-center justify-content-between ">
<div>
<h3> Become a <span class="text-warning"> Web Developer</span> </h3>
<p class=" lead mx=4 my-4 "> Here we provide you with a structured course that will teach you all you need to know to become a front-end web developer. Work through each section, learning new skills (or improving existing ones) as you go along. Each section includes exercises and assessments to test your understanding before you move forward.
</p>
<button class="btn btn-primary btn-large my-md-5"> Start Enrollment Now </button>
</div>
<img class="img-fluid w-50 d-none d-sm-block px-2" src="coder.png" alt="">
</div>
</div>
</section>
<!-- Newsletter -->
<section class="bg-primary text-light p-4">
<div class="container">
<div class="d-md-flex justify-content-between align-items-center">
<h3 class="mb-3 mb-md-0">Signup for our Newsletter</h3>
<div class="input-group signup" >
<input type="text" class="form-control" placeholder="Ex. [email protected] ">
<button class="btn btn-outline-secondary btn-dark btn-lg" type="button" id="button-addon2"> Subscribe </button>
</div>
</div>
</div>
</section>
<!-- boxes -->
<section class="p-5">
<div class="container">
<div class="row text-center g-3">
<div class="col-md">
<div class="card" style="width: 18rem mb-3" >
<img src="https://icons.getbootstrap.com/icons/laptop/" class="card-img-top" alt="">
<div class="card-body bg-dark text-light">
<h3 class="card-title">Virtual Classes</h3>
<p class="card-text p-3"> High qualiity thorough explanations where we dive deep into concepts.</p>
<a href="#" class="btn btn-primary">Read more...</a>
</div>
</div>
</div>
<div class="col-md">
<div class="card" style="width: 18rem mb-3">
<img src="https://icons.getbootstrap.com/icons/laptop/" class="card-img-top" alt="">
<div class="card-body bg-light text-dark">
<h3 class="card-title">Live Events</h3>
<p class="card-text p-3"> We organize offline events where you meet live with instructors and network with fellow students once every month.</p>
<a href="#" class="btn btn-secondary">Read more...</a>
</div>
</div>
</div>
<div class="col-md">
<div class="card" style="width: 18rem mb-3">
<img src="https://icons.getbootstrap.com/icons/laptop/" class="card-img-top" alt="">
<div class="card-body bg-dark text-light">
<h3 class="card-title">Doubt solving </h3>
<p class="card-text p-3"> We provide attention to each student and take time to clarify their concepts.</p>
<a href="#" class="btn btn-primary">Read more...</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- learn sections -->
<!-- section 1 -->
<section id="learn" class="p-5">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-md">
<img src="frontend.png" alt="" class="img-fluid">
</div>
<div class="col-md p-5">
<h2 class> Learn Fundamentals </h2>
<p class="lead"> The major building blocks of the web are HTML, CSS, and JavaScript. We will be talking about all three languages. We can also think of web development as being split into two main categories: front end and back end. We will discuss about Front end in detail.</p>
<p>Everything you have ever seen on the web is considered ‘front end’. Front end is what we see when we open a web page or app. Code is downloaded from a server and is rendered to the screen by a web browser. What happens when we interact with the code is also considered front end.</p>
<a href="" class="btn btn-secondary btn-large">
<i class="bi bi-chevron-right">
</i> Read more here </a>
</div>
</div>
</div>
</section>
<!-- section 2 -->
<section id="" class="p-5 bg-dark text-light">
<div class="container">
<div class="row align-items-center justify-content-between">
<div class="col-md p-5">
<h2 class> Learn React </h2>
<p class="lead"> ReactJS offers graceful solutions to some of front-end programming’s most persistent issues, allowing you to build dynamic and interactive web apps with ease. It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing. There’s never been a better time to learn React.</p>
<p>You’ll develop a strong understanding of React’s most essential concepts: JSX, class and function components, props, state, lifecycle methods, and hooks. You’ll be able to combine these ideas in React’s modular programming style.</p>
<a href="" class="btn btn-light btn-large">
<i class="bi bi-chevron-right">
</i> Read more here </a>
</div>
<div class="col-md">
<img src="iconreact2.png" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
<!-- questions accordion -->
<section id="Questions" class="p-5">
<div class="container">
<h2 class="text-center mb-3">Frequently asked questions
</h2>
<div class="accordion accordion-flush my-3" id="questions">
<!-- faq-1 -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne">
I Don't Have Coding Experience, Can I Take This Course?
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#questions">
<div class="accordion-body">
Yes! 70-80% of our students don't have coding experience when they enrol in the program. Lots of boot camps say they don't require coding experience, but then have all these hurdles to getting started. We don't have a coding challenge or technical assessment to enrol, because we know that we can teach you, no matter where you start. Our Programming Basics course was designed just for students that have little to no experience. This course was developed expressly to make sure that students are successful, no matter where they start.
</div>
</div>
</div>
<!-- faq-2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo">
I Can’t Pay During The Program; What Are My Options To Defer Payment?
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
We get it as a student you may feel a little burden to pay the heavy tuition fees. But we are making it simple for you. We will be charging you only 30% tuition fees upfront. Once you get placed you can pay the remaining via EMI. Talk to us to know more about EMI options.
</div>
</div>
</div>
<!-- faq-3 -->
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree">
Is It Possible To Learn So Many Languages So Fast?
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
We've been around since 2008. Our curriculum is designed by MIT Alumnus after deep research and various employers' feedback we designed this course. We have found that the 4 full-stack model really helps our students stand out from the pack. As long as you put in the work, our instructors and student success team will be there to help.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- instructors section -->
<section id="Instructors" class="p-5 bg-primary">
<div class="container">
<h1 class="text-center text-white p-2 mb-4">
Meet our Experienced Instructors
</h1>
<p class="lead p-2 mb-3 text-center text-white">
All our Instructors have 10+ years of experience in software development
</p>
<div class="row g-3">
<div class="card mb-3 mx-2 col-lg-3 col-md-6 " >
<img src="elon.png" class="card-img-top" alt="The Dogefather"/>
<div class="card-body">
<p class="card-text"> <h4>Elon Musk</h4>He's the favourite around here. Could be found lurking on twitter about Crypto. </p>
<i class="bi bi-twitter text-dark"> The Dogefather</i>
</div>
</div>
<div class="card mb-3 col-lg-3 col-md-6 mx-2" >
<img src="shekk.png" class="card-img-top" alt=""/>
<div class="card-body">
<p class="card-text"> <h4>Shrek</h4>
Likes to live in forest. Has a pet Donkey and a family. Not particularly tolerant of humans</p>
</div>
</div>
<div class="card mb-3 col-lg-3 col-md-6 mx-2" >
<img src="jeffrey.png" class="card-img-top" alt=""/>
<div class="card-body">
<p class="card-text"> <h4> Jeffrey</h4>
Let's just say he's Rich.
Like very VERY Rich </p>
</div>
</div>
<div class="card mb-3 col-lg-3 col-md-6 mx-2" >
<img src="zucc.png" class="card-img-top" alt=""/>
<div class="card-body">
<p class="card-text"> <h4>Zucc</h4>
Rumored to be a Robot. He will teach you React. His company built React afterall</p>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<section class="text-center bg-light p-5 ">
<div class="container">
<div class="div mb-3">
<i class=" bi-github" role="img" ></i>
<a class="btn btn-large btn-dark" href="https://github.com/AryanSingh11" role="button"> Click here to visit my Github Profile</a>
</div>
<div class="div mb-3">
<i class="bi-linkedin bg-primary" role="img" ></i>
<a class="btn btn-large btn-primary" href="https://www.linkedin.com/in/aryan-singh-5221b7203/" role="button"> Click here to visit my LinkedIn Profile</a>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>