alvin/carsite
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/carsite.git synced 2026-03-06 13:21:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

ds

Browse Source
This commit is contained in:
vista-man
2024-10-31 11:09:45 +01:00
parent 0450f68d0d
commit a9eade2435
3 changed files with 64 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
css/gallery.css Normal file
View File

@@ -0,0 +1,48 @@
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
}
.gallery {
--size: 100px;
display: grid;
grid-template-columns: repeat(6, var(--size));
grid-auto-rows: var(--size);
margin-bottom: var(--size);
place-items: start center;
gap: 5px;
&:has(:hover) img:not(:hover),
&:has(:focus) img:not(:focus){
filter: brightness(0.5) contrast(0.5);
}
& img {
object-fit: cover;
width: calc(var(--size) * 2);
height: calc(var(--size) * 2);
clip-path: path("M90,10 C100,0 100,0 110,10 190,90 190,90 190,90 200,100 200,100 190,110 190,110 110,190 110,190 100,200 100,200 90,190 90,190 10,110 10,110 0,100 0,100 10,90Z");
transition: clip-path 0.25s, filter 0.75s;
grid-column: auto / span 2;
border-radius: 50px;
&:nth-child(5n - 1) {
grid-column: 2 / span 2
}
&:hover,
&:focus {
clip-path: path("M0,0 C0,0 200,0 200,0 200,0 200,100 200,100 200,100 200,200 200,200 200,200 100,200 100,200 100,200 100,200 0,200 0,200 0,100 0,100 0,100 0,100 0,100Z");
z-index: 1;
transition: clip-path 0.25s, filter 0.25s;
}
&:focus {
outline: 1px dashed black;
outline-offset: -5px;
}
}
}

15
gallery.html Normal file
View File

@@ -0,0 +1,15 @@
<link rel="stylesheet" href="css/gallery.css">
<article class="gallery">
<img src="media/1.jpg" alt="" />
<img src="media/2.jpg" alt="" />
<img src="media/3.jpg" alt="" />
<img src="media/4.jpg" alt="" />
<img src="media/5.jpg" alt="" />
<img src="media/6.jpg" alt="" />
<img src="media/7.jpg" alt="" />
<img src="media/8.jpg" alt="" />
<img src="media/9.jpg" alt="" />
<img src="media/26.jpg" alt="" />
</article>

2
index.html
View File

@@ -144,7 +144,7 @@
<div class="collapse navbar-collapse" id="navbarSupportedContent"> <div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav nav-dropdown" data-app-modern-menu="true"> <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link link text-black display-4" href="#">Gallery</a> <a class="nav-link link text-black display-4" href="gallery.html">Gallery</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link link text-black display-4" href="#" aria-expanded="false">Events</a> <a class="nav-link link text-black display-4" href="#" aria-expanded="false">Events</a>