Jovens-do-futuro · luizbrito6 · Jun 8, 2024 · May 24, 2024 · May 24, 2024 · May 28, 2024
diff --git a/assets/img-quem-somos.png b/assets/img-quem-somos.png
diff --git a/global.css b/global.css
@@ -9,6 +9,7 @@
 
 :root {
   --white: #fff;
+  --white-light: #f8fbfb;
   --black: #333;
   --blue: #0b5cf4;
   --blue-light: #01c2ff;
@@ -19,6 +20,13 @@
 body {
   background-color: var(--white);
   color: var(--black);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+main {
+  flex: 1;
 }
 
 button {
@@ -76,11 +84,21 @@ header {
 
 footer {
   bottom: 0;
-  position: fixed;
-  left: 0;
   width: 100%;
-  padding: 1rem;
+  padding: 0.5rem;
   text-align: center;
   background-color: var(--blue);
   color: var(--white);
 }
+
+main #s-hero {
+  max-width: 1440px;
+  height: 669px;
+}
+
+main #s-hero .grid-layout {
+  max-width: 1140px;
+  height: 395px;
+  background-color: grey;
+  margin: 137px auto;
+}
diff --git a/index.html b/index.html
@@ -15,8 +15,10 @@
     <header></header>
 
     <main>
-      <div class="home">
+      <section id="home">
         <section id="text">
+          <img src="/assets/circle-hero.png" alt="circulos" id="circle">
+
           <h1>
             Oferecendo Esperança e <br />
             Oportunidade
@@ -39,7 +41,22 @@ <h1>
         <section id="s-hero">
           <img src="/assets/img-hero.png" alt="Criança com boneco" />
         </section>
+      </section>
+
+      <div id="s-mouse">
+        <img src="/assets/icon-mouse.png" alt="mouse se mexendo" id="mouse">
       </div>
+
+      <section id="quem-somos">
+        <h1>QUEM SOMOS</h1>
+
+        <span>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, expedita cum. In odit optio voluptatibus amet
+          pariatur saepe accusamus necessitatibus aut, libero vitae! Dicta officiis perspiciatis nam voluptatem laudantium quaerat.
+        </span>
+
+        <img src="/assets/img-quem-somos.png" alt="Crianças do projeto">
+      </section>
     </main>
 
     <footer></footer>

diff --git a/pages/contato/index.html b/pages/contato/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
     <title>Contatos</title>
     <link rel="stylesheet" href="./style.css" />
     <link rel="stylesheet" href="../../global.css" />
@@ -12,7 +13,14 @@
   </head>
   <body>
     <header></header>
-
+    <main>
+      <section id="s-hero">
+        <div class="grid-layout">
+
+        </div>
+      </section>
+    </main>
     <footer></footer>
+
   </body>
 </html>
diff --git a/pages/doacoes/index.html b/pages/doacoes/index.html
@@ -6,13 +6,18 @@
     <title>Doações</title>
     <link rel="stylesheet" href="./style.css" />
     <link rel="stylesheet" href="../../global.css" />
-
     <script src="/scripts/loaders/header.js" type="module"></script>
     <script src="/scripts/loaders/footer.js" type="module"></script>
   </head>
   <body>
     <header></header>
-
+    <main>
+      <section id="s-hero">
+        <div class="grid-layout">
+
+        </div>
+      </section>
+    </main>
     <footer></footer>
   </body>
 </html>
diff --git a/pages/doacoes/style.css b/pages/doacoes/style.css
@@ -0,0 +1 @@
+
diff --git a/pages/seja-colaborador/index.html b/pages/seja-colaborador/index.html
@@ -13,13 +13,13 @@
   <body>
     <header></header>
 
-    <div class="main">
+    <main>
       <section id="s-hero">
         <div class="grid-layout">
 
         </div>
       </section>
-    </div>
+    </main>
 
     <footer></footer>
     </div>

diff --git a/pages/seja-colaborador/style.css b/pages/seja-colaborador/style.css
@@ -1,11 +1 @@
-.main #s-hero {
-  max-width: 1440px;
-  height: 669px;
-}
 
-.main #s-hero .grid-layout {
-  max-width: 1140px;
-  height: 395px;
-  background-color: grey;
-  margin: 137px auto;
-}
diff --git a/pages/servicos/CCA/index.html → pages/servicos/CEI e CCA/index.html b/pages/servicos/CCA/index.html → pages/servicos/CEI e CCA/index.html
@@ -3,16 +3,21 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Centro de Crianças e Adolescentes</title>
+    <title>Centro de Educação Infantil e Centro de Crianças e Adolescentes</title>
     <link rel="stylesheet" href="./style.css" />
     <link rel="stylesheet" href="../../../global.css" />
-
     <script src="/scripts/loaders/header.js" type="module"></script>
     <script src="/scripts/loaders/footer.js" type="module"></script>
   </head>
   <body>
     <header></header>
-
+    <main>
+      <section id="s-hero">
+        <div class="grid-layout">
+
+        </div>
+      </section>
+    </main>
     <footer></footer>
   </body>
 </html>
diff --git a/pages/servicos/CCA/style.css → pages/servicos/CEI e CCA/style.css b/pages/servicos/CCA/style.css → pages/servicos/CEI e CCA/style.css
diff --git a/pages/servicos/CEI/index.html b/pages/servicos/CEI/index.html
diff --git a/pages/servicos/CEI/style.css b/pages/servicos/CEI/style.css
diff --git a/pages/servicos/index.html b/pages/servicos/index.html
@@ -4,15 +4,22 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Serviços</title>
-    <link rel="stylesheet" href="./style.css">
+
+ <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="../../../global.css">  </head>
 
     <script src="/scripts/loaders/header.js" type="module" ></script>
     <script src="/scripts/loaders/footer.js" type="module" ></script>
   </head>
   <body>
     <header></header>
-
+    <main>
+      <section id="s-hero">
+        <div class="grid-layout">
+
+        </div>
+      </section>
+    </main>
     <footer></footer>
   </body>
 </html>
diff --git a/pages/sobre/index.html b/pages/sobre/index.html
@@ -6,13 +6,18 @@
     <title>Sobre</title>
     <link rel="stylesheet" href="./style.css" />
     <link rel="stylesheet" href="../../global.css" />
-
     <script src="/scripts/loaders/header.js" type="module"></script>
     <script src="/scripts/loaders/footer.js" type="module"></script>
   </head>
   <body>
     <header></header>
-
+    <main>
+      <section id="s-hero">
+        <div class="grid-layout">
+
+        </div>
+      </section>
+    </main>
     <footer></footer>
   </body>
 </html>
diff --git a/scripts/loaders/footer.js b/scripts/loaders/footer.js
@@ -1,7 +1,7 @@
 import loader from './index.js'
 
 function loadFooter() {
-  const url = '../../components/footer.html'
+  const url = '/components/footer.html'
 
   loader(url, function (response) {
     const footer = document.querySelector('footer')

diff --git a/scripts/loaders/header.js b/scripts/loaders/header.js
@@ -1,7 +1,7 @@
 import loader from './index.js'
 
 function loadHeader() {
-  const url = '../../components/header.html'
+  const url = '/components/header.html'
 
   loader(url, function (response) {
     const header = document.querySelector('header')

diff --git a/scripts/loaders/index.js b/scripts/loaders/index.js
@@ -1,6 +1,9 @@
 export default async (url, callback) => {
   try {
-    const response = await fetch(url);
+    const baseUrl = window.location.origin;
+    const absoluteUrl = new URL(url, baseUrl).href;
+
+    const response = await fetch(absoluteUrl);
 
     const data = await response.text();
 

diff --git a/style.css b/style.css
@@ -1,11 +1,16 @@
-.home {
+main {
+  display: flex;
+  flex-direction: column;
+}
+
+#home {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  padding-top: 3rem;
+  height: 70vh;
 }
 
-.home #text {
+#home #text {
   width: 50%;
   display: flex;
   flex-direction: column;
@@ -23,3 +28,47 @@
 #acoes {
   width: 50%;
 }
+
+#circle {
+  position: absolute;
+  left: -1rem;
+}
+
+#s-mouse {
+  text-align: center;
+  height: 30vh;
+}
+
+#mouse {
+  animation: go-up 1s infinite alternate;
+  margin: 50px;
+}
+
+@keyframes go-up {
+  from {
+    transform: translateY(20px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+#quem-somos {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  padding: 0 100px;
+  height: 100vh;
+  background-color: var(--white-light);
+
+  span {
+    margin: 20px 0;
+    width: 80%;
+  }
+
+  img,
+  span {
+    width: 80%;
+    align-self: center;
+  }
+}