<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ---------->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Power Kids</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
:root {
--bg1: #020204;
--bg2: #323234;
--boxShadow: #010103;
--Shadow1: #040406;
--Shadow2: #444446;
--S1forI: #2a2a2c;
--S2forI: #020305;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--bg1), var(--bg2));
}
#container {
background: linear-gradient(135deg, var(--bg2), var(--bg1));
box-shadow: 0 0 8px 6px var(--boxShadow);
border-radius: 32px;
}
#user,
#email,
#lock {
width: 240px;
padding-left: 4px;
height: 42px;
border-radius: 16px;
background: none;
margin: 16px;
box-shadow: inset 4px 4px 8px var(--Shadow1), inset -4px -4px 8px var(--Shadow2);
color: #777;
font-size: 18px;
}
input {
border: none;
background: none;
height: 42px;
outline: none;
padding-left: 6px;
color: #777;
}
#sign_up {
font-family: sans-serif;
margin: 32px auto;
color: #4f7afe;
}
h4 {
font-size: 14px;
color: #777;
margin: 0 0 16px 0;
}
#social_icon i {
margin: 0 11px;
padding: 8px;
width: 36px;
height: 36px;
border-radius: 50%;
box-shadow: inset 3px 3px 8px var(--S1forI), inset -3px -3px 8px var(--S2forI), 1px 1px 2px var(--S2forI), -1px -1px 2px var(--S1forI);
color: #4f7af1;
transition-duration: 0.2s;
}
#social_icon i:hover {
transform: scale(1.3);
}
#social_icon i:active {
transform: scale(0.9);
}
#signUpBt {
margin: 16px;
font-size: 20px;
color: #4f7afe;
border: none;
width: 220px;
height: 38px;
background: none;
border-radius: 48px;
box-shadow: 4px 4px 8px var(--Shadow1), -4px -4px 8px var(--Shadow2);
outline: none;
}
#login:hover {
box-shadow: 5px 5px 8px var(--Shadow1), -5px -5px 8px var(--Shadow2);
}
#login:active {
box-shadow: inset 4px 4px 8px var(--Shadow1), inset -4px -4px 8px var(--Shadow2);
font-size: 16px;
border: none;
}
#foot {
margin: 16px auto;
color: #777;
font-size: 16px;
}
#sign {
color: #4f7afe;
}
#mode {
margin-bottom: 0rem;
}
#mode button {
padding: 6px;
border-radius: 6px;
background: none;
border: none;
box-shadow: 4px 4px 8px var(--Shadow1), -4px -4px 8px var(--Shadow2);
letter-spacing: 1px;
}
#mode button:hover {
transform: scale(1.1);
}
#mode button:active {
transform: scale(0.9);
}
#drk {
display: none;
color: #112;
}
#lt {
color: #eef;
}
</style>
</head>
<body>
<div id="container" align="center">
<h1 id="sign_up">Sign Up</h1>
<div id="user">
<i class="fa fa-user"></i>
<input type="text" placeholder="Username" id="_user">
</div>
<div id="email">
<i class="fa fa-envelope"></i>
<input type="email" placeholder="Email address" id="_email">
</div>
<div id="lock">
<i class="fa fa-lock"></i>
<input type="password" placeholder="Password" id="_lock">
</div>
<button id="signUpBt">Sign Up</button>
<h4>Or Sign Up with social platforms</h4>
<div id="social_icon">
<i class="fa fa-facebook"></i>
<i class="fa fa-google"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
</div>
<div id="foot">
<a>Already have an account?</a>
<a id="sign" href="#">Sign In</a>
</div>
<div id="mode">
<button id="lt" onclick="light()">light mode</button>
<button id="drk" onclick="dark()">dark mode</button>
</div>
<script>
var color = document.documentElement.style;
function light() {
color.setProperty('--bg1', '#c2c2c4');
color.setProperty('--bg2', '#e2e2e4');
color.setProperty('--boxShadow', '#a1a1a3');
color.setProperty('--Shadow1', '#848486');
color.setProperty('--Shadow2', '#fcfcfe');
color.setProperty('--S1forI', '#ececee');
color.setProperty('--S2forI', '#8a8b8e');
document.getElementById('lt').style.display = "none";
document.getElementById('drk').style.display = "block";
}
function dark() {
color.setProperty('--bg1', '#020204');
color.setProperty('--bg2', '#323234');
color.setProperty('--boxShadow', '#010103');
color.setProperty('--Shadow1', '#040406');
color.setProperty('--Shadow2', '#444446');
color.setProperty('--S1forI', '#2a2a2c');
color.setProperty('--S2forI', '#020305');
document.getElementById('lt').style.display = "block";
document.getElementById('drk').style.display = "none";
}
</script>
</div>
</body>
</html>
![Sign up form [Validations NOT ACHIEVED]](http://d2d3qesrx8xj6s.cloudfront.net/img/screenshots/085267fd2b785be54d5d05937defdd27ccc633ab.jpg)