-
Notifications
You must be signed in to change notification settings - Fork 0
/
homepage.html
305 lines (232 loc) · 11.5 KB
/
homepage.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
<!DOCTYPE html>
<html>
<head>
<title>HomePage</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.abc{
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
.fa {
padding: 10px;
font-size: 30px;
width: 40px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
.fa-youtube {
background: #bb0000;
color: white;
}
</style>
</head>
<body>
<div class="jumbotron jumbotron-fluid py-3 abc" style="background-image: url('tri2.jpg'); text-align: center;">
<div class="container max-auto">
<img src="https://gymkhana.iitb.ac.in/~ncc/images/nccimg1.jpg" alt="" width="200px" height="200px" class="center">
<h1 class="display-4" style="text-align:center; color:black;"><b>NCC IIT BOMBAY<b></h1>
<p style="text-align: center;margin-left: 40px;"><span style="color:rgb(239, 28, 37)">UNITY</span>
<span style="color:rgb(45, 48, 146)">AND </span> <span style="color:rgb(0, 174, 239)">DISCIPLINE</span> </p>
</div>
</div>
<!--side nav bar-->
<nav class="top-left open">
<a class="disc l1">
<div>BLOGS</div>
</a>
<a class="disc l2">
<div>COUNCILS</div>
</a>
<a class="disc l3">
<div>ACTIVITIES</div>
</a>
<a class="disc l4">
<div>HOME</div>
</a>
<a class="disc l5 toggle">
Menu
</a>
</nav>
<h1 style="text-align: center;text-shadow: 2px 2px rgb(0, 174, 239); color:rgb(45,48,146);padding-bottom: 50px;
letter-spacing: 2px ;"> ABOUT NCC IITB</h1>
<div class="container">
<div class="col-lg-12 col-sm-6">
<p style="letter-spacing: 1px; font-size: large;">The NCC in India was formed the National Cadet Corps Act of 1948.Being one of the only two engineering regiments in India,
2 Maharashtra Engineering Regiment is a National Cadet Corps unit under the aegis of Bombay Engineer Group. NCC IIT Bombay
tend to developing patriotism, brotherhood and discipline in the cadets, thereby creating dynamic and visionary leaders
of future India.</p>
</div>
</div>
<h1 style="text-align: center;padding-top: 40px;padding-bottom: 30px;text-shadow: 2px 2px rgb(0, 174, 239); color:rgb(45,48,146)
">OUR AIM</h1>
<!--BOOTSTRAP CARDS-->
<div class="card-group" style="padding-left: 30px; padding-right: 30px;">
<div class="card">
<img src="https://marketing.gaia.com/wp-content/uploads/iStock-584246464-e1550692298992-768x432.jpg" class="card-img-top"
style="height:272.5px" alt="...">
<div class="card-body">
<h5 class="card-title" >Leadership Qualities</h5>
<p class="card-text">Create a human resource of organized, trained and motivated youth, to provide leadership in all walks of life and be always
available for the service of the nation.</p>
<p class="card-text"><small class="text-muted">“Leaders need to provide strategy and
direction and to give employees the tools that enable them to gather information and insight from around the world. Leaders shouldn’t try to make every decision.”
— <i>Bill Gates</i></small></p>
</div>
</div>
<div class="card">
<img src="https://myupdateweb.com/wp-content/uploads/2018/02/500217880_1280x720.jpg" class="card-img-top"
style="height:272.5px" alt="...">
<div class="card-body">
<h5 class="card-title">Personality Development</h5>
<p class="card-text">Develop character, comradeship, discipline, leadership, secular outlook, the spirit of adventure,
and ideals of selfless service amongst the youth of the country.</p>
<p class="card-text"><small class="text-muted">"We must become the change we want to see."— <i>Mahatma Gandhi</i></small></p>
</div>
</div>
<div class="card">
<img src="https://image.freepik.com/free-photo/high-competition-business-cloud-winner_1323-56.jpg" class="card-img-top"
style="height:272.5px" alt="...">
<div class="card-body">
<h5 class="card-title">Motivation</h5>
<p class="card-text">Provide a suitable environment to motivate the youth to take up a career in the armed forces.</p>
<p class="card-text"><small class="text-muted">"All of us do not have equal talent. But all of us have an equal opportunity to develop
our talents."-<i>Dr A.P.J Abdul Kalam</i></small></p>
</div>
</div>
</div>
<!--BOOTSTRAP CAROUSEL-->
<div class="container" style="padding-top: 70px; padding-bottom: 70px;">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://gymkhana.iitb.ac.in/~ncc/images/Firing/DSC_0605.JPG" class="d-block w-100" height="500px" width=100% alt="...">
<div class="carousel-caption d-none d-md-block">
<h4>FIRING SESSION AT ATC</h4>
</div>
</div>
<div class="carousel-item">
<img src="https://gymkhana.iitb.ac.in/~ncc/images/img7272.jpg" class="d-block w-100" height="500px" width=100% alt="...">
<div class="carousel-caption d-none d-md-block">
<h4>REPUBLIC DAY- GUARD OF HONOUR</h4>
</div>
</div>
<div class="carousel-item">
<img src="https://gymkhana.iitb.ac.in/~ncc/images/imgncc1.jpg" class="d-block w-100" height="500px" width=100% alt="...">
<div class="carousel-caption d-none d-md-block">
<h4>REPUBLIC DAY CONTIGENT </h4>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<h2 style="text-align: center;text-shadow: 2px 2px rgb(0, 174, 239); color:rgb(45,48,146)">NCC FRESHERS VIDEO 2k19-20</h2>
<div style="text-align: center; padding-bottom: 30px;">
<iframe src="https://www.youtube.com/embed/B9T6SiEqqns" frameborder="" width="600px" height="400px"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="container" style="font-size: 20px ">
<h2 style="text-align: center;text-shadow: 2px 2px rgb(0, 174, 239); color:rgb(45,48,146)">HISTORY OF THE UNIT</h2>
<div class="alert alert-dark p-3 mb-0 first" style="border:1px solid black" role="alert">
<b><i>1964</i></b> :Raised as no.1 MAH ENGR REGT.NCC.
</div>
<div class="alert alert-dark p-3 mb-0 first" style="border:1px solid black" role="alert">
<b><i>1965</i></b> :Redesignated as No.4 MAH ENGR COY.NCC.
</div>
<div class="alert alert-dark p-3 mb-0 first" style="border:1px solid black" role="alert">
1968 :Redesignated as 1 MAH MIXED REGT NCC DEC VICTORIA JUBILEE TECHNICAL INSTITUTE.
</div>
<div class="alert alert-dark p-3 mb-0 first" style="border:1px solid black" role="alert">
1969 :Redesignated as 2 MAH ENGR REGT NCC.
</div>
<div class="alert alert-dark p-3 mb-0 first" style="border:1px solid black" role="alert">
1994 :REGT Placed under suspended animation.
</div>
<div class="alert alert-dark p-3 mb-0 first" style="border:1px solid black" role="alert">
2005 :Efforts for revival started wef.
</div>
<div class="alert alert-dark p-3 first" style="border:1px solid black" role="alert">
2006 :First Parade after suspended animation started.
</div>
</div>
<div class="container"
style=" position: relative;
width: 50%;">
<img src="https://gymkhana.iitb.ac.in/~ncc/images/Cult/ncccult%20(8).jpg" alt="..." width="400px" class="image mb-4 ">
<div class="overlay ml-3">
<div class="text">DIWALI CELEBRATION</div>
</div>
</div>
<!--footer-->
<div class="jumbotron bg-dark mb-0 text-light p-9" >
<div class="container">
<div class="row">
<img src="https://gymkhana.iitb.ac.in/~ncc/images/nccimg1.jpg" height=100px width=90px>
<!--<span style="padding-left: 650px;">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3769.412100523161!2d72.91113998649499!3d19.13343018776394!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c7f7d2cf1673%3A0x8a536ebcb0c2d83f!2sNCC%20Ground%2C%20Swimming%20Pool%20Rd%2C%20IIT%20Area%2C%20Powai%2C%20Mumbai%2C%20Maharashtra%20400076!5e0!3m2!1sen!2sin!4v1589866655043!5m2!1sen!2sin"
width=400vw height=300vw frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</span>-->
</div>
<h3 style="color:aqua">2 Maharashtra Engineers Regiment NCC IIT Bombay</h3>
<p class="lead">CONTACT: +91 8728873198</p>
<p> EMAIL: srijanbansal15@gmail.com</p>
<p> NCC Area, IIT BOMBAY:</p>
<p> Location: Adi Shankaracharya Marg, Powai, Mumbai, Maharashtra-400076</p>
<span > <a href="https://www.facebook.com/2MahaEngReg/" class="fa fa-facebook"></a></span>
<span style="padding:30px"> <a href="https://www.youtube.com/channel/UCA2zkmZE-hQbKrnzhjZzDgA" class="fa fa-youtube"></a></span>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3769.412100523161!2d72.91113998649499!3d19.13343018776394!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c7f7d2cf1673%3A0x8a536ebcb0c2d83f!2sNCC%20Ground%2C%20Swimming%20Pool%20Rd%2C%20IIT%20Area%2C%20Powai%2C%20Mumbai%2C%20Maharashtra%20400076!5e0!3m2!1sen!2sin!4v1589866655043!5m2!1sen!2sin"
width=400vw height=300vw frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
<script>toggle = document.querySelectorAll(".toggle")[0];
nav = document.querySelectorAll("nav")[0];
toggle_open_text = 'Menu';
toggle_close_text = 'Close';
toggle.addEventListener('click', function() {
nav.classList.toggle('open');
if (nav.classList.contains('open')) {
toggle.innerHTML = toggle_close_text;
} else {
toggle.innerHTML = toggle_open_text;
}
}, false);
setTimeout(function(){
nav.classList.toggle('open');
}, 800);
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>