<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<title>Sign Up</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="checkbox" id="show" class="show" />
<!-- Title+Button -->
<label for="show" class="title">sign up<i class="flag left"></i><i class="flag right"></i></label>
<!-- Form -->
<form action="" class="form">
<!-- First Name -->
<div class="group">
<div class="col-1">
<label for="f-name">first name</label>
</div>
<div class="col-2">
<input type="text" id="f-name" placeholder="First Name" />
</div>
</div>
<!-- Last Name -->
<div class="group">
<div class="col-1">
<label for="l-name">last name</label>
</div>
<div class="col-2">
<input type="text" id="l-name" placeholder="Last Name" />
</div>
</div>
<!-- Password -->
<div class="group">
<div class="col-1">
<label for="password">your password</label>
</div>
<div class="col-2">
<input type="password" id="password" placeholder="password" />
</div>
</div>
<!-- Email -->
<div class="group">
<div class="col-1">
<label for="email">your email</label>
</div>
<div class="col-2">
<input type="email" id="email" placeholder="example@email.com" />
</div>
</div>
<!-- Terms & Conditions -->
<div class="group-2 w-100 ml-5 pl-3">
<input type="checkbox" class="checkbox" id="terms" />
<label for="terms"><span class="toogle"></span>I declare to have read and accepted the <a href="#">terms of
service</a></label>
</div>
<!-- Notifications -->
<div class="group-2 w-100 ml-5 pl-3">
<input type="checkbox" class="checkbox" id="notifications" />
<label for="notifications"><span class="toogle"></span>Show me popular news via email</label>
</div>
<!-- Submit button -->
<input type="submit" class="submit" value="submit" />
</form>
</body>
</html>
html,
body,
h2 {
margin: 0;
padding: 0.5em;
}
body {
background: #111 url("http://i.imgur.com/i3OA2PJ.jpg") repeat 0 0;
}
.show {
display: none;
}
.title,
.form {
margin: 0 auto;
border-radius: 2px;
}
.title {
margin-bottom: 0.5em;
display: block;
background: orange;
font-family: "Nunito", sans-serif;
font-size: 22px;
padding: 1em;
text-transform: uppercase;
box-sizing: border-box;
text-align: center;
cursor: pointer;
}
.flag {
position: absolute;
top: 7px;
border-radius: 2px;
border: 35px solid;
border-top-color: orange;
border-bottom-color: orange;
}
.show ~ .title {
z-index: 2;
width: 300px;
position: relative;
top: 250px;
left: 0;
transition: width 200ms ease-out, top 200ms ease-out;
}
.show ~ .title .flag {
opacity: 0;
}
.show ~ .title .left {
left: 0;
border-right-color: orange;
border-left-color: transparent;
}
.show ~ .title .right {
right: 0;
border-right-color: transparent;
border-left-color: orange;
}
.show ~ .form {
opacity: 0;
transition: opacity 200ms linear;
}
.show:checked ~ .title {
position: relative;
top: 0;
width: 500px;
}
.show:checked ~ .title .left {
opacity: 0.7;
left: -55px;
transition: opacity 50ms linear 200ms, left 50ms linear 200ms;
}
.show:checked ~ .title .right {
opacity: 0.7;
right: -55px;
transition: opacity 50ms linear 200ms, right 50ms linear 200ms;
}
.show:checked ~ .form {
opacity: 1;
}
.form {
width: 500px;
background: #ddd;
padding: 2em 0 2em 0;
}
.group,
.group-2 {
margin: 0 10%;
width: 35%;
}
.group {
margin-bottom: 2em;
}
.group:after {
content: "";
display: block;
clear: both;
}
.col-1,
.col-2 {
float: left;
}
.col-1 {
width: 40%;
}
.col-1 label {
height: 40px;
line-height: 40px;
font-size: 18px;
text-shadow: 0.5px 0.5px 0 #fff;
font-family: "Nunito", sans-serif;
text-transform: capitalize;
width:150px;
}
.col-2 {
width: 60%;
float:right;
}
.col-2 input {
height: 40px;
font-family: "Nunito", sans-serif;
outline: none;
border: none;
border-radius: 20px;
box-sizing: border-box;
box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.3), 0.5px 0.5px 0 0 #fff;
padding: 1em;
background: rgba(80, 80, 80, 0.1);
}
input[type="submit"] {
display: block;
margin: 0 auto;
width: 30%;
}
.group-2 {
margin-bottom: 1em;
}
.group-2:after {
content: "";
display: block;
clear: both;
}
.group-2 *:not(a) {
float: left;
}
.group-2 .checkbox {
display: none;
}
.group-2 label {
font-family: "Nunito", sans-serif;
font-size: 12px;
height: 100%;
cursor: pointer;
line-height: 22px;
}
.group-2 label a {
position: relative;
text-decoration: none;
color: blue;
}
.group-2 label a:after {
position: absolute;
top: 15px;
left: 50%;
right: 50%;
content: "";
height: 1px;
background: blue;
transition: left 70ms linear, right 70ms linear;
}
.group-2 label a:hover:after {
left: 0;
right: 0;
}
.toogle {
position: relative;
width: 41px;
height: 21px;
border-radius: 10px;
margin-right: 1em;
background: #ccc;
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.5), 0.5px 0.5px 0 0 #fff;
}
.toogle:before {
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
background: #fff;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.checkbox ~ label .toogle:before {
position: absolute;
top: 3px;
left: 3px;
transition: left 150ms linear;
}
.checkbox ~ label .toogle {
background: rgba(200, 0, 0, 0.5);
}
.checkbox ~ label {
color: rgba(0, 0, 0, 0.4);
transition: color 100ms linear;
}
.checkbox:checked ~ label .toogle:before {
position: absolute;
top: 3px;
left: 22px;
}
.checkbox:checked ~ label .toogle {
background: rgba(0, 200, 0, 0.5);
}
.checkbox:checked ~ label {
color: rgba(0, 0, 0, 1);
}
.submit {
border: none;
outline: none;
position: relative;
height: 40px;
color: #fff;
font-family: "Nunito", sans-serif;
text-transform: uppercase;
border-radius: 2px;
background: rgba(0, 0, 0, 0.6);
box-shadow: 0 0 1px 0 #000;
letter-spacing: 1.5px;
font-size: 18px;
transition: background 70ms linear;
}
.submit:hover {
color: orange;
background: rgba(0, 0, 0, 1);
}
![Sign up form [Validations NOT ACHIEVED]](http://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/085267fd2b785be54d5d05937defdd27ccc633ab.jpg)
