From 6694de032ec2c5979a3eefae5322fa3503100984 Mon Sep 17 00:00:00 2001 From: Giovanni Marcon Date: Fri, 26 Mar 2021 23:27:25 -0300 Subject: [PATCH] Finalizado Mini Site jQuery --- Dia 42 - jQuery - Mini Site/css/index.css | 100 +++++++++++++++++----- Dia 42 - jQuery - Mini Site/css/style.css | 66 -------------- Dia 42 - jQuery - Mini Site/index.html | 31 +++---- Dia 42 - jQuery - Mini Site/js/index.js | 2 +- 4 files changed, 91 insertions(+), 108 deletions(-) diff --git a/Dia 42 - jQuery - Mini Site/css/index.css b/Dia 42 - jQuery - Mini Site/css/index.css index 4f4adb2..8e591a7 100644 --- a/Dia 42 - jQuery - Mini Site/css/index.css +++ b/Dia 42 - jQuery - Mini Site/css/index.css @@ -2,10 +2,83 @@ html { scroll-behavior: smooth; } +body { + --cor-acento-suave: #c859ad; + --cor-acento-normal: #952a7b; + --cor-acento-forte: #801565; + --cor-ativo: #ffd51f; + --cor-fundo-claraX: #fdf9f7; + --cor-fundo-clara: #fff5f2; + --cor-fundo-normal: #ffc8ba; + --cor-fundo-escura: #dfa99c; + --cor-fundo-escuraX: #b68b81; + --cor-texto-clara: #222; + --cor-texto-normal: #111; + --cor-texto-escura: #000; + color: var(--cor-texto-normal); + font-size: 1.3em; +} + +.escondido-inicio { + display: none; +} + +/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */ +/* ▲▼▲▼▲▼▲▼▲▼▲▼▲ Header ▼▲▼▲▼▲▼▲▼▲▼▲▼ */ +/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */ + +header { + height: 60px; + background-color: var(--cor-acento-suave); +} + +#header-conteudo { + display: flex; + justify-content: space-between; + align-items: center; + width: var(--largura-meio); + max-width: var(--largura-maxima); + margin: auto; +} + +#header-conteudo i { + font-size: 30px; + padding: 0 5px; + cursor: pointer; + line-height: 50px; + color: rgba(0, 0, 0, 0.05); +} + +#header-conteudo i:hover { + color: var(--amarelo-400); +} + +header img { + height: 50px; + margin: 5px 0; +} + +/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */ +/* ▲▼▲▼▲▼▲▼▲▼▲▼▲ Outros ▼▲▼▲▼▲▼▲▼▲▼▲▼ */ +/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */ + +main { + min-height: calc(100vh - 120px); +} + body { background-color: var(--cor-fundo-clara); } +footer { + background-color: var(--cor-acento-suave); + color: var(--cor-ativo); + height: 50px; + display: flex; + justify-content: center; + align-items: center; +} + /* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */ /* ▲▼▲▼▲▼▲▼▲▼▲▼▲ Link float ▼▲▼▲▼▲▼▲▼▲▼▲▼ */ /* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */ @@ -27,7 +100,7 @@ body { #links-float i:hover { text-shadow: 0px 0px 2px rgba(245, 245, 245, 0.1); - color: var(--azul-500); + color: var(--amarelo-400); font-size: 45px; opacity: 0.5; } @@ -90,7 +163,7 @@ body { background-color: rgba(255, 255, 255, 0.822); border-radius: 12px; padding: 30px; - margin: 6vh 10vh 0; + margin: 35px 10vh 0; min-width: 320px; min-height: 500px; width: 40vh; @@ -114,24 +187,8 @@ body { margin: 25px 0 0 0; } -#contato-fundo { - background-color: var(--cor-fundo-clara); -} - -#contato { - width: var(--largura-meio); - max-width: var(--largura-maxima); - margin: auto; - padding: 20px 40px; - text-align: justify; -} - -#contato p { - font-weight: 300; -} - /* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */ -/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ Acais ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */ +/* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ Açaís ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */ /* ▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼ */ #acai-fundo { @@ -152,6 +209,7 @@ body { padding: 0px 15px; background-color: var(--cor-fundo-normal); width: 30%; + border-radius: 14px; } .acai-cartao:hover { @@ -165,7 +223,9 @@ body { } .acai-cartao h4 { - background-color: rgba(0, 0, 0, 0.315); + background-color: var(--cor-acento-normal); + color: var(--cor-ativo); + border-radius: 8px; padding: 10px 0 10px; margin-top: 16px; text-align: center; diff --git a/Dia 42 - jQuery - Mini Site/css/style.css b/Dia 42 - jQuery - Mini Site/css/style.css index 247ebdb..02f2677 100644 --- a/Dia 42 - jQuery - Mini Site/css/style.css +++ b/Dia 42 - jQuery - Mini Site/css/style.css @@ -102,69 +102,3 @@ h6 { --rosa-800: rgba(157, 23, 77); --rosa-900: rgba(131, 24, 67); } - -/* --------------------- */ - -body { - --cor-acento-suave: #c859ad; - --cor-acento-normal: #952a7b; - --cor-acento-forte: #801565; - --cor-ativo: #ffd51f; - --cor-fundo-claraX: #fdf9f7; - --cor-fundo-clara: #fff5f2; - --cor-fundo-normal: #ffc8ba; - --cor-fundo-escura: #dfa99c; - --cor-fundo-escuraX: #b68b81; - --cor-texto-clara: #222; - --cor-texto-normal: #111; - --cor-texto-escura: #000; - color: var(--cor-texto-normal); - font-size: 1.3em; -} - -.escondido-inicio { - display: none; -} - -header { - height: 60px; - background-color: var(--cor-acento-suave); -} - -#header-conteudo { - display: flex; - justify-content: space-between; - align-items: center; - width: var(--largura-meio); - max-width: var(--largura-maxima); - margin: auto; -} - -#header-conteudo i { - font-size: 30px; - padding: 0 5px; - cursor: pointer; - line-height: 50px; - color: var(--cor-texto-normal); -} - -#header-conteudo i:hover { - color: var(--amarelo-400); -} - -header img { - height: 50px; - margin: 5px 0; -} - -main { - min-height: calc(100vh - 120px); -} - -footer { - background-color: var(--cor-fundo-escura); - height: 80px; - display: flex; - justify-content: center; - align-items: center; -} diff --git a/Dia 42 - jQuery - Mini Site/index.html b/Dia 42 - jQuery - Mini Site/index.html index 9a0d554..773de17 100644 --- a/Dia 42 - jQuery - Mini Site/index.html +++ b/Dia 42 - jQuery - Mini Site/index.html @@ -94,31 +94,20 @@

Absolute Açaí.

-

Gabriela Calhau

- Foto da Gabi -

Sempre correndo atrás do seus sonhos, Gabi cheia de responsabilidades com uma vida - agitada e - corrida do jeito que ela gosta. Ama ficar com a família e amigos. No momento o maior - objetivo dela é crescer profissionalmente e se destacar no mercado de trabalho.

+

Açaí com Banana

+ Foto da Gabi +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, fuga omnis rem corrupti in ab? +

-

Mahonri Maia

- Foto do Mahonri -

"Mahon (Marrom)" para simplificar as coisas. É formado em Design Gráfico e um entusiasta - de - ilustrações e caligrafia. Tem experiência com diagramação de livros e revistas e - atualmente - está realizando seu sonho de adolescência de ser se tornar um desenvolvedor web.

+

Açaí com Morango

+ Foto do Mahonri +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, fuga omnis rem corrupti in ab?

-

Giovanni Marcon

- Foto do Giovanni -

Apaixonado por música e tecnologia desde criança, Giovanni é músico profissinal a mais de - 15 - anos e entusiasta de tecnologia por ainda mais tempo. Após anos estudando por hobby - diversas - linguagens de programação agora se dedica em tempo integral para se tornar um - desenvolvedor. +

Açaí Tradicinal

+ Foto do Giovanni +

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, fuga omnis rem corrupti in ab?

diff --git a/Dia 42 - jQuery - Mini Site/js/index.js b/Dia 42 - jQuery - Mini Site/js/index.js index ff92742..b1a5c63 100644 --- a/Dia 42 - jQuery - Mini Site/js/index.js +++ b/Dia 42 - jQuery - Mini Site/js/index.js @@ -35,7 +35,7 @@ function removerForm(){ $("#form").fadeOut(500) // efeito 5 } -// ▲▼▲▼▲▼▲▼ Email ▲▼▲▼▲▼▲▼ // +// ▲▼▲▼▲▼▲▼ Validação Email ▲▼▲▼▲▼▲▼ // function tirarVermelho(){ document.getElementById("email").style.boxShadow = "";