feat: página login

ICEI-PUC-Minas-PMV-SInt · Jun 3, 2024 · da9b134 · da9b134
1 parent 872ec41
commit da9b134
Show file tree

Hide file tree

Showing 7 changed files with 159 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
           <nav class="navBar">
             <a href="./index.html">Início</a>
             <a href="#">Anunciar</a>
-            <a href="#">Minha Conta</a>
+            <a href="./src/pages/login.html">Minha Conta</a>
           </nav>
         </div>
       </header>

diff --git a/src/pages/login.html b/src/pages/login.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="../styles/index.css" />
+    <title>MyRep</title>
+  </head>
+  <body>
+    <div class="mainBox">
+      <header class="header">
+        <div class="container headerBox">
+          <a href="../../index.html"
+            ><span class="my">My</span><span class="rep">Rep</span></a
+          >
+          <div class="searchBox">
+            <input
+              type="text"
+              class="input"
+              placeholder="Busque sua república aqui..."
+            />
+            <img
+              src="../assets/img/icons/search.png"
+              alt="lupa"
+              class="searchIcon"
+            />
+          </div>
+          <nav class="navBar">
+            <a href="../../index.html">Início</a>
+            <a href="#">Anunciar</a>
+            <a href="#">Minha Conta</a>
+          </nav>
+        </div>
+      </header>
+      <main class="mainBox center">
+        <div class="container mediumBox">
+          <div class="loginBox">
+            <h1 class="title1 space">Login</h1>
+            <form class="mediumBox center">
+              <div class="inputBox">
+                <label for="email" class="label">Email</label>
+                <input
+                  type="email"
+                  id="email"
+                  class="input"
+                  placeholder="Digite seu e-mail"
+                  required
+                />
+              </div>
+              <div class="inputBox">
+                <label for="password" class="label">Senha</label>
+                <input
+                  type="password"
+                  id="password"
+                  class="input"
+                  placeholder="Digite sua senha"
+                  required
+                />
+              </div>
+              <button class="buttonSolid" type="submit">Entrar</button>
+              <a class="textForm">Ainda não possui uma conta?</a>
+              <a class="textForm">Faça o cadastro.</a>
+            </form>
+          </div>
+        </div>
+      </main>
+      <footer class="footer">
+        <div class="container footerContainer">
+          <div class="footerInfo">
+            <section class="footerLogo">
+              <div><span class="my">My</span><span class="rep">Rep</span></div>
+              <p>República de verdade e com pessoas que combinam com você!</p>
+            </section>
+            <section class="footerSection">
+              <h6 class="text1">Novo usuário?</h6>
+              <a href="">Criar conta</a>
+              <a href="">Divulgar uma Rep</a>
+            </section>
+            <section class="footerSection">
+              <h6 class="text1">Saiba mais</h6>
+              <a href="">Sobre nós</a>
+              <a href="">Privacidade</a>
+              <a href="">Termos e condições</a>
+            </section>
+            <section class="footerSection">
+              <h6 class="text1">Contatos</h6>
+              <a href="mailto:[email protected]?">[email protected]</a>
+              <p>(31) 99999-0000</p>
+              <p>Belo Horizonte, Minas Gerais</p>
+            </section>
+          </div>
+          <p class="footerCopyright">
+            MyRep 2024 - Todos os direitos reservados
+          </p>
+        </div>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/src/styles/forms.css b/src/styles/forms.css
@@ -0,0 +1,42 @@
+.inputBox {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  color: #2e2727;
+}
+
+.label {
+  font-size: 16px;
+  font-weight: 500;
+}
+
+.input {
+  width: 400px;
+  height: 45px;
+  padding: 14px;
+  background-color: #f4f4f4;
+  border-radius: 8px;
+  font-family: "Poppins", sans-serif;
+  outline: none;
+}
+
+.input:focus,
+.input:active {
+  border: 1px solid #0094ff;
+}
+
+.loginBox {
+  width: 100%;
+  height: 50vh;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+}
+
+.textForm {
+  font-size: 14px;
+  color: #2e2727;
+  text-align: center;
+}
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -21,3 +21,14 @@ body {
   flex-direction: column;
   gap: 50px;
 }
+
+.mediumBox {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+
+  &.center {
+    justify-content: center;
+    align-items: center;
+  }
+}
diff --git a/src/styles/header.css b/src/styles/header.css
@@ -36,21 +36,6 @@
   right: 9px;
 }
 
-.input {
-  width: 400px;
-  height: 45px;
-  padding: 14px;
-  background-color: #f4f4f4;
-  border-radius: 8px;
-  font-family: "Poppins", sans-serif;
-  outline: none;
-}
-
-.input:focus,
-.input:active {
-  border: 1px solid #0094ff;
-}
-
 .navBar {
   display: flex;
   gap: 40px;

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -8,3 +8,5 @@
 @import url("./sectionTestimonies.css");
 @import url("./footer.css");
 @import url("./repPage.css");
+@import url("./forms.css");
+
diff --git a/src/styles/typography.css b/src/styles/typography.css
@@ -2,6 +2,10 @@
   color: #152c5b;
   font-weight: 700;
   font-size: 42px;
+
+  &.space {
+    padding-bottom: 50px;
+  }
 }
 
 .title2 {