-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
251 lines (239 loc) · 21.7 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
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
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title style="font-family: Arial, Helvetica, sans-serif;"> MY PORTFOLIO </title>
<style>
.navbar {
background-color: #333;
color: white;
padding: 10px;
}
.subscribe-btn {
cursor: pointer;
background-color: black;
}
.carousel {
width: 100%;
height: 300px;
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 20px;
}
.photo {
width: 200px;
height: 150px;
margin: 10px;
cursor: pointer;
transition: transform 0.3s ease-in-out;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.details {
width: 100%;
padding: 20px;
background-color: #fff;
display: none;
position: fixed;
top: 0;
left: 100%;
height: 100%;
overflow: auto;
z-index: 1;
}
.details.active {
display: block;
left: 0;
}
.details img {
max-width: 100%;
height: auto;
object-fit: cover;
}
</style>
<script>
function showDetails(photoUrl, photoTitle, photoDescription) {
var details = document.getElementById("details");
var photoDisplay = document.getElementById("photoDisplay");
var photoDescriptionDiv = document.getElementById("photoDescription");
details.classList.add("active");
photoDisplay.innerHTML = "<img src='" + photoUrl + "' alt='" + photoTitle + "'>";
photoDescriptionDiv.innerHTML = "<h2>" + photoTitle + "</h2><p>" + photoDescription + "</p>";
}
function closeDetails() {
var details = document.getElementById("details");
details.classList.remove("active");
}
</script>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="index.html"><img src="d navbar.jpeg" height="60px", width="80px"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="aboutinfo.html">ABOUT INFO <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Academics.html">ACADEMICS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="positionofresponsibilities.html">PORs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="workexperience.html">WORK EXPERIENCE</a>
</li>
<li class="nav-item-active">
<b><a class="nav-link-active" href="gallery.html"> GALLERY</a></b>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"> Contact me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://drive.google.com/file/d/1I3NkcpftDgtprX1YirCMuUq0s-375Gyj/view?usp=drive_link"> <button class="btn-btn-primary"> CV/ RESUME </button></a>
</li>
</ul>
</div>
<div class="btn-btn-primary" ><button> <a href="index.html">HOME</a></button></div>
</nav>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Hey !! user </strong> Rotate your device to get better experience.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="carousel">
<h1>Look !! What's there in my Gallery</h1>
</div>
<div class="container" style="margin-top: 2%;">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="Durga Linked in Cover photo.png" height="300px" width="90px" alt="DURGA PRASAD DASH">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Durga2.jpg" height="300px" width="90px" alt="PRIZE DISTRIBUTION 2019">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="Durga3.jpg" height="300px" width="90px" alt="District level prize distribution">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div><br></div>
<div><br></div>
</div>
<div class="gallery">
<div class="photo" onclick="showDetails('Durga Prasad.jpeg', 'YAY !! ITS ME ', 'Its my photo ')"><img src="Durga Prasad.jpeg" alt="YAY !! THAT'S ME "></div>
<div class="photo" onclick="showDetails('Durga2.jpg', 'school topper ', '1st prize in school for class 10th topper')"><img src="Durga2.jpg" alt="1st prize in school for class 10th topper "></div>
<div class="photo" onclick="showDetails('Durga3.jpg', 'Ossta', 'Prize by OSSTA For District 2nd topper')"><img src="Durga3.jpg" alt=" Prize by OSSTA For District 2nd topper "></div>
<div class="photo" onclick="showDetails('10th topper school prize.jpg', 'School Prize ', 'Prize for class 10th Topper at school ')"><img src="10th topper school prize.jpg" alt="10th topper School Prize "></div>
<div class="photo" onclick="showDetails('A1 prize .jpg', 'Prize for getting A1 ', 'I got this for scoring above 90% in school ')"><img src="A1 prize .jpg" alt=" Prize For A1 "></div>
<div class="photo" onclick="showDetails('Adverk Technical Advisor.jpg', 'Adverk Technical Advisor ', 'Its for the post Adverk Technical Advisor ')"><img src="Adverk Technical Advisor.jpg" alt="Adverk Technical Advisor "></div>
<div class="photo" onclick="showDetails('App Developement Course.jpg', 'App dev Course ', 'Its for completion of App Dev Course From Rinex TEchnology ')"><img src="App Developement Course.jpg" alt="App Developemnt "></div>
<div class="photo" onclick="showDetails('Ascent Academy Internship Letter .jpg', 'Web dev intern ', 'Its for interned at Ascent Academy as a intern of the domain Web developement ')"><img src="Ascent Academy Internship Letter .jpg" alt="YAY !! THAT'S My internship "></div>
<div class="photo" onclick="showDetails('at farewell of seniors at school.jpg', 'Memories of Farewell', 'Its a photo for farewell ')"><img src="at farewell of seniors at school.jpg" alt="YAY !! its a photo of farewell "></div>
<div class="photo" onclick="showDetails('Backend Developement Bootcamp Microsoft Learn Student Ambassador.jpg', 'Photo For Backend Bootcamp', 'Its a bootcamp of devtown ')"><img src="Backend Developement Bootcamp Microsoft Learn Student Ambassador.jpg" alt="YAY !! THAT'S Photo For Backend Bootcamp "></div>
<div class="photo" onclick="showDetails('backend Developement Bootcamp.jpg', 'Devtown organizes ', 'Its a backend developement bootcamp ')"><img src="backend Developement Bootcamp.jpg" alt="YAY !! THAT'S a backend developement bootcamp "></div>
<div class="photo" onclick="showDetails('campus ambassador at coincent.jpg', 'Photo for Campus Ambassador at Coincent ', 'Its the campus ambassador ')"><img src="campus ambassador at coincent.jpg" alt="YAY !! Its the campus ambassador "></div>
<div class="photo" onclick="showDetails('Certificate on Embedded System Design .jpg', 'Certificate on Embedded System Design', 'Its a photo of Certificate on Embedded System Design ')"><img src="Certificate on Embedded System Design .jpg" alt="YAY !! THAT'S Certificate on Embedded System Design"></div>
<div class="photo" onclick="showDetails('class topper 10th.jpg', 'class topper 10th', 'Its a photo of Class Topper 2019 ')"><img src="class topper 10th.jpg" alt="YAY !! class topper 10th "></div>
<div class="photo" onclick="showDetails('CSS skill asessemnet test .jpg', 'Photo of HackerRank skill Assessment Test ', 'Its a Photo of Hacker rank Skill Assessment test ')"><img src="CSS skill asessemnet test .jpg" alt="YAY !! CSS skill asessemnet test "></div>
<div class="photo" onclick="showDetails('DA social Preneure.jpg', ' DA social Preneure', ' Personal Developemnet Bootcamp ')"><img src="DA social Preneure.jpg" alt="YAY !! THAT'S DA social Preneure"></div>
<div class="photo" onclick="showDetails('Data Science Course.jpg', 'Photo for Data Science ', 'Its photo for the Data Science Course ')"><img src="Data Science Course.jpg" alt="YAY !! THAT'S Data Science Course "></div>
<div class="photo" onclick="showDetails('District Topper Certificate .jpg', 'Certificate Showing District Topper in 2019', 'Its a certificate of 2019 by OSSTA ')"><img src="District Topper Certificate .jpg" alt="YAY !! THAT'S District Topper Certificate "></div>
<div class="photo" onclick="showDetails('Drive 2nd in giveaway.jpg', 'giveaway contest in driev ', 'Its a photo of the giveway contest by driev ')"><img src="Drive 2nd in giveaway.jpg" alt="YAY !! THAT'S Drive 2nd in giveaway "></div>
<div class="photo" onclick="showDetails('Essay Competition.jpg', 'Essay Competition', 'Its a Essay Competition ')"><img src="Essay Competition.jpg" alt="YAY !! THAT'S a Essay Competition "></div>
<div class="photo" onclick="showDetails('Farewell seniors .jpg', 'Photo of Frewell of seniors ', 'Its my memories ')"><img src="Farewell seniors .jpg" alt="YAY !! THAT'S Farewell seniors "></div>
<div class="photo" onclick="showDetails('Flipkart Grid.jpg', 'Flipkart grid ', 'Its the participating banner of flipkart grid ')"><img src="Flipkart Grid.jpg" alt="YAY !! THAT'S Flipkart Grid "></div>
<div class="photo" onclick="showDetails('Flipkart participating Certificate.jpg', 'participating certificate of Flipkart Grid', 'Its my participating certificate ')"><img src="Flipkart participating Certificate.jpg" alt="YAY !! THAT'S Flipkart participating Certificate "></div>
<div class="photo" onclick="showDetails('Friends .jpg', 'Photo of friends ', 'Its friends photo ')"><img src="Friends .jpg" alt="YAY !! THAT'S we "></div>
<div class="photo" onclick="showDetails('Frontend Developement Boot camp.jpg', 'Frontend Developement Bootcamp By Devtown ', 'Its a photo of Frontend developementbootcamp ')"><img src="Frontend Developement Boot camp.jpg" alt="YAY !! THAT'S Frontend Developement Boot camp "></div>
<div class="photo" onclick="showDetails('GCCP 2022.jpg', 'GCCP from ITER ', 'Its Participation of GCCP 2022 ')"><img src="GCCP 2022.jpg" alt="YAY !! GCCP 2022"></div>
<div class="photo" onclick="showDetails('GDSC KIIT Backend Learn Student Ambassador.jpg', 'GDSC KIIT backend developement ertificate ', 'Its my Certificate ')"><img src="GDSC KIIT Backend Learn Student Ambassador.jpg" alt="YAY !! THAT'S GDSC KIIT Backend Learn Student Ambassador "></div>
<div class="photo" onclick="showDetails('Golden Jubliee Soafal.jpg', 'Its the golden Jubliee of SOAFAL ', 'Its a photo of attending 50th lecture of SOAFAL ')"><img src="Golden Jubliee Soafal.jpg" alt="YAY !! THAT'S Golden Jubliee Soafal "></div>
<div class="photo" onclick="showDetails('High Jump .jpg', 'its an highjump event in school ', 'Its high jump !! ')"><img src="High Jump .jpg" alt="YAY !! High Jump"></div>
<div class="photo" onclick="showDetails('HTML workshop Geeks For Geeks.jpg', 'HTML WORKSHOP GEEKS FOR GEEKS ', 'Its HTML WORKSHOP ')"><img src="HTML workshop Geeks For Geeks.jpg" alt="YAY !! THAT'S a HTML WORKSHOP "></div>
<div class="photo" onclick="showDetails('Java Script for beginner.jpg', 'YAY !! ITS from UDEMY ', 'Its for javascript ')"><img src="Java Script for beginner.jpg" alt="YAY !! THAT'S Java Script for beginner"></div>
<div class="photo" onclick="showDetails('medal .jpg', 'YAY !! ITS Photo of Annual Function 2019', 'Its my photo ')"><img src="medal .jpg" alt="YAY !! THAT'S ME "></div>
<div class="photo" onclick="showDetails('medhabi abhinandan group photo.jpg', 'YAY !! ITS medhabi abhinandan group photo ', 'Its my achievement ')"><img src="medhabi abhinandan group photo.jpg" alt="YAY !! THAT'S medhabi abhinandan group photo"></div>
<div class="photo" onclick="showDetails('medhabi abhinandan.jpg', 'YAY !! ITS medhabi abhinandan ', 'Its my photo of medhabi abhinandan ')"><img src="medhabi abhinandan.jpg" alt="YAY !! THAT'S medhabi abhinandan "></div>
<div class="photo" onclick="showDetails('my photo .jpg', 'YAY !! ITS ME ', 'Its my photo ')"><img src="my photo .jpg" alt="YAY !! THAT'S ME "></div>
<div class="photo" onclick="showDetails('NEP 2020.png', 'YAY !! ITS For NEP ', 'Its NEP')"><img src="NEP 2020.png" alt="YAY !! THAT'S for NEP "></div>
<div class="photo" onclick="showDetails('prameya.jpg', 'YAY !! ITS prize distribution of prameya ', 'Its my photo at prameya prize distribution ceremony ')"><img src="prameya.jpg" alt="YAY !! THAT'S ME at prameya ceremony "></div>
<div class="photo" onclick="showDetails('prize for state rank 7.jpg', 'YAY !! ITS prize for state rank 7 ', 'Its my prize ')"><img src="prize for state rank 7.jpg" alt="YAY !! THAT'S prize for state rank 7 "></div>
<div class="photo" onclick="showDetails('prizes.jpg', 'YAY !! ITS My prizes ', 'Its my prizes ')"><img src="prizes.jpg" alt="YAY !! THAT'S My prizes "></div>
<div class="photo" onclick="showDetails('Provothon Developement Round.jpg', 'YAY !! ITS Provothon Developement Round', 'Its for participation ')"><img src="Provothon Developement Round.jpg" alt="YAY !! THAT'S Provothon Developement Round "></div>
<div class="photo" onclick="showDetails('Provothon participation Certificate.jpg', 'YAY !! ITS Provothon participation Certificate ', 'Its for participation ')"><img src="Provothon participation Certificate.jpg" alt="YAY !! THAT'S for participation "></div>
<div class="photo" onclick="showDetails('Provothon Proposal Submission .jpg', 'YAY !! ITS Provothon Proposal Submission ', 'Its for participation ')"><img src="Provothon Proposal Submission .jpg" alt="YAY !! THAT'S Provothon Proposal Submission "></div>
<div class="photo" onclick="showDetails('Sanskrit topper 10th.jpg', 'YAY !! ITS Sanskrit topper 10th ', 'Its my prize ')"><img src="Sanskrit topper 10th.jpg" alt="YAY !! THAT'S Sanskrit topper 10th "></div>
<div class="photo" onclick="showDetails('School Teachers .jpg', 'YAY !! ITS teachers', 'Its my teachers')"><img src="School Teachers .jpg" alt="YAY !! THAT'S my School Teachers "></div>
<div class="photo" onclick="showDetails('Science Prize.jpg', 'YAY !! ITS Science Prize ', 'Its my prize ')"><img src="Science Prize.jpg" alt="YAY !! THAT'S Science Prize "></div>
<div class="photo" onclick="showDetails('Smart Odisha Hackathon .jpg', 'YAY !! ITS My First Hackathon ', 'Its my hackathon ')"><img src="Smart Odisha Hackathon .jpg" alt="YAY !! THAT'S Smart Odisha Hackathon "></div>
<div class="photo" onclick="showDetails('Soh 2022.jpg', 'YAY !! ITS SOH 2022 ', 'Its my hackathon ')"><img src="Soh 2022.jpg" alt="YAY !! THAT'S Soh 2022 "></div>
<div class="photo" onclick="showDetails('SOH participating Certificate.jpg', 'YAY !! ITS SOH participating Certificate', 'Its my participaton certificate ')"><img src="SOH participating Certificate.jpg" alt="YAY !! THAT'S SOH participating Certificate "></div>
<div class="photo" onclick="showDetails('state rank 7.jpg', 'YAY !! ITS state rank 7', 'Its my state rank ')"><img src="state rank 7.jpg" alt="YAY !! THAT'S state rank 7"></div>
<div class="photo" onclick="showDetails('SVM NK NAGAR .jpg', 'YAY !! ITS SVM NK NAGAR', 'Its my SVM NK NAGAR ')"><img src="SVM NK NAGAR .jpg" alt="YAY !! THAT'S SVM NK NAGAR "></div>
<div class="photo" onclick="showDetails('Tata Crucible Campus Quiz .jpg', 'YAY !! ITS Quiz Competition ', 'Its my Tata Crucible Campus Quiz ')"><img src="Tata Crucible Campus Quiz .jpg" alt="YAY !! THAT'S Tata Crucible Campus Quiz"></div>
<div class="photo" onclick="showDetails('Varasa Prize.jpg', 'YAY !! ITS Varasa Prize ', 'Its my prize ')"><img src="Varasa Prize.jpg" alt="YAY !! THAT'S Varasa Prize "></div>
<div class="photo" onclick="showDetails('Web Developement .jpg', 'YAY !! ITS Web Developement ', 'Its my Web Developement ')"><img src="Web Developement .jpg" alt="YAY !! THAT'S Web Developement "></div>
<div class="photo" onclick="showDetails('Web developement Course.jpg', 'YAY !! ITS Web developement Course ', 'Its my Web developement Course ')"><img src="Web developement Course.jpg" alt="YAY !! THAT'S Web developement Course "></div>
<div class="photo" onclick="showDetails('with friends.jpg', 'YAY !! ITS friends ', 'Its my photo with friends ')"><img src="with friends.jpg" alt="YAY !! THAT'S with friends "></div>
<div class="photo" onclick="showDetails('with parents .jpg', 'YAY !! ITS with parents ', 'Its my photo with parents ')"><img src="with parents .jpg" alt="YAY !! THAT'S with parents "></div>
<div class="photo" onclick="showDetails('Xiaomi Ode2 Code 3.0 participation Round.jpg', 'YAY !! ITS Xiaomi Ode2 Code 3.0 participation Round ', 'Its my Xiaomi Ode2 Code 3.0 participation Round ')"><img src="Xiaomi Ode2 Code 3.0 participation Round.jpg" alt="YAY !! THAT'S Xiaomi Ode2 Code 3.0 participation Round"></div>
<div class="photo" onclick="showDetails('younity selection.jpg', 'YAY !! ITS younity ', 'Its my certificate ')"><img src="younity selection.jpg" alt="YAY !! THAT'S younity certificate "></div>
<div class="photo" onclick="showDetails('Flipkart participating Certificate Health+ track .jpg', 'YAY !! ITS Flipkart participating Certificate Health+ track ', 'Its my certificate of participation ')"><img src="Flipkart participating Certificate Health+ track .jpg" alt="YAY !! THAT'S Flipkart participating Certificate Health+ track "></div>
<!-- Add more photos here -->
</div>
<div id="details" class="details">
<div id="photoDisplay"></div>
<div id="photoDescription"></div>
<button onclick="closeDetails()">Close</button>
</div>
<footer class="bg-light text-center py-4" style="margin-top: 2%;">
<div class="container">
<p class="m-0">© 2023 portfolio website. All rights reserved. N.B. Some Photos are collected or captured by me where and when i have studied </p>
<p class="m-0">Website created by <a href="mailto:[email protected]">Durga Prasad Dash</a></p>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.6.0/js/bootstrap.min.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>