From 52723f7fd5e1846508b515a60968959dfb491c0a Mon Sep 17 00:00:00 2001 From: Davi Sollar Date: Tue, 26 Sep 2023 08:42:35 -0300 Subject: [PATCH] bah --- index.html | 25 ++----------------------- scripts.js | 17 ++++++++++++++++- styles.css | 11 ++++++++++- 3 files changed, 28 insertions(+), 25 deletions(-) diff --git a/index.html b/index.html index 7c25905..378d345 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,6 @@ - @@ -133,29 +132,9 @@

Música trdicional da Festa Junina

Festa junina no Brasil – Wikipédia, a enciclopédia livre
Festa Junina: origem, características e a festa de São João - Toda Matéria

-

Feito por: Davi Sollar (vulgo HyperSonic3608)

-   -   - -

- - + + \ No newline at end of file diff --git a/scripts.js b/scripts.js index f41a43c..9be4517 100644 --- a/scripts.js +++ b/scripts.js @@ -1,10 +1,25 @@ +window.onscroll = function () { + stickynavbar() +}; + +let navbar = document.getElementById("navbar"); +let sticky = navbar.offsetTop; + +function stickynavbar() { + if (window.screenY || document.documentElement.scrollTop >= sticky) { + navbar.classList.add("sticky") + } else { + navbar.classList.remove("sticky"); + } +} + function openModal(event) { let modal = document.getElementById("myModal"); let images = document.getElementsByClassName("images"); let modalImg = document.getElementById("img01"); for (let i = 0; i < images.length; i++) { let img = images[i]; - img.onclick = function(evt) { + img.onclick = function (evt) { modal.style.display = "block"; modalImg.src = this.src; } diff --git a/styles.css b/styles.css index 587b16a..b5fed71 100644 --- a/styles.css +++ b/styles.css @@ -34,6 +34,7 @@ header div h1 { } #navbar { + z-index: 10; overflow: hidden; background-color: #333; } @@ -85,7 +86,7 @@ header div h1 { section { padding: 20px; - text-align: justify; + text-align:left; } section h2 { @@ -110,6 +111,10 @@ section img { margin-right: auto; } +section img:hover{ + opacity: 0.7; +} + #width25 { width: 25%; } @@ -179,6 +184,10 @@ footer p { font-size: 16px; } +footer p a { + text-decoration: none; +} + .icons { font-size: 30px; }