Eu queria que o front end do meu site ficasse igual a tela de login do Google como faço?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Eu queria que o front end do meu site ficasse igual a tela de login do Google como faço?
<!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="style.css">
<link rel="icon" href="ponto-de-interrogacao.png">
<title>registro de ponto</title>
</head>
<body>
<main>
<img src="ponto-de-interrogacao.png">
</main>
</body>
</html>
main {
border: solid;
padding: 30px;
}
img {
width: 40px;
margin: 139px 624px;
}
Olá Geovane.
Tudo bem ?
Vou postar aqui um teste que eu fiz com base no seu código:
<!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="style.css">
<link rel="icon" href="ponto-de-interrogacao.png">
<title>registro de ponto</title>
<style>
main {
border: solid;
padding: 30px;
}
div{
margin: 139px 50%;
}
img {
width: 40px;
}
</style>
</head>
<body>
<main>
<div>
<img src="ponto-de-interrogacao.png">
</div>
</main>
</body>
</html>Espero ter conseguido ajudar em algo.
na verdade o que você fez deu certo aqui tambêm, mais o que eu queria é centralizar a borda no centro do main!
Oi Geovane.
Desculpa não consegui entender, mas seria isso aqui:
<!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="style.css">
<link rel="icon" href="ponto-de-interrogacao.png">
<title>registro de ponto</title>
<style>
main {
border: solid;
padding: 30px;
}
div{
margin: 139px 50%;
}
img {
width: 40px;
}
</style>
</head>
<body>
<div>
<main>
<img src="ponto-de-interrogacao.png">
</main>
</div>
</body>
</html>não você conhece a tela de login do google? É ela que eu quero fazer!
Oi Geovane!
Veja se é isso que você esta querendo:
<!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">
<title>Tela de login</title>
<style>
body {
padding: 0;
margin: 0;
}
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
img {
width: 400px;
height: 150px;
}
</style>
</head>
<body>
<main>
<img src="https://callstack.github.io/react-native-paper/screenshots/searchbar.png">
</main>
</body>
</html>na verdade seria isso! https://drive.google.com/file/d/11OtUSh_mSLkGTkv_a9nklZ-woByMki9x/view?usp=sharing
Seria assim?
<!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">
<title>Tela de login</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
color: #444;
}
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.login {
width: 260px;
padding: 30px;
background: #fff;
border-radius: 5px;
box-shadow: 0 0 50px #111;
}
h1 {
margin: 40px 0;
width: 100%;
text-align: center;
}
.bg--gradient{
background: rgb(2,0,36);
background: linear-gradient(130deg, rgba(2,0,36,1) 0%, rgba(121,9,111,1) 0%, rgba(31,156,182,1) 100%);
}
label {
width: 100%;
display: inline-block;
font-size: 14px;
}
input {
border: 1px solid #999;
border-radius: 4px;
padding: 5px;
width: 100%;
width: -webkit-fill-available;
width: -moz-available;
}
.campo {
margin: 10px 0;
}
button {
width: 100%;
padding: 15px;
border: none;
border-radius: 5px;
color: #fff;
font-size: 18px;
font-weight: bold;
margin-top: 30px;
}
a{
font-size: 12px;
color: #777;
display: inline-block;
width: 100%;
text-align: center;
padding: 5px 0;
}
</style>
</head>
<body class="bg--gradient">
<main>
<div class="login">
<h1>Login</h1>
<div class="campo">
<label for="email">E-mail</label>
<input type="text" id="email">
</div>
<div class="campo">
<label for="senha">Senha</label>
<input type="password" id="senha">
</div>
<button class="bg--gradient">Login</button>
<p><a href="#">Esqueci minha senha</a></p>
</div>
</main>
</body>
</html>Ai você precisa formatar de acordo com o que você quer.
o que eu quero é a borda e o icone ficar no centro do main não quero nem input nem nada só isso!
Olá Geovane.
Baseado no que você está tentando explicar e no que a Gisele fez, fiz este exemplo aqui no Jsfiddle pra ver se é compatível com aquilo que você está buscando, segue link: https://jsfiddle.net/raphaelwilker/acknjz91/3/
é isso mesmo que vocês fizeram, só que extremamente mais simples, seria a borda desse geito mesmo com meu ícone dentro centralizado!
eu acho que vai economizar umas 20 linhas do css!