-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
94 lines (77 loc) · 2.87 KB
/
gallery.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
<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}
body { background-image:url(https://cdn.thewirecutter.com/wp-content/uploads/2017/05/midrange-mirrorless-camera-2x1-fullres-5847-1024x512.jpg);
background-repeat:no-repeat;
background-size:cover;
margin: 0;
font-family: Arial;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
</style>
<body>
<div class="header">
<h1>Gallery</h1>
<p>Co-Curricular activities at a glance</p>
</div>
<div class="row">
<div class="column">
<img src="http://www.dpssrinagar.com/wp-content/gallery/science-exhibition-2013-impulse/img_0012.jpg" style="width:100%">
<img src="http://dpsranchi.com/alpha/gallery/photo_gallery/72/photo_gallery_322_lg.jpg" style="width:100%">
<img src="https://www.bu.edu/chemistry/files/2012/03/IMG_7686.jpg" style="width:100%">
<img src="http://www.dpsbhopal.org/images/prospetus.jpg" style="width:100%">
</div>
<div class="column">
<img src="https://image3.mouthshut.com/images/Restaurant/Photo/-56506_70610.jpg" style="width:100%">
<img src="http://www.ryaninternationalschools.com/sxhsraipur/wp-content/uploads/sites/105/2018/08/3.jpg" style="width:100%">
<img src="http://www.dpsnoida.co.in/files/page/sst%20labjpg1491573161.jpg" style="width:100%">
<img src="http://www.dpsindore.org/images/admissions1.jpg" style="width:100%">
</div>
<div class="column">
<img src="http://www.5dariyanews.com/Uploads/2018/03/04/en-news-12563065-Ludhiana-College-of-Engineering--(6).jpg" style="width:100%">
<img src="http://www.pec.ac.in/sites/default/files/uploads/events/annual_athletic_meet_2017_4.jpg" style="width:100%">
<img src="http://dpsranchi.com/alpha/gallery/photo_gallery/72/photo_gallery_323_lg.jpg" style="width:100%">
<img src="http://www.dpsbhopal.org/images/extra-curicullam-activity.jpg" style="width:100%">
</div>
</div>
<div class="display-1"style="text-align: center;color:aqua;font-size: 50px;">50th Founder's Day Celebration</div>
<div style="align-content: center"><iframe width="640" height="360" src="https://www.youtube.com/embed/UC4sDaYamVM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
</body>
</html>