From 3720d8a59902918d985c1e8b19d6ace2580e6e70 Mon Sep 17 00:00:00 2001 From: anthonyrct <123770471+anthonyrct@users.noreply.github.com> Date: Thu, 17 Aug 2023 19:52:53 +0000 Subject: [PATCH 1/6] 17/08/23 --- css/sobre.css | 201 +++++++++++++++++++++++++++++++++++++++++++++ html/sobre.html | 175 +++++++++++++++++++++++++++++++++++++++ index.html | 2 +- js/headerScroll.js | 15 ++++ 4 files changed, 392 insertions(+), 1 deletion(-) create mode 100644 css/sobre.css create mode 100644 html/sobre.html diff --git a/css/sobre.css b/css/sobre.css new file mode 100644 index 0000000..5f11d49 --- /dev/null +++ b/css/sobre.css @@ -0,0 +1,201 @@ +* { + margin: 0; + padding: 0; +} + +/*-----===VARIABLES===-----*/ +:root { + --cinza-claro: #d6d6d6; + --cinza-escuro: #0f0f0f; + --azul-escuro: #11151c; + --azul-medio: #171a21; + --azul-claro: #364156; + --aqua-escuro: #3d7068; + --aqua-medio: #33d9c5; + --aqua-claro: #b9f4f3; + + background-color: var(--cinza-escuro); + + font-family: 'Krona One', sans-serif; +} + +/*-----===HEADER===-----*/ + +header { + min-height: 100px; + height: 20vh; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: var(--azul-escuro); +} + +/*---=Header Top=---*/ +.header-top, +.header-top-left, +.header-top-right, +nav, +.nav-content, +.nav-item { + display: flex; + align-items: center; + justify-content: center; +} + +.header-top { + height: 40%; + width: 100%; +} + +.header-top-left, +.header-top-right { + height: 100%; + width: 25%; +} + +/*-Header Top Left-*/ +/*-Header Top Center-*/ +nav { + height: 100%; + width: 50%; +} + +.nav-content { + height: 100%; + width: 100%; + justify-content: space-evenly; + list-style: none; +} + +.nav-item { + height: 100%; + width: auto; +} + +.nav-item a { + text-decoration: none; + color: var(--aqua-claro); + font-size: 15px; +} + +/*-Header Top Right-*/ +.site-theme-btn-container, +.shopping-kart-btn-container, +.user-account-btn-container { + height: 100%; + width: auto; + display: flex; + align-items: center; + justify-content: center; +} + +.site-theme-btn-container a, +.shopping-kart-btn-container a, +.user-account-btn-container a { + height: 100%; + width: 100%; +} + +.site-theme-btn-container a img, +.shopping-kart-btn-container a img, +.user-account-btn-container a img { + height: 100%; +} + +/*---=Header Bottom=---*/ +.header-bottom, +.search-bar-form, +.search-bar { + display: flex; + align-items: center; + justify-content: center; +} + +.header-bottom { + height: 60%; + width: 100%; +} + +.search-bar-form { + height: 50%; + width: 70%; + border-radius: 2em; + overflow: hidden; +} + +.search-bar { + height: 100%; + width: 100%; + border: none; +} + +.search-bar-content { + height: 100%; + width: 90%; + padding-left: 20px; + outline: none; + border: none; + font-family: 'Krona One', sans-serif; + font-size: 14px; +} + +.search-bar-submit { + height: 100%; + width: 10%; + background-color: var(--azul-claro); + outline: none; + border: none; + cursor: pointer; +} + +h3 { + color: white; +} + +p { + color: white; +} + +#mais { + display: none; +} + +/*---=codigo que está ocultando aquela metade do texto=---*/ + +div .container { + display: flex; + align-items: center; +} + +/*---=aqui é para deixar o texto centralizado=---*/ + +.historia { + display: flex; + justify-content: center; + align-items: center; + width: 75%; + height: 70%; +} + +/*---=aqui é para não só deixar o texto inteiro centralizado, mas tambem deixar ele cobrindo uma quantidade menor da tela, para o usuario pode ler sem preocupação=---*/ + +.seta { + display: flex; + justify-content: flex-end; +} + +/*---=aqui é para deixar a imagem da seta no canto da tela=---*/ + +div.img { + display: flex; + width: 56px; + height: 46px; +} + +/*---=aqui é para deixar a imagem em um tamanho que caiba no site e para que o usuario consiga enxerga-la=---*/ +button:hover { + transform: scale(1.1); + transition: all 0.5s; +}/*---=aqui é para o botão uma pequena animação de grandeza, ele irá aumentar um pouco para o usuario ter certeza do que está escolhendo=---*/ \ No newline at end of file diff --git a/html/sobre.html b/html/sobre.html new file mode 100644 index 0000000..6fef5de --- /dev/null +++ b/html/sobre.html @@ -0,0 +1,175 @@ + + + + + + + Document + + + + + + + + + + +
+
+
+ + + +
+
+ + + +
+ +
+ + + +
+ + +
+
+ +
+
+
+ + +
+
+
+
+ +
+ +
+
+

A História da Loja Ozza Tech:

+ +

Havia uma pequena cidade chamada Creston, que ficava aninhada no sopé de montanhas majestosas. Nessa + cidade, + havia uma loja peculiar chamada Ozza Tech. Fundada por um visionário chamado Oliver Ozza, a loja se + destacava por oferecer tecnologia avançada e soluções inovadoras em um lugar onde a tradição e o + modernismo + se entrelaçavam ... + + Oliver Ozza era um homem que sempre acreditou que a tecnologia poderia unir pessoas e melhorar + suas + vidas. + Ele cresceu lendo livros sobre inovações e sonhava em criar algo que deixasse um impacto + duradouro + na + sua + comunidade. Quando decidiu abrir a Ozza Tech, muitos duvidaram que uma loja de tecnologia + poderia + prosperar + em uma cidade que valorizava suas raízes históricas.

+ + No entanto, Oliver estava determinado. Ele transformou o espaço da loja em um ambiente acolhedor + e + futurista + ao mesmo tempo. As paredes de tijolos expostos contrastavam com mostradores de vidro reluzente + onde + os + produtos mais recentes e excitantes estavam em exibição. A loja tinha uma equipe de funcionários + apaixonados + e conhecedores, prontos para ajudar os clientes a navegar pelo mundo em constante evolução da + tecnologia. + + A Ozza Tech logo começou a ganhar uma reputação por ser mais do que uma loja. Eles ofereciam + workshops + gratuitos para ensinar os moradores locais sobre os benefícios da tecnologia e como utilizá-la + de + forma + significativa em suas vidas. Desde idosos que queriam se conectar com seus netos através de + redes + sociais + até jovens empreendedores buscando alavancar seus negócios online, a Ozza Tech estava lá para + orientar e + apoiar. + + Um dos momentos mais memoráveis ​​na história da Ozza Tech foi quando eles organizaram um + festival + de + tecnologia na praça da cidade. Com exposições interativas, palestras inspiradoras e atividades + para + todas as + idades, o festival atraiu pessoas de cidades vizinhas e trouxe um senso de modernidade à pacata + Creston. + + No entanto, nem tudo eram rosas. Conforme a tecnologia evoluía rapidamente, a Ozza Tech + enfrentava + desafios + constantes para se manter atualizada. Oliver e sua equipe tiveram que se adaptar constantemente + às + mudanças, + aprender novas habilidades e se reinventar para permanecer relevantes. + + Com o passar dos anos, a Ozza Tech se transformou de uma pequena loja de tecnologia em um centro + de + inovação + e aprendizado. Eles abriram filiais em outras cidades, ofereceram cursos online e expandiram + seus + serviços + para incluir consultoria tecnológica para empresas locais. A visão de Oliver Ozza se concretizou + além do + que + ele poderia ter imaginado. + + Hoje, a Ozza Tech é um nome conhecido em todo o país, sinônimo de progresso, educação + tecnológica e + conexão + comunitária. A história da loja Ozza Tech é um testemunho do poder da paixão, da visão e do + desejo + de + abraçar o futuro, mesmo quando se está enraizado no passado. +

+
+
+
+ + + +
+
+ +
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index c33aed8..2e2c05c 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@
  • - SOBRE + SOBRE
  • diff --git a/js/headerScroll.js b/js/headerScroll.js index e69de29..9d6225a 100644 --- a/js/headerScroll.js +++ b/js/headerScroll.js @@ -0,0 +1,15 @@ +function leiaMais() { + var pontos = document.getElementById("pontos"); + var maisTexto = document.getElementById("mais"); + var btnLeiaMais = document.getElementById("btnLeiaMais"); + + if (pontos.style.display === "none") { + pontos.style.display = "inline"; + maisTexto.style.display = "none"; + btnLeiaMais.innerHTML = "Leia Mais"; + } else { + pontos.style.display = "none"; + maisTexto.style.display = "inline"; + btnLeiaMais.innerHTML = "Leia Menos"; + } +}/*---local do script do botão leia Mais, onde quando o usuario clicar no botão, o texto irá se expandir, falta uma trasição suave para baixo para acabar---*/ \ No newline at end of file From c6bce16deec710f676c69663e017f1ea12c6108a Mon Sep 17 00:00:00 2001 From: anthonyrct <123770471+anthonyrct@users.noreply.github.com> Date: Fri, 18 Aug 2023 19:31:39 +0000 Subject: [PATCH 2/6] =?UTF-8?q?houveram=20mudan=C3=A7as,=20mas=20ainda=20f?= =?UTF-8?q?altam=20algumas=20coisas?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/sobre.css | 13 ++++++++++--- html/sobre.html | 8 +++++--- js/headerScroll.js | 19 ++++++++++++++++++- 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/css/sobre.css b/css/sobre.css index 5f11d49..3dfcdf3 100644 --- a/css/sobre.css +++ b/css/sobre.css @@ -188,14 +188,21 @@ div .container { /*---=aqui é para deixar a imagem da seta no canto da tela=---*/ -div.img { +.clikable-image { display: flex; width: 56px; - height: 46px; + height: 46; + cursor: pointer; } /*---=aqui é para deixar a imagem em um tamanho que caiba no site e para que o usuario consiga enxerga-la=---*/ button:hover { transform: scale(1.1); transition: all 0.5s; -}/*---=aqui é para o botão uma pequena animação de grandeza, ele irá aumentar um pouco para o usuario ter certeza do que está escolhendo=---*/ \ No newline at end of file + cursor:pointer; + transition: opacity 0.3 ease; +}/*---=aqui é para o botão uma pequena animação de grandeza, ele irá aumentar um pouco para o usuario ter certeza do que está escolhendo=---*/ + +h6{ + color: white; +} \ No newline at end of file diff --git a/html/sobre.html b/html/sobre.html index 6fef5de..a9ffbff 100644 --- a/html/sobre.html +++ b/html/sobre.html @@ -162,12 +162,14 @@

    A História da Loja Ozza Tech:

    - +
    - + imagem clicavel + +
    clique aqui para voltar ao inicio
    diff --git a/js/headerScroll.js b/js/headerScroll.js index 9d6225a..41854f0 100644 --- a/js/headerScroll.js +++ b/js/headerScroll.js @@ -12,4 +12,21 @@ function leiaMais() { maisTexto.style.display = "inline"; btnLeiaMais.innerHTML = "Leia Menos"; } -}/*---local do script do botão leia Mais, onde quando o usuario clicar no botão, o texto irá se expandir, falta uma trasição suave para baixo para acabar---*/ \ No newline at end of file +}/*---local do script do botão leia Mais, onde quando o usuario clicar no botão, o texto irá se expandir, falta uma trasição suave para baixo para acabar---*/ + +function scrollToTop(){ + window.scrollTo({ + top: 0, + behavior: 'smooth' // Ativa a rolagem suave + }); + } + + // Mostra o botão de rolagem ao rolar a página + window.onscroll = function() { + var scrollButton = document.querySelector('.scroll-top-button'); + if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { + scrollButton.style.display = 'null'; + } else { + scrollButton.style.display = 'none'; + } +} \ No newline at end of file From f6638bf123f42772918e191ae576b8f6d4043be6 Mon Sep 17 00:00:00 2001 From: anthonyrct <123770471+anthonyrct@users.noreply.github.com> Date: Tue, 22 Aug 2023 19:20:35 +0000 Subject: [PATCH 3/6] 22/08/23 --- css/sobre.css | 41 ++++++++++++++++++++++++++++++++--------- html/sobre.html | 41 ++++++++++++++++++++++++++--------------- index.html | 18 +++++++++++------- 3 files changed, 69 insertions(+), 31 deletions(-) diff --git a/css/sobre.css b/css/sobre.css index 3dfcdf3..768250b 100644 --- a/css/sobre.css +++ b/css/sobre.css @@ -156,6 +156,8 @@ h3 { p { color: white; + text-align: center; + } #mais { @@ -164,7 +166,7 @@ p { /*---=codigo que está ocultando aquela metade do texto=---*/ -div .container { +.container { display: flex; align-items: center; } @@ -175,34 +177,55 @@ div .container { display: flex; justify-content: center; align-items: center; - width: 75%; - height: 70%; + width: 100%; + height: 100%; } /*---=aqui é para não só deixar o texto inteiro centralizado, mas tambem deixar ele cobrindo uma quantidade menor da tela, para o usuario pode ler sem preocupação=---*/ -.seta { +.cima { display: flex; justify-content: flex-end; + align-items: center; } /*---=aqui é para deixar a imagem da seta no canto da tela=---*/ +main .imagem{ + display: flex; + justify-content: center; + width: 41.3%; + height: 768; +} -.clikable-image { +div .seta { display: flex; width: 56px; - height: 46; + height: 46px; cursor: pointer; } /*---=aqui é para deixar a imagem em um tamanho que caiba no site e para que o usuario consiga enxerga-la=---*/ + button:hover { transform: scale(1.1); transition: all 0.5s; - cursor:pointer; + cursor: pointer; transition: opacity 0.3 ease; -}/*---=aqui é para o botão uma pequena animação de grandeza, ele irá aumentar um pouco para o usuario ter certeza do que está escolhendo=---*/ +} + +/*---=aqui é para o botão uma pequena animação de grandeza, ele irá aumentar um pouco para o usuario ter certeza do que está escolhendo=---*/ + +h6 { + color: white; +} -h6{ +#btnLeiaMais { + transition: 10ms; + padding: 20px; + display: flex; + justify-content: flex-start; + background-color: #11151c; color: white; + border: none; + top: 0px; } \ No newline at end of file diff --git a/html/sobre.html b/html/sobre.html index a9ffbff..e0983fb 100644 --- a/html/sobre.html +++ b/html/sobre.html @@ -4,7 +4,7 @@ - Document + Sobre @@ -22,7 +22,7 @@