feat: creating the about section.

Assets/CSS/About.css

@@ -0,0 +1,103 @@
+/* Styles: */
+
+#about {
+
+    height: auto;
+    width: 100%;
+    min-height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 25px;
+    background-color: transparent;
+    padding: 80px 15px 15px 15px;
+
+}
+
+#about #about-text {
+
+    max-width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: 25px;
+
+}
+
+#about #about-text h2, #about #about-text p {
+
+    max-width: 100%;
+    text-align: left;
+
+}
+
+#about #about-text h2 {
+
+    font-size: 30px;
+    font-weight: bold;
+    color: var(--contrast-color);
+
+}
+
+#about #about-text p {
+
+    width: 600px;
+    font-size: 22px;
+    line-height: 35px;
+    color: var(--neutral-color);
+
+}
+
+#about figure {
+
+    min-height: 450px;
+    min-width: 450px;
+    max-height: 450px;
+    max-width: 450px;
+    overflow: hidden;
+
+}
+
+#about figure img {
+
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+
+}
+
+/* Responsiveness: */
+
+@media (max-width: 1180px) {
+
+    #about {
+
+        flex-direction: column;
+
+    }
+
+    #about #about-text {
+
+        max-width: 100%;
+        align-items: center;
+
+    }
+
+    #about #about-text h2, #about #about-text p {
+
+        text-align: center;
+
+    }
+
+    #about figure {
+
+        min-height: 300px;
+        min-width: 300px;
+        max-height: 300px;
+        max-width: 300px;
+
+    }
+
+}

Assets/CSS/Home.css

@@ -81,8 +81,15 @@
 
 @media (max-width: 1180px) {
 
+    #home {
+
+        flex-direction: column-reverse;
+
+    }
+
     #home #home-text {
 
+        max-width: 100%;
         align-items: center;
 
     }
@@ -102,20 +109,4 @@
 
     }
 
-}
-
-@media (max-width: 767px) {
-
-    #home {
-
-        flex-direction: column-reverse;
-
-    }
-
-    #home #home-text {
-
-        max-width: 100%;
-
-    }
-
 }

Assets/CSS/Index.css

@@ -2,4 +2,15 @@
 
 @import url("./Global.css");
 
-@import url("./Home.css");
+@import url("./Home.css");
+
+@import url("./About.css");
+
+/* Styles: */
+
+.emphasis {
+
+    color: var(--main-color);
+    font-weight: bold;
+
+}

Assets/CSS/Rooms.css

@@ -42,12 +42,14 @@
     text-decoration: none;
     padding: 15px;
     cursor: pointer;
+    overflow: hidden;
 
 }
 
 #rooms .room h2 {
 
-    font-size: 18px;
+    max-width: 100%;
+    font-size: 20px;
     font-weight: bold;
     color: var(--neutral-color);
     text-align: center;

Assets/Fontes.txt

@@ -0,0 +1,7 @@
+Ícone - Navegador: https://www.flaticon.com/free-icons/school-bag
+
+Ícones - Web: https://boxicons.com
+
+Imagem - Breakpoints: https://www.instagram.com/p/C0Sa1U2AHTi/?igsh=MWQ2NXZ1bnl2M2N6Yg==
+
+Imagens - SVG: https://storyset.com

Assets/JS/Rooms.js

@@ -2,10 +2,9 @@
 
 const rooms = [
 
-    {name: "Laboratório 04"},
-    {name: "Laboratório 09"},
-    {name: "Laboratório 02"},
-    {name: "Laboratório 06"}
+    {name: "Auditório 01"}, {name: "Auditório 02"}, {name: "Auditório 03"},
+    {name: "Laboratório 01"}, {name: "Laboratório 02"}, {name: "Laboratório 03"},
+    {name: "Laboratório 04"}, {name: "Laboratório 05"}, {name: "Laboratório 06"}
 
 ];
 

Index.html

@@ -34,15 +34,43 @@ <h2> Bem-vindo(a) ao </h2>
 
                         <h1> Agenda Fatec </h1>
 
-                        <p> Gerenciar e agendar as salas de aula, da Fatec Jahu, agora ficou mais fácil. Selecione a sala desejada, 
-                            defina a data e horário (Início e término.) de utilização, faça a solicitação e aguarde pela resposta. </p>
+                        <p>
+
+                            Gerenciar e agendar as salas de aula, da <span class="emphasis">Fatec Jahu</span>, agora ficou mais fácil. Selecione 
+                            a sala desejada, defina a data e horário (Início e término.) de utilização, faça a solicitação e aguarde pela resposta.
+
+                        </p>
 
                     </div>
 
                     <figure> <img src="./Assets/Images/Storyset/Home.svg" alt="Calendário"> </figure>
 
                 </section>
 
+                <section id="about">
+
+                    <figure> <img src="./Assets/Images/Storyset/About.svg" alt="Estudo"> </figure>
+
+                    <div id="about-text">
+
+                        <h2> Sobre o Projeto </h2>
+
+                        <p>
+
+                            A ideia por trás do <span class="emphasis">Agenda Fatec</span>, surgiu a partir de um problema enfrentado pela Fatec 
+                            Jahu, onde, para se requisitar uma sala, é necessário que isso ocorra de forma cara a cara. Outro ponto a se destacar, 
+                            é que os horários dos agendamentos são salvos em folhas de papel, o que gera um custo de material que poderia ser 
+                            descartado, caso o processo fosse feito digitalmente.
+                            <br><br>
+                            A proposta do <span class="emphasis">Agenda Fatec</span> é proporcionar um melhor gerenciamento e agendamento das 
+                            salas da instituição de ensino, garantindo um maior controle e praticidade à Fatec Jahu.
+
+                        </p>
+
+                    </div>
+
+                </section>
+
             </main>
 
         </div>