image-gallery

This commit is contained in:
kankys 2024-03-28 20:08:37 +01:00
parent 18d6d01dc5
commit a92c082720
6 changed files with 65 additions and 2 deletions

BIN
img/config.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

BIN
img/fzf.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 226 KiB

BIN
img/home.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

View File

@ -119,7 +119,10 @@
</p> </p>
</section> </section>
<section class="photo"> <section class="photo">
<!--Jsem přidám galerii--> <img class="picture" src="img/home.png" alt="Homescreen" />
<img class="picture1" src="img/config.png" alt="config.vim">
<img class="picture2" src="img/fzf.png" alt="fzf">
</section> </section>
<section id="install"> <section id="install">
<h2>Instalace a nastavení:</h2> <h2>Instalace a nastavení:</h2>

View File

@ -75,3 +75,48 @@ document.getElementById("toggleButton").addEventListener("click", toggleMode);
// Nastavit výchozí styl na Dracula mód po načtení stránky // Nastavit výchozí styl na Dracula mód po načtení stránky
setDraculaStyles(); setDraculaStyles();
isDraculaMode = true; isDraculaMode = true;
// Photo Gallery -> section
const image1 = document.querySelector(".picture")
image1.addEventListener("mouseenter", () => {
image1.style.transform = "scale(2.2)"
})
image1.addEventListener("mouseleave", () => {
image1.style.transform = "scale(1)"
})
const image2 = document.querySelector(".picture1")
image2.addEventListener("mouseenter", () => {
image2.style.transform = "scale(2.2)"
})
image2.addEventListener("mouseleave", () => {
image2.style.transform = "scale(1)"
})
const image3 = document.querySelector(".picture2")
image3.addEventListener("mouseenter", () => {
image3.style.transform = "scale(2.2)"
})
image3.addEventListener("mouseleave", () => {
image3.style.transform = "scale(1)"
})

View File

@ -139,9 +139,24 @@ padding: 10px;
.sat { .sat {
width: 175px; width: 175px;
height: 175px;} height: 175px;
}
.photo {
text-align: center;
}
.photo img {
width: 300px;
height: 200px;
margin: 10px;
transition: all 0.5s linear;
}
/*footer pevná pozice*/ /*footer pevná pozice*/
footer { footer {