0

Uma das páginas de login que fiz essa semana

Guilherme Santana
Guilherme Santana

Fiz essa página de login no css e html, sem bootstrap. Única coisa que não curtir, foi a ausência de ícone dentro da input do email e password. Não sei como coloca o ícone dentro das inputs, tentei fazer um bem bolado com label mas não ficou 100%, até deu mas não pra apresentar o trabalho.

0
0

Comentários (8)

1
Pedro Dias

Pedro Dias

05/06/2021 17:58

Olá Guilherme!


Se entendi bem a questão do ícone dentro do input, eu faria da seguinte forma:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}


		body {
			padding: 50px 20px;
		}


		body, form {
			font:  16px 'Open Sans', sans-serif;
		}


		.container {
			max-width: 320px;
			margin: 0 auto;
			border:  1px solid #ccc;
			border-radius: 5px;
			padding: 25px;
		}


		input {
			width: 100%;
			border:  1px solid #ccc;
		}


		input[type='text'],
		input[type='password'] {
			padding: 5px 25px 5px 5px;
			margin-bottom: 10px;
		}


		label {
			position: relative;
		}


		label[for='user']:before,
		label[for='pass']:before {
			content: '';
			position: absolute;
			right: 5px;
			z-index: 2;
		}


		label[for='user']:before {
			content: '☻';
		}


		label[for='pass']:before {
			content: '♣';
		}


		input[type='submit'] {
			color: #fff;
			background: #ccc;
			padding: 10px;
			text-transform: uppercase;
			font-weight: 600;
		}


	</style>
</head>
<body>
	<div class="container">
		<form action="">
			<label for="user">
				<input id="user" type="text" placeholder="User">
			</label>
			<label for="pass">
				<input id="pass" type="password" placeholder="Pass">
			</label>
			<label for="login">
				<input id="login" type="submit">
			</label>
		</form>
	</div>
</body>
</html>


Abs!

1
Davi Queiroz

Davi Queiroz

05/06/2021 22:59

cria uma div, põe o input dentro, seta altura e largura flutua ao lado sendo que vai deixar um espaço para a img, põe o outline e background do input transparente, border radios na div e gg terá seu formulário com img

estou criando essa pois me inspirei em você!