To design a web application for an inteactive image gallery with minimum five images.
Clone the github repository and create Django admin interface.
Change settings.py file to allow request from all hosts.
Use CSS for positioning and styling.
Write JavaScript program for implementing interactivity.
Validate the HTML and CSS code.
Publish the website in the given URL.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive Image Gallery</title>
<style>
body {
margin: 0;
padding: 30px;
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(to right, #1A2A40, #6C7293);
text-align: center;
}
h1 {
color: #FFF;
margin-bottom: 20px;
font-size: 2.5rem;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
max-width: 1200px;
margin: auto;
}
.gallery img {
width: 180px;
height: 180px;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.gallery img:hover {
transform: scale(1.05);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}
.lightbox {
display: none;
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
justify-content: center;
align-items: center;
z-index: 1000;
}
.lightbox img {
max-width: 90%;
max-height: 80%;
border-radius: 10px;
box-shadow: 0 0 30px #000;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.footer {
margin-top: 40px;
color: #FFF;
font-weight: bold;
font-size: 1.1rem;
}
</style>
</head>
<body>
<h1>Whimsical Tree-Themed Image Gallery</h1>
<div class="gallery">
<img src="tree.png" alt="Tree Image 1">
<img src="tree2.jpeg" alt="Tree Image 2">
<img src="tree3.png" alt="Tree Image 3">
<img src="tree4.jpeg" alt="Tree Image 4">
<img src="tree5.jpg" alt="Tree Image 5">
<img src="tree6.jpg" alt="Tree Image 6">
<img src="tree7.jpeg" alt="Tree Image 7">
<img src="tree8.jpg" alt="Tree Image 8">
</div>
<div class="lightbox" id="lightbox">
<img id="lightbox-img" src="" alt="Full View">
</div>
<div class="footer">
Name: L Jessica Effrosini <br>
Register No: 212224110026
</div>
<script>
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const galleryImgs = document.querySelectorAll('.gallery img');
galleryImgs.forEach(img => {
img.addEventListener('click', () => {
lightboxImg.src = img.src;
lightbox.style.display = 'flex';
});
});
lightbox.addEventListener('click', () => {
lightbox.style.display = 'none';
});
</script>
</body>
</html>
The program for designing an interactive image gallery using HTML, CSS and JavaScript is executed successfully.