Jump to content
Fórum Script Brasil
  • 0

Question

Boa tarde pessoa, para me facilitar meu trabalho estou tentando criar um sistema para preencher automaticamente uns documentos, mais para isso quero criar uma tela de login responsivo, para todos os formatos, até ai tudo bem.

Três coisa não estou conseguindo fazer bem.

Quando estou com o telemóvel em pé fica bem, quando viro-o fica desconfigurado. Onde estou a errar? E também a imagem do user e Background não fica correctamente, terei que usar média Queries para cada formato?

deixo imagem abaixo imagens do tablet, computador e celular.

 

Índex.php

<!DOCTYPE html>
<html lang="pt-pt">
<head>
<meta charset="UTF-8">
<title>Preenchimento de Documentos</title>
<link rel="stylesheet" href="css/estilo.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
	<header>
		<div class="formulario">
			<h1>Login</br><small> versão 1.0</small></h1>
				<div class="img-user">
					<img src='imgs/img-user.png'>
				</div>
			<h2>Autenticação do Sistema</h2>
			<form>
				<div class="campo">
					<input type=text required="">                  
					<label>email</label>
				</div>
				<div class="campo">
					<input type=password required="">
					<label>Password</label>
				</div>
				<input type="checkbox" checked="checked" class="checkbox">
				<label class= "checkbox2">guardar dados</label></br></br>
	            <button>Entrar</button>
				<p id="registo">Registar</p>
	         </form>
		</div>
	</header>
</body>
</html>

Estilo.css

@charset "UTF-8";

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

body{
	width: 100%;
	height: auto;
}

header{
	height: 100vh;
	width: 100%;
	background: url('../imgs/bg.gif');
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items:center;
	user-select:none;
}

.img-user{
	width:100px;
	height:100px;
	left:0;
	right:0;
	margin:auto;
	top: 18%;
	position: absolute;
	background:#fff;
	border-radius:50%;
	display:flex;
	justify-content: center;
}

.img-user img{
	width:80%;
}

h1{
	margin-top: 50px;
	text-align:center;
	font-size:2rem;
}

h1 small{
	font-size: 1rem;
	color:gray;
}

h2{
	text-align:center;
	margin: 20px;
}

header .campo input{
	width:90%;
	padding:10px;
	font-size:17px;
	background: transparent;
	border:none;
	border-bottom: solid 1px black;
	letter-spacing:2px;
	outline:none;
	margin:20px;
}

.formulario{
	height: 550px;
	padding: 20px;
	background: rgba(255,255,255,0.5);
	border-radius:40px 10px 40px 10px;
	box-shadow: 0 20px 20px;
}

header .campo{
	position: relative;
}

header .campo label{
	position:absolute;
	top:0;
	left:0;
	padding: 10px;
	margin-left: 10px;
	font-size:16px;
	pointer-events: none;
	
}

header .campo input:focus~label,
header .campo input:valid~label{
	top:-20px;
	transition:0.5s;
	font-size:10px;
	
}

.checkbox2{
	font-size: 13px;
}

header button{
	width:100%;
	height:40px;
	border:none;
	outline:none;
	background: linear-gradient(to right, #505050, #909090);
	color: #fff;
	padding:10px 20px;
	font-size:15px;
	cursor:pointer;
	border-radius: 4px;
}

#registo{
	margin-top: 20px;
	font-weight:bold;
	text-align:center;
	cursor:pointer;
}

 

 

 

9EE337D4-11CC-480F-82CE-2DC30CC25CC8.jpeg

11DE30BA-1FD8-4BAF-B04F-492FC0A04E3F.jpeg

D9F57FD5-34EF-4BBD-9CFD-3C49F0FE95E5.jpeg

97A58542-61F6-424E-B017-FD6095F4FC7D.jpeg

0E0414E4-F606-4C8D-929F-1AB3AD0768FC.jpeg

BEA3134A-C314-42D3-A86D-2D6748B73473.jpeg

Edited by Johnheypt
Adicionei fotos
Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      148719
    • Total Posts
      644508
×
×
  • Create New...