* {
box-sizing: border-box;
}
body,
input {
background-color: #ebf4f4;
}
form {
text-align: center;
width: 317px;
height: 370px;
background-color: #fbfdfd;
border: 1px solid rgba(147, 184, 189, 0.8);
margin-left: auto;
margin-right: auto;
}
.btn-register {
background-color: #01b3b3;
text-align: center;
width: 260px;
height: 45px;
color: white;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
border: 1px solid rgba(147, 184, 189, 0.8);
border-radius: 5px;
text-transform: uppercase;
}
input {
width: 261px;
height: 33px;
border: 1px solid rgba(147, 184, 189, 0.8);
}
label {
display: block;
text-align: left;
padding-left: 30px;
font-weight: bold;
font-size: 12px;
font-family: Arial, sans-serif serif;
}
.info {
display: inline-block;
width: 150px;
height: 25px;
background-color: #01b3b3;
color: white;
font-size: 12px;
text-transform: uppercase;
}
.confirm-form {
margin-bottom: 35px;
margin-top: 15px;
}
.choose-form {
margin-bottom: 20px;
margin-top: 16px;
}
.email-form {
margin-bottom: 20px;
margin-top: 15px;
font-style: italic;
padding: 12px;
}
span {
color: #01b3b3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Моя форма</title>
</head>
<body>
<form>
<div class="info">create an account</div>
<label>Email: <span>*</span></label>
<input
class="email-form"
type="text"
name="email"
placeholder="[email protected]"
/>
<label>Choose Password: <span>*</span></label>
<input class="choose-form" type="text" name="choose" />
<label>Confirm Password <span>*</span></label>
<input class="confirm-form" type="text" name="confirm" />
<button class="btn-register">Register now!</button>
</form>
</body>
</html>
Делаю форму регистрации по макету psd. Стараюсь сделать в pixel perfect. Не понимаю как сделать так, чтобы верхний блок выходил за пределы формы. И вообще хотел бы узнать мнение, что можно исправить.