diff --git a/assets/css/button_up.css b/assets/css/button_up.css new file mode 100644 index 00000000..b884e667 --- /dev/null +++ b/assets/css/button_up.css @@ -0,0 +1,14 @@ +.button-up { + background-color: #6e6197; + color: #ffffff; + border: none; + border-radius: 5px; + padding: 10px 20px; + cursor: pointer; + position: fixed; + top: 90%; + right: 20px; + display: none; +} + +/*# sourceMappingURL=button_up.css.map */ diff --git a/assets/css/button_up.css.map b/assets/css/button_up.css.map new file mode 100644 index 00000000..8c8c7910 --- /dev/null +++ b/assets/css/button_up.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../sass/button_up.sass","../sass/_variables.sass"],"names":[],"mappings":"AAEA;EACI,kBCSU;EDRV,OCHI;EDIJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"button_up.css"} \ No newline at end of file diff --git a/assets/js/scrollToTop.js b/assets/js/scrollToTop.js new file mode 100644 index 00000000..1a5ded69 --- /dev/null +++ b/assets/js/scrollToTop.js @@ -0,0 +1,19 @@ +const button = document.querySelector(".button-up"); + +const showButtonIfScroll = () => { + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + button.style.display = "block"; + } else { + button.style.display = "none"; + } +}; + +const scrollToTop = () => { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); +}; + +button.addEventListener("click", scrollToTop); +window.onscroll = () => showButtonIfScroll(); diff --git a/assets/sass/button_up.sass b/assets/sass/button_up.sass new file mode 100644 index 00000000..8f8fb575 --- /dev/null +++ b/assets/sass/button_up.sass @@ -0,0 +1,13 @@ +@import "variables" + +.button-up + background-color: $primary-500 + color: $white + border: none + border-radius: 5px + padding: 10px 20px + cursor: pointer + position: fixed + top: 90% + right: 20px + display: none diff --git a/index.html b/index.html index 7c7a1246..4cf6d95c 100644 --- a/index.html +++ b/index.html @@ -1,89 +1,138 @@ + + + + + + - - - - - - + + - - + + + + + + + - - - - - - + + - - + + - - + Diciotech + - Diciotech - - - -
- -

- Diciotech -

-

- Um dicionário tech para pessoas que querem aprender mais sobre termos - técnicos dentro da tecnologia 📖 -

- - -
-
-
-
- + +
+ - -
-
- - + +

+ Diciotech +

+

+ Um dicionário tech para pessoas que querem aprender mais sobre termos + técnicos dentro da tecnologia 📖 +

+ + + +
+
+
+ + + + +
+
+ + +
-
-
-
-
-

O Diciotech usa cookies para garantir que você obtenha uma melhor experiência. - Desativar os cookies do site pode prejudicar a funcionalidade de alguns recursos e ao continuar usando, você - concorda com a nossa Política de Cookies. Ler mais

-
- +
+
+
+

+ O Diciotech usa cookies para garantir que você obtenha uma melhor + experiência. Desativar os cookies do site pode prejudicar a + funcionalidade de alguns recursos e ao continuar usando, você + concorda com a nossa Política de Cookies. + Ler mais + +

+
+ +
-
-
- - - - - \ No newline at end of file + + + + + + +