-
Notifications
You must be signed in to change notification settings - Fork 0
/
cards.html
448 lines (401 loc) · 20.9 KB
/
cards.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
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Education</title>
<link href="Book_slide.css" rel="stylesheet">
<!-- <link href="University.css" rel="stylesheet"> -->
<link rel="shortcut icon" href="favicon.svg" type="image/svg+xml">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat:[email protected]&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<style>
.card{
justify-content: space-around;
margin: 30px;
}
.card-img-top{
height:300px;
width:339px;
}
.heading,h5 {
text-align:center;
font-weight:800px;
font-size:49px;
font-style:Caveat;
font-family: "Bold";
font-optical-sizing: auto;
font-style: normal;
/* color:linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c); */
}
a{
text-decoration: none;
color:black;
}
body{
background: linear-gradient(90deg,#fff 50%,#f3e0ef 50%);
}
.container {
position: relative;
font-family: Arial;
}
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 80px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 1s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}
</style>
</head>
<body>
<!-- Slider -->
<h2 class="heading"> Top Universities!</h2>
<!-- <p></p> -->
<div>
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">01 / 10</div>
<img src="uni_14.jpeg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4> University of Cambridge</h4>
<p>Ranked as the second best global university in Europe.</p>
</div>
<!-- <div class="text">Caption Three</div> -->
</div>
<div class="mySlides fade">
<div class="numbertext">02 / 10</div>
<img src="uni_16.jpeg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>Manipal University</h4>
<p>Ranked among the top 20 public universities in the India.</p>
</div>
<!-- <div class="text">Caption Three</div> -->
</div>
<div class="mySlides fade">
<div class="numbertext">03 / 10</div>
<img src="uni_19.jpeg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>IIT Bombay</h4>
<p>Ranked among the top 5 government universities in the India.</p>
</div>
<!-- <div class="text">Caption Three</div> -->
</div>
<div class="mySlides fade">
<div class="numbertext">04 / 10</div>
<img src="uni_4.jpeg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>Amity University</h4>
<p>Ranked among the top 20 public universities in the India.</p>
</div>
<!-- <div class="text">Caption Three</div> -->
</div>
<div class="mySlides fade">
<div class="numbertext">05 / 10</div>
<img src="uni_15.jpeg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>Univeristy of British Columbia</h4>
<p>Ranked among the top 20 public universities in the world.</p>
</div>
<!-- <div class="text">Caption Three</div> -->
</div>
<div class="mySlides fade">
<div class="numbertext">06 / 10</div>
<img src="uni_17.jpeg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>IIT Delhi</h4>
<p>Is one of the Twenty Three IITs created .</p>
</div>
<!-- <div class="text">Caption Three</div> -->
</div>
<div class="mySlides fade">
<div class="numbertext">07 / 10</div>
<img src="uni_12.jpeg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>Woxsen Univeristy</h4>
<p>Is one of the Top Ranked Private University in Hyderabad.</p>
</div>
<!-- <div class="text">Caption Three</div> -->
</div>
<div class="mySlides fade">
<div class="numbertext">08 / 10</div>
<img src="uni_20.jpeg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>University Of Tronto</h4>
<p>Is a globally top-ranked public research university in Toronto,Canada.</p>
</div>
<!-- <div class="text">Caption Three</div> -->
</div>
<div class="mySlides fade">
<div class="numbertext">09 / 10</div>
<img src="uni_9.jpeg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>IIT Roorkee</h4>
<p> Roorkee is home to Asia's first engineering college </p>
</div>
<!-- <div class="text">Caption Three</div> -->
</div>
<div class="mySlides fade">
<div class="numbertext">10 / 10</div>
<img src="uni_18.jpeg" alt="Nature" style="width:100%;">
<div class="text-block">
<h4>Conestoga College</h4>
<p>Institute of Technology and Advanced Learning located in Kitchener, Ontario.</p>
</div>
<!-- <div class="text">Caption Three</div> -->
</div>
</div>
<br>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 1000); // Change image every 3 seconds
}
</script>
</div>
<br>
<!-- slider -->
<div class="abc">
<div class="card-group">
<div class="card">
<img src="uni_200.jpeg" class="card-img-top" alt="..." class="uni">
<div class="card-body">
<h5 class="card-title"><a href="https://www.fu-berlin.de/" target="_blank">Berlin University </a></h5>
<p class="card-text">Researchers at Freie Universität Berlin benefit from access to a wide range of academic networks around the world. They produce groundbreaking results and set tomorrow’s research trends through interdisciplinary work with an international focus. Freie Universität Berlin is among the select few German institutions of higher education supported by the German federal and state governments’ Excellence Strategy.The top institutions in this section are a great representation of the German higher education system prioritizes: quality and accessible education.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="iit_uni.jpeg" class="card-img-top" alt="..." class="uni">
<div class="card-body">
<h5 class="card-title"><a href="https://home.iitd.ac.in/" target="_blank">IIT Delhi</a></h5>
<p class="card-text">Indian Institute of Technology Delhi is one of the Twenty Three IITs created to be Centres of Excellence for training, research and development in science, engineering and technology in India. Established as College of Engineering in 1961.
Since its inception, over 60000 have graduated from IIT Delhi in various disciplines including Engineering, Physical Sciences, Management and Humanities & Social Sciences. Of these, nearly 5070 received Ph.D. degrees.Globally, QS World University Ranking 2024 ranks IIT Delhi on 197. NIRF 2023 ranking of IIT Delhi stands at 2nd in the Engineering category.#1 in India Today Engineering Ranking 2023. </p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="ger_uni.jpeg" class="card-img-top" alt="..." class="uni">
<div class="card-body">
<h5 class="card-title"><a href="https://www.tum.de/en/" target="_blank">University of Munich</a></h5>
<p class="card-text">Established in 1868, Technical University of Munich is one of the top public universities located in Munich, Germany. It is not just one of the top universities in Germany, but also a part of the top 30 universities in the world. When it comes to Technical University of Munich rankings, it ranks #30 in World University Rankings in Times Higher Education (THE) 2024. Prospective international students of Technical University of Munich get to choose among 180 degree programs taught in the university.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="uni_1.jpeg" class="card-img-top" alt="..." class="uni">
<div class="card-body">
<h5 class="card-title"><a href="https://www.columbia.edu/" target="_blank">Columbia Univeristy</a></h5>
<p class="card-text">Columbia University, officially Columbia University in the City of New York,[9] is a private Ivy League research university in New York City. Established in 1754 as King's College on the grounds of Trinity Church in Manhattan, it is the oldest institution of higher education in New York and the fifth-oldest in the United States.The University recognizes the importance of its location in New York City and seeks to link its research and teaching to the vast resources of a great metropolis.
</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="abc">
<div class="card-group">
<div class="card">
<img src="aus_uni.jpeg" class="card-img-top" alt="..." class="uni">
<div class="card-body">
<h5 class="card-title"><a href="https://www.deakin.edu.au/" target="_blank">Deakin Univeristy</a></h5>
<p class="card-text">Top 1% of universities worldwide*
As one of Australia's leading tertiary education providers, Deakin offers a personalised experience enhanced by world-class programs and innovative digital engagement. We lead by creating opportunities to live and work in a connected, evolving world.The Deakin University admissions are seen to be moderately competitive with nearly 75% students getting a place recently. Deakin University is home to more than 14,000 international students coming from 136 countries. To get through Deakin University admissions, international students must achieve an average of 65% in previous qualifications for getting into both undergraduate and postgraduate courses. </p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="oxr_uni.jpeg" class="card-img-top" alt="..." class="uni">
<div class="card-body">
<h5 class="card-title"><a href="https://www.ox.ac.uk/" target="_blank">Oxford Univeristy</a></h5>
<p class="card-text">As well as a world-class education, Oxford University offers an extraordinary range of opportunities that mean student life here can be pretty much whatever our students want it to be. Contrary to the belief of some, there is no typical student, and no single Oxford experience. Oxford’s students come from every background imaginable. What they do have in common is an ability and motivation for learning and studying. There are currently around 24,000 students from over 140 countries at Oxford, studying here as undergraduates and postgraduates. Their amazing range of stories and interests helps make Oxford one of the most exciting learning environments anywhere.</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="nit_uni.jpeg" class="card-img-top" alt="..." class="uni">
<div class="card-body">
<h5 class="card-title"><a href="https://nitdgp.ac.in/" target="_blank">National Institute Of Technology</a></h5>
<p class="card-text">National Institute of Technology, Durgapur which is popularly known as NIT Durgapur was formerly called Regional Engineering College Durgapur, is a public funded autonomous technical institute under the Ministry of Education, Govt. of India. It was established in 1960 in Durgapur, West Bengal, India. It is ranked 43rd in the NIRF 2023 list under the engineering college category and is one of India's oldest technical institutes. The success of the technology-based industry led to high demand for technical and scientific education. Due to the enormous costs and infrastructure involved in creating globally respected Indian Institutes of Technology (IITs).</p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="vit_uni.jpeg" class="card-img-top" alt="..." class="uni">
<div class="card-body">
<h5 class="card-title"><a href="https://vit.ac.in/" target="_blank">Vellore Institute of Technology </a></h5>
<p class="card-text">Vellore Institute of Technology and the University College of Dublin have signed a Memorandum of Understanding (MoU) to establish academic & research collaborations. The MoU is expected to foster students & faculty exchange programmes, undertake joint research work during their PhD, and jointly publish in renowned journals.VIT Vellore has been ranked 8th in the University category, 11th in the Research category, and 17th overall by the National Institutional Ranking Framework (NIRF) in 2023. VIT Vellore offers a 4-year B.Tech program in 10 specializations. Admission to its flagship course BTech, takes place through entrance examinations conducted by the institute itself. </p>
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<!-- Book -->
<br>
<div class="info">
<h2 class="heading">Co-Curricular Activites</h2><br>
<div class="hello">
<div class="book">
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3">
<div id="cover"><img src="curri_4.jpeg"></div>
<div class="flip-book">
<div class="flip" id="p1">
<div class="back">
<img src="curri_1.jpeg">
<label class="back-btn" for="c1">Back</label>
</div>
<div class="front">
<h2>JOIN CLUBS</h2>
<p >Joining different clubs in college can be the most rewarding experience in your undergraduate journey. It allows you to meet like-minded people, pursue various interests, build long-lasting connections with mentors and peers, and develop a strong skill set that can help you in your post-college career.</p>
<label class="next-btn" for="c1">Next</label>
</div>
</div>
<div class="flip" id="p2">
<div class="back">
<img src="curri_2.jpeg">
<label class="back-btn" for="c2">Back</label>
</div>
<div class="front">
<h2>HACKTHONS</h2>
<p>The Department of Computer Science encourages students to participate in various Hackathons nationwide/worldwide that are organized by governments, institutes, companies etc. for application development, to support research, for a social cause, to foster connection between tech communities and local industries and much more.</p>
<label class="next-btn" for="c2">Next</label>
</div>
</div>
<div class="flip" id="p3">
<div class="back">
<!-- <img src="img_5.jpg"> -->
<label class="back-btn" for="c3">Back</label>
</div>
<div class="front">
<h2>SPORTS</h2>
<p>In University Education, Sports play an important role in the development of integrated personality of the youth including Body, Mind and Spirit. Active participation of University students in competitive sports generates a spirit of healthy.Therefore,it is necessary that university youth of country needs to be brought together on a “National Platform” through the media of sports.</p>
<label class="next-btn" for="c3">Next</label>
</div>
</div>
</div>
</div>
<div class="visme_d" data-title="Untitled Project" data-url="n08wpwen-untitled-project?sidebar=true" data-domain="forms" data-full-page="false" data-min-height="600px" data-form-id="26399"></div><script src="https://static-bundles.visme.co/forms/vismeforms-embed.js"></script>
</div>
<!-- FOOTER -->
<br>
<link rel="stylesheet" href="footer.css">
<div class="footer-dark">
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 item">
<h3>Services</h3>
<ul>
<li><a href="#">Web design</a></li>
<li><a href="#">Development</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
<div class="col-sm-6 col-md-3 item">
<h3>About</h3>
<ul>
<li><a href="#">Company</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="col-md-6 item text">
<h3>Company Name</h3>
<!-- <p>Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p> -->
</div>
<div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div>
</div>
<pre class="copyright">Copyright 2024 All Rights Reserved by Edu_Web</pre>
</div>
</footer>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>