3 changed files with 140 additions and 1 deletions
Unified View
Diff Options
-
+74 -0css/login.css
-
+1 -1index.html
-
+65 -0pages/login.html
+ 74
- 0
css/login.css
View File
| @ -0,0 +1,74 @@ | |||||
| @import url("./variables.css"); | |||||
| .container-login{ | |||||
| width: 100%; | |||||
| height: 90vh; | |||||
| display: flex; | |||||
| justify-content: center; | |||||
| align-items: center; | |||||
| } | |||||
| .login{ | |||||
| width: 400px; | |||||
| box-shadow: 0px 0px 15px; | |||||
| border-radius: 5px; | |||||
| } | |||||
| .login__title{ | |||||
| width: 100%; | |||||
| background-color: var(--primary-color); | |||||
| color: var(--second-color); | |||||
| text-align: center; | |||||
| padding: 0.2em; | |||||
| border-top-right-radius: 5px; | |||||
| border-top-left-radius: 5px; | |||||
| } | |||||
| .form-control{ | |||||
| width: 100%; | |||||
| padding: 1em 0.5em; | |||||
| } | |||||
| .form__form-group{ | |||||
| width: 100%; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| gap: 0.3em; | |||||
| margin-bottom: 1em; | |||||
| } | |||||
| .form__form-group > input{ | |||||
| border: 1px solid #000; | |||||
| outline: none; | |||||
| padding: 0.4em; | |||||
| font-size: 1em; | |||||
| border-radius: 5px; | |||||
| } | |||||
| .form__form-group > label{ | |||||
| font-weight: bold; | |||||
| } | |||||
| .form-control > button{ | |||||
| width: 100%; | |||||
| font-size: 1.2em; | |||||
| padding: 0.3em 0.7em; | |||||
| font-weight: bold; | |||||
| cursor: pointer; | |||||
| border: 2px solid #000; | |||||
| border-radius: 5px; | |||||
| background: none; | |||||
| transition: 0.3s; | |||||
| } | |||||
| .form-control > button:hover{ | |||||
| background-color: #000; | |||||
| color: #FFF; | |||||
| } | |||||
| .form-control > p { | |||||
| text-align: center; | |||||
| margin: 0.7em 0.3em; | |||||
| } | |||||
+ 1
- 1
index.html
View File
+ 65
- 0
pages/login.html
View File
| @ -0,0 +1,65 @@ | |||||
| <!DOCTYPE html> | |||||
| <html lang="en"> | |||||
| <head> | |||||
| <meta charset="UTF-8"> | |||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |||||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||||
| <link rel="stylesheet" href="../css/global.css"> | |||||
| <link rel="stylesheet" href="../css/login.css"> | |||||
| <title>Document</title> | |||||
| </head> | |||||
| <body> | |||||
| <main> | |||||
| <div class="container-login"> | |||||
| <div class="login"> | |||||
| <div class="login__title"> | |||||
| <h1>LOGIN</h1> | |||||
| </div> | |||||
| <form class="form-control"> | |||||
| <div class="form__form-group"> | |||||
| <label for="username">Username:</label> | |||||
| <input type="text" name="username"> | |||||
| </div> | |||||
| <div class="form__form-group"> | |||||
| <label for="password">Password:</label> | |||||
| <input type="password" name="password"> | |||||
| </div> | |||||
| <p> <span>Não tem conta? </span> <a href="#">Cadastre-se agora!</a></p> | |||||
| <button>Logar</button> | |||||
| </form> | |||||
| </div> | |||||
| </div> | |||||
| </main> | |||||
| <footer class="footer"> | |||||
| <div class="footer__content"> | |||||
| <div class="footer__info"> | |||||
| <h3>Blog Netuno 2023 ©</h3> | |||||
| <br> | |||||
| <h4>Desenvolvido por Jailton de Araujo Santos</h4> | |||||
| </div> | |||||
| <ul class="footer__network"> | |||||
| <li><a href="#">LinkDin</a></li> | |||||
| <li><a href="#">Instagran</a></li> | |||||
| <li><a href="#">GitHub</a></li> | |||||
| <li><a href="#">Telegran</a></li> | |||||
| </ul> | |||||
| </div> | |||||
| </footer> | |||||
| </body> | |||||
| </html> | |||||