<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Login - Pen #7 - 2020</title>
<script src="https://kit.fontawesome.com/e2ac9cc532.js" crossorigin="anonymous"></script><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="sign-up">
<h1>
<i class="fas fa-calendar-alt"></i>
</h1>
<h2>
Plan your Day
</h2>
<form>
<fieldset>
<label><i class="fas fa-user"></i></label><input type="text" />
</fieldset>
<fieldset class="top">
<label><i class="fas fa-lock"></i></label><input type="password" />
</fieldset>
<button type="button">Enter</button>
</form>
<img src="https://images.unsplash.com/photo-1493934558415-9d19f0b2b4d2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" />
</div>
<!-- partial -->
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f1f2f6;
font-family: sans-serif;
}
#sign-up {
position: relative;
width: 1100px;
height: 500px;
overflow: hidden;
margin: 50px auto;
background: white;
box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.12);
}
#sign-up h1, #sign-up h2 {
margin: 50px 0;
width: 365.5px;
text-align: center;
font-weight: normal;
color: #ff6b81;
}
#sign-up h1 i {
height: 75px;
width: 75px;
line-height: 75px;
border: 2px solid red;
border-radius: 50%;
}
#sign-up h2 {
color: #a4b0be;
}
#sign-up form {
width: 365.5px;
}
#sign-up fieldset {
border: none;
margin: 0 50px;
padding: 10px 20px;
}
#sign-up .top {
border-top: 1px solid #a4b0be;
}
#sign-up label, #sign-up input {
display: inline-block;
height: 50px;
line-height: 50px;
border: none;
}
#sign-up label {
width: 15%;
text-align: center;
color: #ff6b81;
}
#sign-up label i {
font-size: 18px;
}
#sign-up input {
width: 85%;
outline: none;
padding-left: 20px;
color: #2f3542;
font-size: 20px;
}
#sign-up button {
display: block;
height: 40px;
border: 0;
width: 230px;
border-radius: 75px;
margin: 20px auto;
background: #ff6b81;
color: white;
outline: none;
}
#sign-up img {
position: absolute;
top: 0;
right: 0;
height: 500px;
}