diff --git a/img/icons8-rocket.gif b/img/icons8-rocket.gif new file mode 100644 index 0000000..c2a91fa Binary files /dev/null and b/img/icons8-rocket.gif differ diff --git a/index.html b/index.html index 4896936..29ec23f 100644 --- a/index.html +++ b/index.html @@ -6,9 +6,12 @@ + + + - + diff --git a/script.js b/script.js index 2259238..31932dc 100644 --- a/script.js +++ b/script.js @@ -27,8 +27,9 @@ const p = document.querySelector("p"); const solid = document.querySelector(".fa-solid"); const solid1 = document.querySelector(".menu-icon"); const footer = document.querySelector("footer"); -const gotop = document.getElementById("scrollToTopBtn"); - +const gotop = document.querySelector("#scrollToTopBtn"); +const theme = document.querySelector("#toggleButton"); +const box = document.querySelectorAll(".code-box"); let isDraculaMode = false; // Funkce pro nastavení stylů pro Dracula mód @@ -48,14 +49,27 @@ function setDraculaStyles() { solid.style.color = "#f76b00"; solid1.style.backgroundColor = "#2a232b"; footer.style.backgroundColor = "#2a232b"; - gotop.style.backgroundColor = "#18f700"; + gotop.style.backgroundColor = "#18f700"; + theme.style.backgroundColor = "#18f700"; } -// Funkce pro nastavení stylů pro Light mód +// Funkce pro nastavení stylů pro Light mód; function setLightStyles() { - body.style.backgroundColor = "#f8f8f2"; // Barva pozadí pro Light mód + body.style.backgroundColor = "#e7efa7"; // Barva pozadí pro Light mód body.style.color = "#282a36"; // Barva textu pro Light mód - head.style.backgroundColor = "#f8f8f2"; + head.style.backgroundColor = "#e7efa7"; + nav.style.backgroundColor = "#e7efa7"; + solid.style.backgroundColor = "#e7efa7"; + solid1.style.backgroundColor = "#e7efa7"; + footer.style.backgroundColor = "#e7efa7"; + nadpish2.forEach((h2) => { + h2.style.color = "#c627d8"; + }); + gotop.style.backgroundColor = "#a7e6ef"; + theme.style.backgroundColor = "#a7e6ef"; + box.forEach((p) =>{ + p.style.color = "white" + }) } // Funkce pro přepnutí módu @@ -78,55 +92,42 @@ document.getElementById("toggleButton").addEventListener("click", toggleMode); setDraculaStyles(); isDraculaMode = true; - - // Photo Gallery -> section -const image1 = document.querySelector(".picture") +const image1 = document.querySelector(".picture"); image1.addEventListener("mouseenter", () => { - - image1.style.transform = "scale(2.2)" - -}) + image1.style.transform = "scale(2.2)"; +}); image1.addEventListener("mouseleave", () => { + image1.style.transform = "scale(1)"; +}); - image1.style.transform = "scale(1)" - -}) - -const image2 = document.querySelector(".picture1") +const image2 = document.querySelector(".picture1"); image2.addEventListener("mouseenter", () => { - - image2.style.transform = "scale(2.2)" - -}) + image2.style.transform = "scale(2.2)"; +}); image2.addEventListener("mouseleave", () => { + image2.style.transform = "scale(1)"; +}); - image2.style.transform = "scale(1)" - -}) - -const image3 = document.querySelector(".picture2") +const image3 = document.querySelector(".picture2"); image3.addEventListener("mouseenter", () => { - - image3.style.transform = "scale(2.2)" - -}) + image3.style.transform = "scale(2.2)"; +}); image3.addEventListener("mouseleave", () => { - - image3.style.transform = "scale(1)" - -}) - + image3.style.transform = "scale(1)"; +}); // Tlačítko go to top // Zobrazit tlačítko, pokud je uživatel dostatečně daleko od horní části stránky -window.onscroll = function() {scrollFunction()}; +window.onscroll = function () { + scrollFunction(); +}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { diff --git a/style.css b/style.css index 4c54ee0..addfe77 100644 --- a/style.css +++ b/style.css @@ -11,7 +11,6 @@ body { max-width: 1000px; margin: 0 auto; - /*background-color: green;*/ } /* Terminal ( header) */ @@ -61,7 +60,6 @@ nav li a { .menu-icon { display: none; margin-right: 30px; -/*background-color: white;*/ } /*Dark/Light mode button*/ @@ -69,7 +67,6 @@ nav li a { float: right; margin-right: 30px; margin-top: 10px; -background-color: #18f700; color: black; border-bottom: 60px; border-radius: 30px; @@ -85,11 +82,9 @@ padding: 10px; } header { - /*width: 375px; */ position: relative; } header nav { - /*background-color: white;*/ position: absolute; top: 70px; width: 100%; @@ -112,7 +107,6 @@ padding: 10px; /* Sekce */ .content { - /*padding-top: 150px;*/ text-align: center; } @@ -155,7 +149,7 @@ padding: 10px; /*Code box*/ .code-box { - background-color: grey; + background-color: #353535; padding: 10px; border: 1px solid #ccc; border-radius: 5px;