Progress on gallery

This commit is contained in:
LogolicusYZ 2023-06-09 11:29:30 +02:00
parent 89390fa1eb
commit ee545f1aef
2 changed files with 45 additions and 1 deletions

View file

@ -40,7 +40,7 @@
}
a.banner img:hover {
transform: scale(1.005);
box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.4);
box-shadow: 0px 0px 16px rgba(32, 32, 32, 0.4);
cursor: pointer;
}
.buttons {

View file

@ -7,3 +7,47 @@
<h1>Gallery</h1>
<p>Here you'll find the sweet screenshots 😉.</p>
</div>
<div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic1.png" alt="1"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic2.png" alt="2"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic3.png" alt="3"></div>
</div>
<div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic4.png" alt="1"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic5.png" alt="2"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic6.png" alt="3"></div>
</div>
<div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic7.png" alt="1"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic8.png" alt="2"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic9.png" alt="3"></div>
</div>
<div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic10.png" alt="1"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic11.png" alt="2"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic12.png" alt="3"></div>
</div>
<div class="grid">
<div><img class="gallery-image" src="assets/images/gallery/pic13.png" alt="1"></div>
<div><img class="gallery-image" src="assets/images/gallery/pic14.png" alt="2"></div>
</div>
<style>
img.gallery-image {
border-radius: 1em;
transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
align-self: center;
}
img.gallery-image:hover {
transform: scale(1.005);
box-shadow: 0px 0px 1em rgba(32, 32, 32, 0.6);
cursor: pointer;
}
.gallery-image {
border-radius: 10px;
}
.grid {
margin-bottom: 1em;
}
</style>