101 lines
3.5 KiB
HTML
101 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Image Gallery</title>
|
|
<link rel="stylesheet" href="../css/styles.css">
|
|
<link rel="stylesheet" href="../css/gallery.css">
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Navigation Bar -->
|
|
<nav>
|
|
<div class="nav-container">
|
|
<a href="../index.html" class="nav-logo">Image Upload</a>
|
|
<ul class="nav-menu">
|
|
<li><a href="../index.html">Home</a></li>
|
|
<li><a href="gallery.html" class="active">Gallery</a></li>
|
|
<li><a href="user_gallery.html">Uploads</a></li>
|
|
<li><a href="../login/login.html">Sign In</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<!-- Gallery Page -->
|
|
<div class="container">
|
|
<h2 class="heading-text"><span>Image</span> Gallery</h2>
|
|
<ul class="image-gallery">
|
|
<li>
|
|
<img src="https://source.unsplash.com/VWcPlbHglYc" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img
|
|
src="https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExc3FzdTEyZWJ0aXlicmZvMzlnM28ycWpndHBlNmEydDd3MjdmdXFpeiZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/EZICHGrSD5QEFCxMiC/giphy.gif"
|
|
alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://source.unsplash.com/e6FMMambeO4" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://source.unsplash.com/klCiPmzUw0Y" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://source.unsplash.com/IdNOTjPeHrE" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://source.unsplash.com/O0N9MF--hK4" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://source.unsplash.com/FV3GConVSss" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://source.unsplash.com/0ESjL-Nw22Y" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://source.unsplash.com/KTVn62x6fFw" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
|
|
<li>
|
|
<img src="https://source.unsplash.com/VSeVhmW4_JQ" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://source.unsplash.com/07aFaTf24Kg" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://source.unsplash.com/DqyYTM7pR2o" alt="" />
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://via.placeholder.com/300x300" alt="Placeholder Image">
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://via.placeholder.com/300x600" alt="Placeholder Image">
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://via.placeholder.com/200x600" alt="Placeholder Image">
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
<li>
|
|
<img src="https://via.placeholder.com/600x200" alt="Placeholder Image">
|
|
<div class="overlay"><span>Image title</span></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<script src="gallery.js"></script>
|
|
</body>
|
|
|
|
</html> |