beenull/Imgur-Clone
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gallery update with placeholder images

Browse source
This commit is contained in:
Toddeh 2024-04-13 00:08:50 -07:00
parent 3e05ad12ad
commit c08c281dae
2 changed files with 42 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
frontend/css/gallery.css
View file

@ -1,20 +1,31 @@
/* Gallery Page Styles */
#gallery-container {
width: 100%;
max-width: 1200px;
padding: 20px;
box-sizing: border-box;
}
#image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
#image-grid img {
width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
width: 100%;
max-width: 1200px;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
}
#image-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.image-item {
position: relative;
overflow: hidden;
}
.gallery-image {
width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.image-item:hover .gallery-image {
transform: scale(1.1);
}

14
frontend/gallery/gallery.html
View file

@ -23,7 +23,19 @@
<div id="gallery-container">
<h2>Image Gallery</h2>
<div id="image-grid">
<!-- Dynamically generated images will be displayed here -->
<div class="image-item">
<img src="https://via.placeholder.com/300x300" alt="Placeholder Image 1" class="gallery-image">
</div>
<div class="image-item">
<img src="https://via.placeholder.com/300x600" alt="Placeholder Image 2" class="gallery-image">
</div>
<div class="image-item">
<img src="https://via.placeholder.com/300x200" alt="Placeholder Image 3" class="gallery-image">
</div>
<div class="image-item">
<img src="https://via.placeholder.com/300x100" alt="Placeholder Image 4" class="gallery-image">
</div>
<!-- Add more placeholder images as needed -->
</div>
</div>