-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
288 lines (265 loc) · 13.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="hack reactor homepage clone">
<title> Hack Reactor clone using html and css</title>
<!-- favicon link -->
<link rel=" shortcut icon" type="image/png" href="images/favicon-hack.ico">
<!-- bootstrap css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- font awesome link -->
<link rel="stylesheet" href="https://fonts.google.com/icons?selected=Material%20Icons%20Outlined%3Amenu">
<!-- css stylesheet -->
<link rel="stylesheet" href="main.css">
</head>
<body>
<!-- navigation section -->
<nav class="navbar navbar-expand-sm navbar-expand-lg sticky-top">
<!-- logo section -->
<a class="navbar-brand" href="#">
<img src="images/logo.PNG" class="logo" alt="Hack Reactor Home">
</a>
<!-- logo section ends here -->
<a class="navlink-toggle" href="#" aria-label="link">
<button class="navbar-toggler shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon " role="link"></span>
</button> </a>
<section class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle " href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="title-link text-dark hover-overlay" aria-label="hackerrank bootcamp" role="link">Bootcamps</span>
</a>
<ul class="dropdown-menu mt-3" aria-labelledby="navbarDropdownMenuLink">
<h2 class="module-title">SOFTWARE ENGINEERING IMMERSIVE</h2>
<li><a class="dropdown-item animated" href="#">Software Engineering Immersive</a></li>
<li><a class="dropdown-item" href="#">Software Engineering Online Immersive</a></li>
<li><a class="dropdown-item" href="#">Software Engineering Immersive Partime</a></li>
<li><a class="dropdown-item" href="#">Campus Locations</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="title-link text-dark hover-overlay">Professional development </span>
</a>
<ul class="dropdown-menu mt-3" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Overview</a></li>
<li><a class="dropdown-item" href="#">Methodologies + Requirements gathering</a></li>
<li><a class="dropdown-item" href="#">Networking + Reactive Programming</a></li>
<li><a class="dropdown-item" href="#">Computer Architecture + IOT</a></li>
<li><a class="dropdown-item" href="#">Microservices + Orchrestation</a></li>
<li><a class="dropdown-item" href="#">Algorithims + Data Structures</a></li>
<li><a class="dropdown-item" href="#">Employer Tution Reimbursment</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="title-link text-dark hover-overlay">Prepare</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="title-link text-dark hover-overlay">Outcomes</span>
</a>
<ul class="dropdown-menu menu-1 mt-3" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item menu-2" href="#">Student Outcomes</a></li>
<li><a class="dropdown-item menu-2" href="#">Student Projects</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="title-link text-dark hover-overlay"> Events</span>
</a>
<ul class="dropdown-menu menu-1 mt-3" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item menu-2" href="#">Workshops & Events</a></li>
<li><a class="dropdown-item menu-2" href="#">Webiners</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="btn nav-link btn-primary text-light" role="button" data-bs-toggle="button">
<span class="apply-btn">Apply Now</span>
</a>
</li>
</ul>
</section>
</section>
</nav>
<!-- navigation section ends here -->
<section class="hero" aria-labelledby="hero section">
<h1 class="main-title text-white text-center">
The Most Advanced Coding Bootcamp:<br> Think Like a Software Engineer
</h1>
<p class="sub-title text-center text-white ">
Don't just learn to code.<strong> Reinvent your career</strong> full-time, part-time, in-person or online.
</p>
<!-- learning for free button -->
<section class="d-grid gap-2 col-3 mx-auto">
<a class="btn subscribe-btn btn-primary" href="#" role="button">
Start Learning for Free
</a>
</section>
<!-- learning for free button ends here -->
</section>
<!-- hero section ends here -->
<!-- bootcamp rating section -->
<section class=" rating d-flex flex-wrap col-lg-12 col-sm-2 col-md-4 justify-content-around">
<div class="container-switch" role="container">
<p> Rated <q>Best Coding Bootcamp</q> <p>
<img class="switchup-rating align-self-start" src="images/switchup-rating.PNG" alt="Hacker Rank best rated bootcamp by course report and switch ">
</div>
<div class="container-switch" role="container">
<p>Quora Reviews</p>
<img class="quora-rating align-self-center" src="images/quora-rating.PNG" alt="hacker rank best rated bootcamp by quora reviews">
</div>
<div class="container-switch" role="container">
<p>Rated <q> Best ISA Bootcamp</q></p>
<img class="karma-rating align-self-center" src="images/karma-rating.PNG" alt="best rated bootcamp by career karma">
</div>
<div class="container-switch" role="container">
<p>Over 10,000 Alumni Including 88 at </p>
<img class="google-rating align-self-end" src="images/google-logo.PNG" alt="Over 8000 alumni including 88 at google">
</div>
</section>
<!-- bootcamp rating section ends here -->
</section>
<!-- min section -->
<main>
<!-- announcement section -->
<section class="container-announcement">
<h2 class="subsection-title ">We now have the best ISA in the industry</h2>
<p class="information">In response to financial uncertainity, we have
updated our income sharing agreement terms to be even
more accomodating to our students
</p>
<section class="d-flex gap-2 col-2 mx-auto">
<a class="btn learnmore-btn btn-primary align-self-center" href="#" role="button">
Learn More
</a>
</section>
</section>
<!-- announcement section ends here -->
<!-- graduants work places -->
<section class="graduants-workplaces ">
<h2 class="graduants-title m-3">
<q class="quotation"> Hack Reactor Graduants are Our First Choice</q>
</h2>
<figure class="quote">
<blockquote>
The best coding bootcamps simulate a real-world software environment for their students; the grads are so well-prepared, they come in and hit the ground running, that’s really what we’re looking for.
<figcaption>
— Dustin B., <cite> Cisco</cite>
</figcaption>
</blockquote>
</figure>
<section class="graduants-workOrganizations d-flex flex-wrap justify-content-between col-sm-4 col-md-6 col-lg-12">
<img class="company-logo" src="images/facebook-logo.PNG" alt="some graduants work in facebook">
<img class="company-logo" src="images/linkedin-logo.PNG" alt="some graduants work in linkedin">
<img class="company-logo" src="images/google-main-logo.PNG" alt="some graduants work in google">
<img class="company-logo" src="images/paypal-logo.PNG" alt="some graduants work in paypal">
<img class="company-logo" src="images/apple-logo.PNG" alt="some graduants work in apple">
<img class="company-logo" src="images/amazon-logo.PNG" alt="some graduants work in amazon">
<img class="company-logo" src="images/capital-one-logo.PNG" alt="some graduants work in capital one">
<img class="company-logo" src="images/microsoft-logo.PNG" alt="some graduants work in microsoft">
<img class="company-logo" src="images/visa-logo.PNG" alt="some graduants work in visa">
<img class="company-logo" src="images/accenture-logo.PNG" alt="some graduants work in accenture">
</section>
<!-- graduants work places ends here -->
<!-- about hacker reactor section -->
<section class="container about-bootcamp">
<h2 class="about-title">
The Best and Most Immersive Coding Bootcamp
</h2>
<section class="row">
<section class="col-lg-6 d-flex justify-content-around align-items-center">
<p class=" about-bootcamp ">
The Hack Reactor Software Engineering Immersive is one of the top coding bootcamps
and we select high-potential students through
a rigorous admissions process.
In our software engineering bootcamp,
we train students through over 800 hours of Computer Science and JavaScript
curriculum that closely models the software engineering industry.
Led by passionate and expericed teachers, engineering leaders, and former hiring managers,
we produce software engineers the best teams want to hire.
We offer our immersive bootcamp programs at Galvanize campuses in Austin, Boulder, Denver,Los Angeles, New York, Phoenix, San Francisco, Seattle, and live online.
</p>
</section>
<section class="col-lg-6">
<img src="images/video-img.PNG" class="img-fluid" alt= "photo video for bootcamp">
</section>
</section>
<!-- about hacker reactor section ends here -->
<!-- ootcamp sectio stars here -->
<section class="bootcamp-section">
<h2 class="section-title">
Our Bootcamps
</h2>
<section class="row cards ">
<!-- card one -->
<div class="col-lg-4 col-md-12 c0l-sm-12 card justify-content-center">
<img src="images/image-card1.PNG" class="card-img-top" alt="...">
<div class="card-body">
<h3>Onsite</h3>
<caption><strong>12 Weeks Full Time </strong></caption>
<p class="card-text">
Join HackReactor "s Software Engineering Immersive<br>
a one of the Galvanize campuses across the nation.
</p>
</div>
<a href="#" class="btn learnmore-btn btn-outline-primary">Learn More</a>
</div>
<!-- card one eds here -->
<!-- card two -->
<div class="col-lg-4 col-md-8 c0l-sm-12 card ">
<img src="images/card-image2.PNG" class="img-fluid card-img-top" alt="...">
<div class="card-body">
<h3>Online</h3>
<caption><strong>12 Weeks Full Time – Online</strong></caption>
<p class="card-text">
Reinvent your career remotely with our Hack Reactor
Software Engineering Online Immersive which directly mirrors
our in-person program
</p>
</div>
<a href="#" class="btn learnmore-btn btn-outline-primary">Learn More</a>
</div>
<!-- card two ends here -->
<!-- card three -->
<div class=" col-lg-4 col-md-8 c0l-sm-12 card">
<img src="images/card-image3.PNG" class="card-img-top" alt="...">
<div class="card-body">
<h3>Online</h3>
<caption><strong>9 Month Part time – Online</strong></caption>
<p class="card-text text-center">
Take the same exact Hack Reactor coding Bootcamp after hours
,<br> live online without having to quit your job.
</p>
</div>
<a href="#" class="btn learnmore-btn btn-outline-primary">Learn More</a>
</div>
<!-- card three ends here -->
</section>
</section>
<!-- bootcamp section ends here -->
<section class="Syllabus-information">
<div class="row">
<div class="col-4 p-2">
<img class="img-fluid" src="images/computer-image.PNG" alt="">
</div>
<div class="col-8 syllabus-description">
<h2>Download the Syllabus for Our Software Immersive Engineering</h2>
<a href="#" class="btn learnmore-btn btn-outline-primary">Get the Syllabus</a>
</div>
</div>
</section>
</main>
<!-- main section ends here -->
<!-- footer section -->
<!-- footer section ends here -->
<!-- bootstrap js bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>