Skip to content

Commit

Permalink
página de login
Browse files Browse the repository at this point in the history
  • Loading branch information
@suzanadossantos
suzanadossantos committed Oct 5, 2022
1 parent cad965b commit 153a1b1
Show file tree
Hide file tree
Showing 2 changed files with 223 additions and 23 deletions.
180 changes: 180 additions & 0 deletions assets/css/login.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');

:root{
--red: #E22327;
--black: #000000;
--gray: #DBD3D3;
--white: #FFFFFF;

--title:'Noto Sans', sans-serif;
--subtitle-contect: Arial, Helvetica, sans-serif;
}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
background-color: var(--black);
color: var(--white);
font-family: var(--subtitle-contect);
}

main{
display: block;
padding: 30px;
}

section.imagem{
display: none;
}

section.login{
display: flex;
align-items: center;
justify-self: center;
flex-direction: column;
}

section.login img#controle1{
position: relative;
right: 40vw;
}

section.login img#controle2{
position: relative;
top: 3vw;
right: -40vw;
}

div.login-info{
background-color: var(--white);
color: var(--black);
border-radius: 20px;
padding: 20px;
text-align: center;
}

div.login-info h1{
font-family: var(--title);
padding: 5px;
padding-bottom: 15px;
}

div.login-info i{
cursor: pointer;
padding: 10px;
background-color: var(--black);
border-radius: 20px;
}

div.login-info i.fa-facebook{
color: blue;
margin-right: 5px;
}

div.login-info i.fa-google{
margin-left: 5px;
color: red;
}

form{
padding: 5px;
padding-bottom: 10px;
}

form button{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
gap: 10px;
padding: 5px;
margin: 15px;
background: transparent;
border: 2px solid var(--red);
border-radius: 5px;
}

form button input{
border: none;
padding: 5px;
width: 210px;
}

form p{
text-align: right;
padding-right: 15px;
margin-bottom: 15px;
font-size: 0.9em;
}

form p:hover{
text-decoration: underline;
}

form #login{
cursor: pointer;
font-family: var(--title);
font-weight: bold;
border: 2.4px solid var(--black);
border-radius: 5px;
padding: 3px 20px;
background: transparent;
}

form #login:hover{
background-color: var(--gray);
}

div.login-info p{
cursor: pointer;
font-size: 0.9em;
}

/* MEDIA QUERY */

/*--- Para todas as telas > 650px ---*/
@media screen and (min-width: 650px){
body{
background-color: var(--red);
}

section.login img#controle1{
animation: controle1 1s infinite alternate;
}

section.login img#controle2{
animation: controle2 1s infinite alternate;
}
}

@media screen and (min-width: 650px) and (max-width: 992px){

}

@media screen and (min-width: 1200px){

}

@keyframes controle1{
from{
transform: rotate(20deg);
}
to{
transform: rotate(0deg);
}
}

@keyframes controle2{
from{
transform: rotate(-20deg);
}
to{
transform: rotate(0deg);
}
}
66 changes: 43 additions & 23 deletions login.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,64 @@
<!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">
<!-- Links CSS -->
<link rel="stylesheet" href="assets/css/login.css" media="all">
<!-- Links Icons -->
<script src="https://kit.fontawesome.com/5ae26a9ab2.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"/>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<title>Login - GameStore</title>
</head>

<body>
<section class="imagem">
<img src="assets/imagens/login/login-image.png" alt="jogo">
</section>
<main>
<section class="imagem">
<img src="assets/imagens/login/login-image.png" alt="jogo">
</section>

<section class="login">
<img src="assets/imagens/logo1.png" alt="logo">
<section class="login">
<img src="assets/imagens/logo1.png" alt="logo" id="logo">

<img src="assets/imagens/login/controller1.png" alt="icone controle">
<img src="assets/imagens/login/controller1.png" alt="icone controle" id="controle1">

<img src="assets/imagens/login/controller2.png" alt="icone controle">
<div class="login-info">
<h1>Login</h1>

<div class="login-info">
<h1>Login</h1>
<div class="icones">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-google"></i>
</div>

<div class="icones">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-google"></i>
</div>
<form action="#" method="post" autocomplete="on">
<button>
<span class="material-symbols-sharp">mail</span>

<div class="input">
<input type="email" name="" id="">
<input type="password" name="" id="">
<p>Forgot your password?</p>
</div>
<input type="email" name="email" id="iemail" placeholder="Email" minlength="15" required>
</button>

<button>
<span class="material-symbols-sharp">lock</span>

<button>Login</button>
<input type="password" name="senha" id="isenha" placeholder="Password">
</button>

<p><u>or create account</u></p>
</div>
</section>
<p>Forgot your password?</p>

<a href="index.html" rel="prev">
<input type="submit" value="Login" id="login">
</a>
</form>

<p style="font-weight: bold; margin-top: 5px"><u>or create account</u></p>
</div>

<img src="assets/imagens/login/controller2.png" alt="icone controle" id="controle2">
</section>
</main>
</body>

</html>

0 comments on commit 153a1b1

Please sign in to comment.