<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<style type="text/css" media="screen">
form{
margin: 0 auto;
width: 100vh;
}
form input{
display: block;
padding: 10px 15px;
border: 2px solid #2C3333;
outline: none;
transition: 1s;
}form input:focus{
background-color:#E7B10A;
}
form div input,
form div label{
margin: 10px;
width: 100vh;
}button{
margin: 10px;
width: 75px;
height: 30px;
background-color: #EB455F;
border: none;
color: white;
}button:active{
scale: 0.95;
}button[type="reset"]{
background-color: #B4E4FF;
color: black;
}
</style>
</head>
<body>
<main>
<form>
<div class="satir">
<label>Name</label>
<input id="name"class="box" type="text"placeholder="James etc." autocomplete="off">
</div>
<div class="satir">
<label>Surname</label>
<input class="box" type="text"placeholder="Holder etc." autocomplete="off">
</div>
<div class="satir">
<label>User Name</label>
<input class="box" type="text"placeholder="Leader24 etc." autocomplete="off">
</div>
<button type="submit">Kayıt Ol</button>
<button type="reset">Temizle</button>
</form>
</main>
</body>
</html>