Merge pull request #125 from LTD-cyber-security/vinicius

Alterei a introdução do site,mas falta adaptar ao mobile

src/assets/css/main.css

@@ -0,0 +1,53 @@
+/*Costumizado por Vinicius assets/img/image.jpg*/
+
+
+.abertura{
+
+
+  height: 72rem;
+  width: 100%;
+  background-image: url("../img/image.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+
+.centralizar{
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  height: 72rem;
+  position: relative;
+  top: 20px;
+}
+
+.conteudo{
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  justify-content: center;
+}
+
+.conteudo h1{
+  font-family: "Poppins";
+  font-weight: 600;
+  max-width: 16ch;
+  font-size: 56px;
+  line-height: 1.125;
+}
+
+.conteudo h1 strong{
+  color: #a5e7ff;
+
+}
+
+.conteudo p{
+  position: relative;
+  font-family: "Open Sans";
+  font-weight: 400;
+  padding-top: 10px;
+  max-width: 38ch;
+  font-size: 24px;
+
+}
+

src/assets/css/style.css

@@ -34,6 +34,11 @@ body.dark-mode {
   cursor: pointer;
 }
 
+.chk{
+  position: relative;
+  left: -42px;
+}
+
 
 
 #home .filter {

src/dark-theme/styles.css

@@ -1,5 +1,13 @@
 @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
 
+
+.chk{
+  position: relative !important;
+  left: -35px ;
+}
+
+=======
+
 * {
   margin: 0;
   padding: 0;

src/index.html

@@ -28,6 +28,9 @@
   <!-- Inclua os arquivos da biblioteca FontAwesome -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet">
 
+  <!-- Incluir Poppins e OpenSans -->
+  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&amp;family=Poppins:wght@400;600&amp;display=swap" rel="stylesheet">
+
   <!-- Google Fonts -->
   <link
     href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i"
@@ -40,7 +43,10 @@
   <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet" />
   <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet" />
   <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
+
   <link rel="stylesheet" href="carregamento/stylesCarregar.css">
+  <link rel="stylesheet" href="assets/css/main.css">
+
 
   <!-- Template Main CSS File -->
   <link href="assets/css/style.css" rel="stylesheet" />
@@ -90,7 +96,7 @@ <h1><a href="index.html">LTD Cybersecurity</a></h1>
         <i class="bi bi-list mobile-nav-toggle"></i>
       </nav><!-- .navbar -->
     </div>
-    <div>
+    <div class="chk">
       <input type="checkbox" class="checkbox" id="chk" />
       <label class="label" for="chk">
         <i class="fas fa-moon"></i>
@@ -105,7 +111,21 @@ <h1><a href="index.html">LTD Cybersecurity</a></h1>
   </header><!-- End Header -->
 
   <main id="main">
-    <img src="assets/img/image.jpg" class="img-fluid" alt="">
+  <!-- Conteudos da Introdução -->
+      <div class="abertura">
+          <div class="container sla">
+              <div class="centralizar">
+                <div class="conteudo text-white">
+                  <h1>Cuidado para não cair em golpes, <strong>meu velho.</strong> </h1>
+                  <p>Desvende os perigos da internet com nossas informações sobre golpes, ataques, hackers e saiba mais.</p>
+
+                </div>
+
+              </div>
+            </div>
+      </div>
+
+
     <!-- ======= About Section ======= -->
     <section id="inicio" class="about">
       <!-- deixar a imagem responsiva na section -->
@@ -122,22 +142,19 @@ <h2>Projeto estudantil com objetivo de conscientizar idosos a segurança</h2>
         <div class="row content">
           <div class="col-lg-6">
 
-            <h2>O que é o projeto LTD de segurança?</h2>
-            <h3>Projeto de cunho estudantil dos alunos da faculdade Estácio de Sá de Florianópolis.<br>Dirigido pelo
-              Prof. Eng. Vagner Cordeiro, em associação ao projeto LTD e NID.</h3>
+            <h2 style="max-width: 20ch;">O que é o projeto LTD de segurança?</h2>
+            <h3 style="max-width: 45ch;" class="fs-2" >É um projeto acadêmico da Faculdade Estácio de Sá de Florianópolis, sob a liderança do Professor Engenheiro Vagner Cordeiro.</h3>
           </div>
           <div class="col-lg-6 pt-4 pt-lg-0">
-            <p>
-              A intenção do projeto é conscientizar os idosos sobre a segurança durante a navegação na internet, dando a
-              eles o conhecimento sobre os golpes e ataques existentes, metodo de prevenção aos mesmos e o que deve ser
-              feito caso sofra um golpe ou ataque. Dentre os nosso objetivos, estão:
+            <p class="fs-2 py-3">
+              Desenvolvemos o site com o <span style="color: #0d4291; font-weight: 800;"> propósito de alertar </span> os idosos sobre os riscos de navegar na internet, fornecendo informações sobre os principais <span style="color: #0d4291; font-weight: 800;"> golpes e ataques </span>, além de apresentar diversos métodos de prevenção,como por exemplo: 
             </p>
-            <ul>
-              <li><i class="ri-check-double-line"></i>Garantir a veracidade das informações inseridas aqui.</li>
-              <li><i class="ri-check-double-line"></i>Repassar conhecimento de maneira compreensível e intuitiva.</li>
-              <li><i class="ri-check-double-line"></i>Gerar um repositório seguro para a pesquisa a seguranças.</li>
+            <ul style="position: relative; top: -15px;">
+              <li class="fs-3"><i class="ri-check-double-line"></i>Garantir a veracidade das informações inseridas aqui.</li>
+              <li class="fs-3"><i class="ri-check-double-line"></i>Repassar conhecimento de maneira compreensível e intuitiva.</li>
+              <li class="fs-3"><i class="ri-check-double-line"></i>Gerar um repositório seguro para a pesquisa a seguranças.</li>
             </ul>
-            <p class="fst-italic">
+            <p style="position: relative; top: -10px;" class="fst-italic">
               Junto do projeto, apresentamos aos ídosos, palestras com o objetivo de solidar o conhecimento a tudo
               apresentado.
             </p>