diff --git a/css/sobre.css b/css/sobre.css new file mode 100644 index 0000000..c07f70c --- /dev/null +++ b/css/sobre.css @@ -0,0 +1,240 @@ +* { + 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; + text-align:justify; +} + +p { + color: white; + text-align: center; + +} + +#mais { + display: none; +} + +/*---=codigo que está ocultando aquela metade do texto=---*/ + +.container { + display: flex; + align-items: center; + justify-content: center; +} + +/*---=aqui é para deixar o texto centralizado=---*/ + +.historia { + display: flex; + justify-content: center; + align-items:baseline; + 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=---*/ + +.cima { + display: flex; + justify-content: flex-end; + align-items: center; +} + +/*---=aqui é para deixar a imagem da seta no canto da tela=---*/ +.imagem{ + display: flex; + justify-content: center; + width: 100%; + height: 100%; +} +.img { + width: 100%; + height: 100%; +} +.imgBanner { + width: 100%; +} + +div .seta { + display: flex; + width: 56px; + 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; + 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; +} + +#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 new file mode 100644 index 0000000..2f2b835 --- /dev/null +++ b/html/sobre.html @@ -0,0 +1,203 @@ + + + + + + + Sobre + + + + + + + + + + +
+
+
+ + + +
+
+ + + +
+ +
+ + + +
+ + +
+
+ +
+
+
+ + +
+
+
+
+
+
+
+
+ +
+
+ +
+
+

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. +

+
+
+
+
+ +
+ + +
+ +
+
+ + imagem clicavel + +
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index c33aed8..5f3700a 100644 --- a/index.html +++ b/index.html @@ -1,9 +1,10 @@ + - Document + Home @@ -25,7 +26,7 @@
  • - SOBRE + SOBRE
  • @@ -58,17 +59,19 @@ - +
    - - + +
    - +
    + \ No newline at end of file diff --git a/js/headerScroll.js b/js/headerScroll.js index e69de29..41854f0 100644 --- a/js/headerScroll.js +++ b/js/headerScroll.js @@ -0,0 +1,32 @@ +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---*/ + +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