added login option

ICEI-PUC-Minas-PPLCC-TI · Jun 14, 2024 · 0b5a736 · 0b5a736
1 parent 7c6bfa8
commit 0b5a736
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 10 deletions.
diff --git a/codigo/assets/css/home.css b/codigo/assets/css/home.css
@@ -144,21 +144,12 @@ main{
   font-size: 24px;
 }
 
-.information:hover{
-  height: 400px;
-  width: 1300px;
-  background-color:  rgba(86, 189, 160, 0.8);
-  transition: background 0.15s ease-in-out;
-  transition: height 0.15s ease-in-out;
-  transition: width 0.15s ease-in-out;
-
-}
+
 
 .information:hover {
   height: 400px;
   width: 1300px;
   background-color: rgba(86, 189, 160, 0.8);
-  transition: background 0.15s ease-in-out, height 0.15s ease-in-out, width 0.15s ease-in-out;
 }
 
 .information:hover p{

diff --git a/codigo/assets/css/login.css b/codigo/assets/css/login.css
@@ -0,0 +1,63 @@
+main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    gap: 50px;
+}
+.bebas-neue-regular {
+    font-family: "Bebas Neue", sans-serif;
+    color: #747474;
+    font-weight: 400;
+    font-style: normal;
+  }
+
+.option-title{
+    margin-top: 80px;
+    font-size: 58px
+}
+
+
+.log-container{
+    display: flex;
+
+    gap:40px;
+}
+
+.option-log {
+    display: flex;
+    justify-content: center; /* Centers content horizontally */
+    align-items: center; /* Centers content vertically */
+    text-align: center; /* Centers text within the element */
+
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    height: 300px;
+    width: 300px;
+    border-radius: 30px;
+
+    font-size: 45px;
+    background-color: rgba(153, 157, 161, 0.71);
+    transition: height 0.15s ease-in-out, width 0.15s ease-in-out, font-size 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+
+.option-log:hover {
+    height: 350px;
+    width: 350px;
+    font-size: 55px;
+    background-color: rgb(132, 132, 132);
+}
+
+
+
+.option-end{
+    font-size: 30px;
+}
+
+.option-end a{
+    color: rgb(7, 170, 7);
+}
+
+.option-end a:visited{
+    color: green;
+}
diff --git a/codigo/assets/css/style.css b/codigo/assets/css/style.css
@@ -1,4 +1,8 @@
+
+
+
 body {
+    height: 100%;
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;

diff --git a/codigo/pages/opcaoLogin.html b/codigo/pages/opcaoLogin.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../assets/css/style.css">
+    <link rel="stylesheet" href="/codigo/assets/css/login.css">
+    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Bungee+Spice&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+    <title>Document</title>
+</head>
+<body>
+
+    <header class="header"> <!-- Header da pagina com reponsividade menu hamburguer-->
+        <nav class="navbar">
+          <ul class="nav-menu">
+            <li class="nav-item">
+              <a href="#" class="nav-link">Home</a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">Perfil</a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">Consultas</a>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link">Horários</a>
+            </li>
+          </ul>
+
+          <div class="hamburger"> <!-- Menu hamburguer -->
+            <span class="bar"></span>
+            <span class="bar"></span>
+            <span class="bar"></span>
+          </div>
+          <a href="#" class="nav-logo">👤 Perfil</a> <!-- Acesso ao perfil -->
+        </nav>
+
+      </header>
+
+      <main>
+
+        <p class="bebas-neue-regular option-title">Escolha como deseja entrar</p>
+         <ul class="log-container ">
+            <li class="option-log"><p>Criar conta como paciente</p></li>
+            <li class="option-log"><p>Criar conta como psicólogo</p></li>
+         </ul>
+
+         <p class="bebas-neue-regular option-end" >Já tem conta? clique <a href="">Aqui</a></p>
+      </main>
+
+    <footer>
+        <p>Copiright© 2024</p>
+    </footer>
+</body>
+</html>