/ var / www / html / ethnographylab / [ HOME SHELL ]

Name	Size	Permission	Action
img	[ DIR ]	drwxrwxrwx
php-kit	[ DIR ]	drwxr-xr-x
static	[ DIR ]	drwxr-xr-x
Conference.html	37.11 KB	-rw-r--r--
Confirmation.html	315 B	-rw-r--r--
Contact.html	15.48 KB	-rw-r--r--
Event.html	17.26 KB	-rw-r--r--
Media.html	28.96 KB	-rw-r--r--
People.html	28.05 KB	-rw-r--r--
Project.html	17.76 KB	-rw-r--r--
Publications.html	27.03 KB	-rw-r--r--
ROutcome.html	78 B	-rw-r--r--
Resourses.html	78 B	-rw-r--r--
base.html	13.95 KB	-rw-r--r--
index-old.html	17.4 KB	-rw-r--r--
index.html	19.14 KB	-rwxr-xr-x

Code Editor : Media.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.84.0">
    <title>Gallery</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/blog/">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
    <link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
    <link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
    <meta name="theme-color" content="#7952b3">

<style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

@media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>

<link href="https://fonts.googleapis.com/css?family=Playfair&#43;Display:700,900&amp;display=swap" rel="stylesheet">
    
    <link href="blog.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
        crossorigin="anonymous"></script>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,500,300,700);

* {
            font-family: Open Sans;
        }

.time {
            font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
            font-size: 20px;
            font-style: normal;
            font-variant: normal;
            font-weight: 400;
            line-height: 30px;
        }

.timenav {
            font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
            font-size: 22px;
            font-style: normal;
            font-variant: normal;
            font-weight: 400;
            line-height: 30px;
        }

section {
            width: 100%;
            display: inline-block;
            background: #333;
            height: 50vh;
            text-align: center;
            font-size: 22px;
            font-weight: 700;
            text-decoration: underline;
        }

.footer-distributed {
            background: #666;
            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
            box-sizing: border-box;
            width: 100%;
            text-align: left;
            font: bold 16px sans-serif;
            padding: 55px 50px;
        }

.footer-distributed .footer-left,
        .footer-distributed .footer-center,
        .footer-distributed .footer-right {
            display: inline-block;
            vertical-align: top;
        }

/* Footer left */

.footer-distributed .footer-left {
            width: 40%;
        }

/* The company logo */

.footer-distributed h3 {
            color: #ffffff;
            font: normal 36px 'Open Sans', cursive;
            margin: 0;
        }

.footer-distributed h3 span {
            color: lightseagreen;
        }

/* Footer links */

.footer-distributed .footer-links {
            color: #ffffff;
            margin: 20px 0 12px;
            padding: 0;
        }

.footer-distributed .footer-links a {
            display: inline-block;
            line-height: 1.8;
            font-weight: 400;
            text-decoration: none;
            color: inherit;
        }

.footer-distributed .footer-company-name {
            color: #222;
            font-size: 14px;
            font-weight: normal;
            margin: 0;
        }

/* Footer Center */

.footer-distributed .footer-center {
            width: 35%;
        }

.footer-distributed .footer-center i {
            background-color: #33383b;
            color: #ffffff;
            font-size: 25px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            text-align: center;
            line-height: 42px;
            margin: 10px 15px;
            vertical-align: middle;
        }

.footer-distributed .footer-center i.fa-envelope {
            font-size: 17px;
            line-height: 38px;
        }

.footer-distributed .footer-center p {
            display: inline-block;
            color: #ffffff;
            font-weight: 400;
            vertical-align: middle;
            margin: 0;
        }

.footer-distributed .footer-center p span {
            display: block;
            font-weight: normal;
            font-size: 14px;
            line-height: 2;
        }

.footer-distributed .footer-center p a {
            color: lightseagreen;
            text-decoration: none;
            ;
        }

.footer-distributed .footer-links a:before {
            content: "|";
            font-weight: 300;
            font-size: 20px;
            left: 0;
            color: #fff;
            display: inline-block;
            padding-right: 5px;
        }

.footer-distributed .footer-links .link-1:before {
            content: none;
        }

/* Footer Right */

.footer-distributed .footer-right {
            width: 20%;
        }

.footer-distributed .footer-company-about {
            line-height: 20px;
            color: #92999f;
            font-size: 13px;
            font-weight: normal;
            margin: 0;
        }

.footer-distributed .footer-company-about span {
            display: block;
            color: #ffffff;
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 20px;
        }

.footer-distributed .footer-icons {
            margin-top: 25px;
        }

.footer-distributed .footer-icons a {
            display: inline-block;
            width: 35px;
            height: 35px;
            cursor: pointer;
            background-color: #33383b;
            border-radius: 2px;

font-size: 20px;
            color: #ffffff;
            text-align: center;
            line-height: 35px;

margin-right: 3px;
            margin-bottom: 5px;
        }

@media (max-width: 880px) {

.footer-distributed {
                font: bold 14px sans-serif;
            }

.footer-distributed .footer-left,
            .footer-distributed .footer-center,
            .footer-distributed .footer-right {
                display: block;
                width: 100%;
                margin-bottom: 40px;
                text-align: center;
            }

.footer-distributed .footer-center i {
                margin-left: 0;
            }

}
    </style>
	
	<style>
	/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
		
	</style>

</head>

<body style="background-color: #ffffff;">
    <!-- <nav class="navbar navbar-dark bg-dark sticky-top">

<a class="p-2 link-secondary" href="/">Home</a>
        <a class="p-2 link-secondary" href="/Project">Projects</a>
        <a class="p-2 link-secondary" href="/Event">Events</a>
        <a class="p-2 link-secondary" href="/People">People</a>
        <a class="p-2 link-secondary" href="/Media">Media</a>
        <div>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                        <U>Research Outcomes</U>
                    </button>
                    <ul class="dropdown-menu ">
                        <li><a class="dropdown-item" href="/Publications">Publications</a></li>
                        <li><a class="dropdown-item" href="/Conference">Conference Presentations</a></li>

</ul>
                </li>
            </ul>
        </div>
        <a class="p-2 link-secondary" href="/Contact">Contact Us</a>
    </nav> -->

<nav class="navbar navbar-expand-xl navbar-dark " aria-label="Fourth navbar example"
        style="background-color: #1f1d1d;">
        <div class="container-fluid  ">
            <img src="static/logo1.png" width="90px" height="80px">
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04"
                aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

<div class="collapse navbar-collapse" id="navbarsExample04">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link active timenav" aria-current="page" href="index.html"
                            style="margin-left: 25px;">Home</a>
                    </li>

<li class="nav-item">
                        <a class="nav-link active timenav" href="People.html" style="margin-left: 15px;">People</a>
                    </li>

<li class="nav-item">
                        <a class="nav-link active timenav" href="Project.html" style="margin-left: 15px;">Projects</a>
                    </li>

<li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle active timenav" href="#" id="dropdown04"
                            data-bs-toggle="dropdown" aria-expanded="false" style="margin-left: 15px;">Research
                            Outcomes</a>
                        <ul class="dropdown-menu" aria-labelledby="dropdown04">
                            <li><a class="dropdown-item timenav" href="Publications.html">Publications</a></li>
                            <li><a class="dropdown-item timenav" href="Conference.html">Conference Presentations</a></li>

</ul>
                    </li>

<li class="nav-item">
                        <a class="nav-link active timenav" href="Event.html" style="margin-left: 15px;">Events</a>
                    </li>

<li class="nav-item">
                        <a class="nav-link active timenav" href="Media.html"
                            style="margin-left: 15px; margin-right: 15px;">Gallery</a>
                    </li>

<form>
                        
                        
                        <a class="nav-link active timenav" href="Contact.html">Contact Us</a>
                    </form>

</ul>

</div>
        </div>
    </nav>
<h1 style="text-align: center; margin-top: 30px;">Gallery</h1>
	<br/><br/>
	
	
    <div style="min-height: 300px; padding: 20px;">
		<h4>Data & Lives: Computational and Ethnographic Approaches to Ageing (3 December, 2025)</h4>
	   <a href="img/dataandlives3dec25/IMG_0347.jpg" target="_blank"><img id="myImg1" src="img/dataandlives3dec25/IMG_0347.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
       <a href="img/dataandlives3dec25/IMG_0356.jpg" target="_blank"><img id="myImg1" src="img/dataandlives3dec25/IMG_0356.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
<a href="img/dataandlives3dec25/PHOTO-2025-12-03-19-34-50.jpg" target="_blank"><img id="myImg1" src="img/dataandlives3dec25/PHOTO-2025-12-03-19-34-50.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
<a href="img/dataandlives3dec25/PHOTO-2025-12-03-19-34-58.jpg" target="_blank"><img id="myImg1" src="img/dataandlives3dec25/PHOTO-2025-12-03-19-34-58.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
        <a href="img/dataandlives3dec25/PHOTO-2025-12-03-19-35-02.jpg" target="_blank"><img id="myImg1" src="img/dataandlives3dec25/PHOTO-2025-12-03-19-35-02.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
        
       <a href="img/dataandlives3dec25/IMG_0340.jpg" target="_blank"><img id="myImg1" src="img/dataandlives3dec25/IMG_0340.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
       
        
         <a href="img/dataandlives3dec25/IMG_0353.jpg" target="_blank"><img id="myImg1" src="img/dataandlives3dec25/IMG_0353.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
		
        <a href="img/dataandlives3dec25/IMG_0366.jpg" target="_blank"><img id="myImg1" src="img/dataandlives3dec25/IMG_0366.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
        
        <a href="img/dataandlives3dec25/PHOTO-2025-12-03-19-34-51.jpg" target="_blank"><img id="myImg1" src="img/dataandlives3dec25/PHOTO-2025-12-03-19-34-51.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>

</div>
<br/><hr/><br/>

<div style="min-height: 300px; padding: 20px;">
		<h4>Field and Notes II: Digital Methods in Qualitative Research (26-28 Feb, 2025)</h4>
	   <a href="img/fieldsandnotesgallery/IMG_4021.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_4021.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
       
        <a href="img/fieldsandnotesgallery/IMG_4043.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_4043.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
         <a href="img/fieldsandnotesgallery/IMG_1869.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_1869.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
		<a href="img/fieldsandnotesgallery/IMG_1969.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_1969.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
        <a href="img/fieldsandnotesgallery/IMG_1973.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_1973.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
        <a href="img/fieldsandnotesgallery/IMG_1990.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_1990.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
        <a href="img/fieldsandnotesgallery/IMG_2079.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_2079.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
        <a href="img/fieldsandnotesgallery/IMG_2088.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_2088.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
        <a href="img/fieldsandnotesgallery/IMG_2097.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_2097.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
        <a href="img/fieldsandnotesgallery/IMG_2105.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_2105.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
        <a href="img/fieldsandnotesgallery/IMG_2122.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_2122.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
         <a href="img/fieldsandnotesgallery/IMG_4023.jpg" target="_blank"><img id="myImg1" src="img/fieldsandnotesgallery/IMG_4023.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>

</div>
<br/><hr/><br/>

<div style="min-height: 300px; padding: 20px;">
		<h4>Ethnography Workshop 17th & 18th January 2024</h4>
	    <a href="img/ethw1718jan24/Ethnography_Day-1_13.jpg" target="_blank"><img id="myImg1" src="img/ethw1718jan24/Ethnography_Day-1_13.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
		<a href="img/ethw1718jan24/Ethnography_Day-1_15.jpg" target="_blank"><img id="myImg1" src="img/ethw1718jan24/Ethnography_Day-1_15.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
		<a href="img/ethw1718jan24/Ethnography_Day-1_35.jpg" target="_blank"><img id="myImg1" src="img/ethw1718jan24/Ethnography_Day-1_35.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
		<a href="img/ethw1718jan24/Ethnography_Day-2_13.jpg" target="_blank"><img id="myImg1" src="img/ethw1718jan24/Ethnography_Day-2_13.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
		<a href="img/ethw1718jan24/Ethnography_Day-2_16.jpg" target="_blank"><img id="myImg1" src="img/ethw1718jan24/Ethnography_Day-2_16.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
		<a href="img/ethw1718jan24/Ethnography_Day-2_32.jpg" target="_blank"><img id="myImg1" src="img/ethw1718jan24/Ethnography_Day-2_32.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
		<a href="img/ethw1718jan24/Ethnography_Day-2_38.jpg" target="_blank"><img id="myImg1" src="img/ethw1718jan24/Ethnography_Day-2_38.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
		<a href="img/ethw1718jan24/Ethnography_Day-1_36.jpg" target="_blank"><img id="myImg1" src="img/ethw1718jan24/Ethnography_Day-1_36.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
	<a href="img/ethw1718jan24/Ethnography_Day-2_25.jpg" target="_blank"><img id="myImg1" src="img/ethw1718jan24/Ethnography_Day-2_25.jpg" alt="Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
</div>
	<br/><hr/><br/>
	
	<div style="min-height: 500px; padding: 20px;">
	<h4>Ethnography Workshop  2023</h4>
		<a href="img/IMG20231013163321.jpg" target="_blank"><img id="myImg1" src="img/IMG20231013163321.jpg" alt="Writing Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
	<a href="img/IMG20231013163325.jpg" target="_blank"><img id="myImg2" src="img/IMG20231013163325.jpg" alt="Writing Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
	<a href="img/IMG20231013163340.jpg" target="_blank"><img id="myImg3" src="img/IMG20231013163340.jpg" alt="Writing Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
	<a href="img/IMG20231013163345.jpg" target="_blank"><img id="myImg4" src="img/IMG20231013163345.jpg" alt="Writing Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
	<a href="img/IMG20231013163353.jpg" target="_blank"><img id="myImg5" src="img/IMG20231013163353.jpg" alt="Writing Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
	<a href="img/IMG20231013163355.jpg" target="_blank"><img id="myImg6" src="img/IMG20231013163355.jpg" alt="Writing Workshop Organised by the Ethnography Lab " style="width:100%;max-width:300px"></a>
</div>
	<br/><br/>
	

<div id="myModal" class="modal">

<span class="close">&times;</span>

<img class="modal-content" id="img01">

<div id="caption"></div>
</div>
	
	
<footer class="footer-distributed">

<div class="footer-left">

<h4 class="text-white">IIITD Ethnography Lab<br>Department of Social Science & Humanities</h4>
            
            
            <img src="">

<p class="footer-company-name text-white">Copyright © 2023</p>
        </div>

<div class="footer-center">

<div>
                <i class="fa fa-map-marker"></i>
                <p>Okhla Industrial Estate,<br>Phase III, Near Govind Puri Metro Station,<br> New Delhi-110020
                </p>
            </div>

<div>
                <i class="fa fa-phone"></i>
                <p>+91-011-71985300, +91-011-26907400-7404 <br>ethnographylab@iiitd.ac.in</p>

</div>

</div>

<div class="footer-right">

<!--<div>

<a href="#"><img src="static/facebook.png" width="40px" height="40px"></a>
                <a href="#"><img src="static/linkedin.png" width="40px" height="40px"></a>
                <a href="#"><img src="static/twitter.png" width="40px" height="40px"></a>
                <a href="#"><img src="static/insta.png" width="40px" height="40px"></a>

</div>-->
			
			<div>

<a href="#"><img src="static/facebook.png" style="width: 20%;"></a>
                <a href="#"><img src="static/linkedin.png" style="width: 10%;"></a>
                <a href="#"><img src="static/twitter.png" style="width: 10%;"></a>
                <a href="#"><img src="static/insta.png" style="width: 10%;"></a>

</div>
        </div>
    </footer>
	<script>
	
	// Get the modal
var modal = document.getElementById("myModal1");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg1");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close1")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

/////////////////////////////////////////////////////////////////

// Get the modal
var modal = document.getElementById("myModal2");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg2");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

/////////////////////////////////////////////////////////////////

// Get the modal
var modal = document.getElementById("myModal3");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg3");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

/////////////////////////////////////////////////////////////////

// Get the modal
var modal = document.getElementById("myModal4");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg4");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

/////////////////////////////////////////////////////////////////

// Get the modal
var modal = document.getElementById("myModal5");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg5");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

/////////////////////////////////////////////////////////////////

// Get the modal
var modal = document.getElementById("myModal6");

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg6");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

/////////////////////////////////////////////////////////////////

</script>
</body>

</html>

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.