Merge pull request #29 from Jovens-do-futuro/pedro-dev

feat: about page
Jovens-do-futuro · Jun 11, 2024 · e09303e · e09303e
2 parents 13eba98 + 82bb8dd
commit e09303e
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 7 deletions.
diff --git a/assets/placeholder-sobre.jpeg b/assets/placeholder-sobre.jpeg
diff --git a/assets/placeholder-sobre2.png b/assets/placeholder-sobre2.png
diff --git a/global.css b/global.css
@@ -29,6 +29,10 @@ span {
   text-decoration: none;
 }
 
+b {
+  color: var(--blue-light);
+}
+
 .a-text {
   font-size: 1em;
   color: var(--black);

diff --git a/pages/sobre/index.html b/pages/sobre/index.html
@@ -12,11 +12,55 @@
   <body>
     <header></header>
     <main>
-      <section id="s-hero">
-        <div class="grid-layout">
-
+      <section id="s-image">
+        <img src="/assets/placeholder-sobre.jpeg" alt="Sobre" />
+        <div id="text-image">
+          <h1>Descreva o que faz sua empresa ser única</h1>
+
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem ut,
+            exercitationem odio veritatis magni corrupti veniam, voluptates ex
+            accusantium ad quae animi esse culpa atque magnam repudiandae.
+            Facere, eveniet nam?
+          </p>
         </div>
       </section>
+
+      <div class="grid-layout">
+        <section id="s-about">
+          <div class="text">
+            <div id="title-about">
+              <h2 class="h2-text">O que é e o que faz?</h2>
+              <h1 class="h1-text"><b>Associação Jovens Do Futuro</b></h1>
+            </div>
+            <div id="text-about">
+              <p>
+                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+                Expedita labore dolore consequuntur quam animi voluptatum odio,
+                illo maiores molestias pariatur temporibus quod amet excepturi
+                ratione adipisci ipsam praesentium? Quo, provident! Lorem ipsum
+                dolor sit amet consectetur adipisicing elit. Nemo culpa quam
+                veritatis eius? Cupiditate libero animi ut quos molestias nihil
+                dolores aliquid a quo saepe possimus alias, facilis dolorum
+                perspiciatis.
+              </p>
+              <p>
+                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero
+                reprehenderit debitis laboriosam voluptatem! Officia atque
+                blanditiis deleniti incidunt quia amet, soluta corrupti
+                asperiores est debitis ratione accusantium quae excepturi
+                consectetur? Lorem ipsum dolor sit amet consectetur adipisicing
+                elit. Eveniet culpa alias et fugit amet recusandae perferendis
+                incidunt deserunt, autem delectus ad itaque eligendi quos ipsa
+                repudiandae tempora ut maxime? Amet.
+              </p>
+            </div>
+          </div>
+          <div id="image-about">
+            <img src="/assets/placeholder-sobre2.png" alt="Sobre" />
+          </div>
+        </section>
+      </div>
     </main>
     <footer></footer>
   </body>

diff --git a/pages/sobre/style.css b/pages/sobre/style.css
@@ -0,0 +1,48 @@
+#s-image {
+  position: relative;
+  text-align: center;
+}
+
+#s-image img {
+  width: 100%;
+  height: 600px;
+}
+
+#text-image {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#s-about {
+  padding: 50px;
+  display: flex;
+  justify-items: center;
+  align-items: center;
+  gap: 50px;
+}
+
+#title-about {
+  margin: 20px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+#text-about {
+  margin: 20px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+@media screen and (max-width: 1050px) {
+  #s-about {
+    flex-direction: column;
+  }
+
+  #s-about img {
+    width: 100%;
+  }
+}
diff --git a/style.css b/style.css
@@ -7,10 +7,6 @@ main {
   margin-top: 150px;
 }
 
-b {
-  color: var(--blue-light);
-}
-
 .content-hero {
   display: flex;
   justify-content: space-between;