correçao da tela inicial para que fique centralizada #7

ES2-UFPI · Aug 6, 2024 · c927a86 · c927a86
1 parent 5bf4d8e
commit c927a86
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/Frontend/src/App.css b/Frontend/src/App.css
@@ -1,5 +1,26 @@
+/* Reset básico e estilo inicial */
+html, body, #root {
+  height: 100%;
+  margin: 0;
+}
+
+/* Estilo para o App */
 .App {
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; /* Garante que o App ocupe toda a altura da viewport */
+}
+
+.App-header {
+  background-color: #282c34;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1; /* Faz com que o header ocupe o espaço disponível */
+  font-size: calc(10px + 2vmin);
+  color: white;
 }
 
 .App-logo {
@@ -13,17 +34,6 @@
   }
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
 .App-link {
   color: #61dafb;
 }

diff --git a/Frontend/src/componentes/inicial.css b/Frontend/src/componentes/inicial.css
@@ -67,7 +67,9 @@ main {
 .centralized-section {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: center; /* Garante que o conteúdo dentro da seção fique centralizado horizontalmente */
+  text-align: center;  /* Centraliza o texto */
+  width: 100%;
 }
 
 .centralized-section h1 {
@@ -76,6 +78,7 @@ main {
   margin-bottom: 20px;
 }
 
+
 button {
   background: linear-gradient(to left bottom, #e4186a, #1f9fca);
   color: white;

diff --git a/Frontend/src/componentes/inicial.js b/Frontend/src/componentes/inicial.js
@@ -38,7 +38,8 @@ function Inicial() {
             </button>
           </div>
         </section>
-      </main>
+    </main>
+
 
       <footer>
         <p>todos os modelos são do CANVA</p>