<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - UI - Sign up & Login/Password</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- links -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- body -->
<div id="wrapper">
<div class="close">
<a href="#"><i class="fa fa-times" aria-hidden="true"></i></a>
</div>
<div class="header">
<h1>Sign up</h1>
<input type="text" name="email" title="Email" placeholder="Email" />
<input type="password" name="pass" title="Password" placeholder="Password" />
<input type="text" name="fname" title="First Name" placeholder="First Name" />
<input type="text" name="lname" title="Last Name" placeholder="Last Name" />
</div>
<div class="button">
<a href="#" class="signup">Sign up</a>
</div>
<div class="footer">
<h2><span class="laziness">Too lazy?</span></h2>
<div class="cbutton">
<a href="#" class="facebook">
<i class="fa fa-facebook" aria-hidden="true"></i>
Sign up with facebook
</a>
</div>
<div class="cbutton">
<a href="#" class="twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
<span>Sign up with twitter</span>
</a>
</div>
</div>
</div>
</body>
</html>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
* {
font-family: 'Open Sans', sans-serif;
font-size: 1.05em;
text-decoration: none;
outline: none;
border: none;
box-sizing: border-box;
list-style: none;
padding: 0;
margin: 0;
}
::-moz-placeholder {color:#577783;}/* Firefox 19+ */
:-moz-placeholder {color:#577783;}/* Firefox 18- */
::-webkit-input-placeholder{color:#577783;}
:-ms-input-placeholder{color:#577783;}
html,body {
height: 100%;
}
body {
background: url(https://image.ibb.co/b8GEDw/pexels_photo_103567.jpg);
background-repeat: no-repeat;
background-size: cover;
}
img {
height: auto;
width: 100%;
user-select: none;
}
.laziness {
color: #BBB8BF;
}
#wrapper {
background-color: #fff;
border-radius: 6px;
box-shadow: 0 0 15px 1px #3E4E5B;
max-width: 420px;
margin: 30px auto;
padding: 12px 6px;
}
.close {
padding: 3px 22px;
text-align: right;
}
.close .fa {
color: #75A4A6;
transition: 100ms;
}
.close .fa:hover {
color: #3E4E5B;
transition: 300ms;
}
.header {
text-align: left;
padding: 18px 26px;
}
.header h1 {
font-weight: bold;
color: #3E4E5B;
margin: -20px 0 14px 0;
}
.header input {
font-size: 1em;
color: #3E4E5B;
border-bottom: 1px solid #75A4A6;
margin: 7px 0;
width: 100%;
}
.header input:focus {
color: #3E4E5B;
border-bottom: 1px solid #577783;
}
.button {
font-size: 0.9em;
margin: 4px 30px 24px 0;
text-align: right;
}
.signup {
color: #fff;
background-color: #3E4E5B;
border-radius: 4px;
padding: 4px 28px;
}
.signup:hover {
background-color: #577783;
transition: 300ms;
}
.footer {
text-align: center;
}
.cbutton {
font-size: 0.9em;
margin: 22px 0;
}
.cbutton .fa-facebook{
margin-right: 18px;
}
.cbutton .fa-twitter{
margin-left: 9px;
}
.facebook {
color: #fff;
background-color: #2980b9;
border-radius: 4px;
padding: 4px 16px;
}
.facebook:hover {
background-color: #2c8bc9;
transition: 300ms;
}
.twitter {
color: #fff;
background-color: #00acee;
border-radius: 4px;
padding: 4px 30px 4px 4px;
}
.twitter span {
margin-left: 16px;
}
.twitter:hover {
background-color: #00b4f9;
transition: 300ms;
}