<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Registration Screen Daily UI #1 (From Google Search) </title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="card">
<div class="content">
<h3>NEW ACCOUNT</h3>
<form>
<div class="form-group">
<label>FULL NAME</label>
<input type="text" value="Maximilian Agustin"></input>
</div>
<div class="form-group">
<label>EMAIL ADDRESS</label>
<input type="text" value="
[email protected]"></input>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" value="Maximilian"></input>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" value="911238123"></input>
</div>
<a> PROCEED <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</form>
</div>
</div>
<!-- partial -->
</body>
</html>
body {
background-color: #F7D4B8;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
align-content: center;
height: 100vh;
}
.card {
display: -webkit-box;
display: flex;
height: 450px;
width: 190px;
background-color: #232E42;
padding: 40px 60px;
color: #858993;
font-family: "Roboto", sans-serif;
letter-spacing: 2px;
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.11), 0 15px 20px 0 rgba(0, 0, 0, 0.11), 0 20px 30px 0 rgba(0, 0, 0, 0.11), 0 25px 40px 0 rgba(0, 0, 0, 0.21);
}
.card .content {
width: 100%;
}
.card h3 {
font-weight: 300;
font-size: 1em;
margin-bottom: 50px;
}
.card .form-group {
margin-bottom: 20px;
width: 100%;
}
.card label {
text-transform: uppercase;
color: #F7D4B8;
font-size: .5em;
font-weight: 400;
letter-spacing: 1px;
}
.card input {
background: transparent;
border: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.11);
padding: 10px 0;
color: #858993;
font-weight: 300;
letter-spacing: 1.2px;
font-size: .8em;
width: 100%;
display: block;
}
.card input[type=password] {
letter-spacing: 5px;
}
.card input:focus {
-webkit-transition: .4s all ease;
transition: .4s all ease;
outline: none;
border-bottom: 1px solid #F7D4B8;
color: #05CFDE;
}
.card a {
margin-top: 10px;
float: right;
color: #05CFDE;
font-size: .7em;
cursor: pointer;
}
