Finalizado Mini Site jQuery

gmarcon83 · Mar 27, 2021 · 6694de0 · 6694de0
1 parent d4b0d36
commit 6694de0
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 108 deletions.
diff --git 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
@@ -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
@@ -94,31 +94,20 @@ <h1>Absolute Açaí.</h1>
         <div class="escondido-inicio" id="acai-fundo">
             <div id="acai">
                 <div class="acai-cartao" id="acai1">
-                    <h4>Gabriela Calhau</h4>
-                    <img src="img/img-gabi.jpg" alt="Foto da Gabi">
-                    <p>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.</p>
+                    <h4>Açaí com Banana</h4>
+                    <img src="images/acai-banana.png" alt="Foto da Gabi">
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, fuga omnis rem corrupti in ab?
+                    </p>
                 </div>
                 <div class="acai-cartao" id="acai2">
-                    <h4>Mahonri Maia</h4>
-                    <img src="img/img-maho.jpg" alt="Foto do Mahonri">
-                    <p>"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.</p>
+                    <h4>Açaí com Morango</h4>
+                    <img src="images/acai-morango.png" alt="Foto do Mahonri">
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, fuga omnis rem corrupti in ab?
                 </div>
                 <div class="acai-cartao" id="acai3">
-                    <h4>Giovanni Marcon</h4>
-                    <img src="img/img-gio.jpg" alt="Foto do Giovanni">
-                    <p>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.
+                    <h4>Açaí Tradicinal</h4>
+                    <img src="images/acai-tradicional.jpg" alt="Foto do Giovanni">
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, fuga omnis rem corrupti in ab?
                     </p>
                 </div>
 

diff --git 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 = "";