Desafio: Tela de Login

Mobile first
FThiagoB · Aug 22, 2024 · 9e8dd58 · 9e8dd58
1 parent dd1c312
commit 9e8dd58
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 0 deletions.
diff --git a/desafios/15/css/media_queries.css b/desafios/15/css/media_queries.css
@@ -0,0 +1,2 @@
+@charset "UTF-8";
+
diff --git a/desafios/15/css/style.css b/desafios/15/css/style.css
@@ -0,0 +1,132 @@
+@charset "UTF-8";
+
+/*#5F2C82*/
+
+*{
+    margin: 0px;
+    padding: 0px;
+}
+
+html, body{
+    background-color: #5F2C82;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body{
+    width: 100vw;
+    height: 100vh;
+}
+
+main{
+    background-color: white;
+    position: absolute;
+
+    width: 250px;
+    height: 520px;
+
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    border-radius: 20px;
+}
+
+section.imagem{
+    background-color: #a359d4;
+    background-image: url("./../imagens/metal.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: bottom center;
+
+    width: 100%;
+    height: 200px;
+
+    border-radius: 20px 20px 0px 0px;
+}
+
+section.form{
+    background-color: white;
+
+    width: 100%;
+    height: 320px;
+
+    text-align: center;
+    border-radius: 0px 0px 25px 25px;
+}
+
+section.form h1{
+    padding: 15px;
+}
+
+section.form p{
+    text-align: justify;
+    padding: 0 10px;
+    font-size: 13px;
+}
+
+form .campo{
+    background-color: #5F2C82;
+    margin: 5px 5px;
+    border-radius: 10px;
+    padding: 1px;
+}
+
+form .campo .icon{
+    color: white;
+    font-size: 30px;
+    vertical-align: middle;
+    margin: auto auto auto 9px;
+}
+
+form .campo .input{
+    font-size: 15px;
+    background-color: #94CFCD;
+    width: 75%;
+    border-radius: 10px;
+    vertical-align: middle;
+    padding: 10px 6px;
+    margin: 0px;
+}
+
+form .campo .input:focus{
+    background-color: white;
+}
+
+form #submit{
+    color: white;
+    background-color: #53AAA7;
+    border: none;
+    padding: 10px;
+    width: 96%;
+    border-radius: 10px;
+    font-size: 15px;
+
+    margin-bottom: 5px;
+}
+
+form #submit:hover{
+    background-color: #306361;
+}
+
+form #forget{
+    background-color: white;
+    border: 1px solid #53AAA7;
+    padding: 10px;
+    width: 96%;
+    border-radius: 10px;
+    font-size: 15px;
+}
+
+form #forget a{
+    color: #397875;
+    text-decoration: none;
+}
+
+form #forget span{
+    vertical-align: middle;
+    font-size: 17px;
+}
+
+form #forget:hover{
+    background-color: #7cd0cb;
+}
diff --git a/desafios/15/imagens/metal.jpg b/desafios/15/imagens/metal.jpg
diff --git a/desafios/15/index.html b/desafios/15/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0" />
+
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/media_queries.css">
+</head>
+<body>
+    <main>
+        <section class="imagem"></section>
+        <section class="form">
+            <h1>Login</h1>
+            <p>
+                Seja bem-vindo(a) novamente. Faça login para acessar sua conta e poder fazer as configurações no seu ambiente.
+            </p>
+
+            <form action="./cadastro.php" method="post">
+                <div class="campo">
+                    <label for="iemail"><span class="material-symbols-outlined icon" id="icon-person">person</span></label>
+                    <input type="email" name="iemail" id="iemail" class="input" placeholder="Seu e-mail" required> 
+                </div>
+
+                <div class="campo">
+                    <label for="isenha"><span class="material-symbols-outlined icon">vpn_key</span></label>
+                    <input type="password" name="isenha" id="isenha" class="input" placeholder="Sua senha" required minlength="8"> 
+                </div>
+
+                <input type="submit" value="Entrar" id="submit">
+
+                <button id="forget"><a href="#" >Esqueci a senha <span class="material-symbols-outlined">mail</span></a></button>
+            </form>
+        </section>
+    </main>
+</body>
+</html>