<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Simple registration form</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class='container'>
<div class='button-reg'>
<div class='login'>SingUp</div>
<div class='singin'>LogIn</div>
</div>
<form name='enter'>
<input type='text' name='login' class='login-enter' placeholder='Enter yor Login' required></input>
<input type='text' name='mail' class='mail-enter' placeholder='Enter yor e-mail address' required></input>
<input type='password' name='password' class='password-enter' placeholder='Enter yor password' required></input>
<input type='password' name='rapiat-password' class='second-password' placeholder='Repiat yor password' required></input>
<input type='submit' name='submit-reg' class='submit-reg' value='Sing Up'></input>
<input type='checkbox' name='conditions' class='check-conditions' required></input>
<a href='#' class='agree'>I have read and agree to </br> the terms of registration</a>
</form>
<input type='submit' name='submit-enter' class='submit-enter' value='Log in' required></input>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
import url("https://fonts.googleapis.com/css?family=Bree+Serif");
body {
font-family: 'Bree Serif', serif;
color: #FFFFFF;
}
.container {
align-content: center;
display: flex;
margin: 140px auto;
width: 400px;
height: 500px;
background: #1A8093;
border-radius: 20px;
}
.login {
font-size: 24px;
cursor: pointer;
padding-top: 10px;
text-align: center;
display: block;
position: absolute;
margin-top: -20px;
width: 200px;
height: 70px;
background: #1A8093;
border-top-right-radius: 15px;
box-shadow: 2px black;
transition: margin 0.5s, border-top-right-radius 0.8s, border-bottom-right-radius 0.8s;
}
.singin {
font-size: 24px;
cursor: pointer;
padding-top: 10px;
text-align: center;
display: block;
position: absolute;
margin: 0 200px;
width: 200px;
height: 50px;
background: #EA534D;
border-bottom-left-radius: 15px;
transition: margin 0.5s,border-top-left-radius 0.8s, border-bottom-left-radius 0.8s;
}
.button .login {
margin: 0;
background: #EA534D;
height: 50px;
border-top-right-radius: 0;
border-bottom-right-radius: 15px;
transition: margin 0.5s, border-top-right-radius 0.8s, border-bottom-right-radius 0.8s;
}
.button .singin {
font-size: 24px;
cursor: pointer;
padding-top: 10px;
text-align: center;
display: block;
position: absolute;
margin: -20px 200px;
width: 200px;
height: 70px;
background: #1A8093;
border-top-left-radius: 15px;
transition: margin 0.5s, border-top-left-radius 0.8s, border-bottom-left-radius 0.8s;
}
.login-enter {
position: absolute;
margin: 100px 50px;
width: 300px;
height: 35px;
background: #FFFFFF;
z-index: 1;
color: #1A8093;
font-size: 20px;
text-align: center;
}
.mail-enter {
position: absolute;
margin: 160px 50px;
width: 300px;
height: 35px;
background: #FFFFFF;
z-index: 1;
color: #1A8093;
font-size: 20px;
text-align: center;
}
.password-enter {
position: absolute;
margin: 220px 50px;
width: 300px;
height: 35px;
background: #FFFFFF;
color: #1A8093;
z-index: 1;
font-size: 20px;
text-align: center;
}
.second-password {
position: absolute;
margin: 280px 50px;
width: 300px;
height: 35px;
background: #FFFFFF;
z-index: 1;
color: #1A8093;
font-size: 20px;
text-align: center;
}
input[type='text']::-webkit-input-placeholder {
text-align: center;
color: #1A8093;
font-size: 18px;
opacity: 0.5;
}
input[type='password']::-webkit-input-placeholder {
text-align: center;
color: #1A8093;
font-size: 18px;
opacity: 0.5;
}
.submit-reg {
position: absolute;
margin: 400px 50px;
width: 300px;
height: 50px;
background: #196776;
z-index: 1;
color: #FFFFFF;
font-size: 20px;
text-align: center;
border: none;
}
.submit-reg:active {
opacity: 0.5;
}
.submit-enter {
display: none;
}
.check-conditions {
position: absolute;
display: block;
margin: 340px 50px;
width: 20px;
height: 50px;
background: #196776;
z-index: 1;
}
.agree {
text-align: center;
font-weight: bold;
font-family: Arial;
position: absolute;
margin: 350px 80px;
color: #49A5B6;
font-size: 14px;
text-decoration: none;
}
.button .login-enter {
margin: 100px 50px;
}
.button .mail-enter {
margin: 160px 50px;
}
.button .password-enter {
margin: 220px 50px;
}
.button .second-password {
display: none;
}
.button .check-conditions {
display: none;
}
.button .agree {
display: none;
}
.button .submit-reg {
opacity: 0;
}
.button .submit-enter {
display: block;
position: absolute;
margin: 300px 50px;
width: 300px;
height: 50px;
background: #196776;
z-index: 1;
color: #FFFFFF;
font-size: 20px;
text-align: center;
border: none;
}
.button .submit-enter:active {
opacity: 0.5;
}
(function() {
var body = document.body;
var buttonToggle = document.getElementsByClassName('container')[0];
var buttonReg = document.getElementsByClassName('button-reg')[0];
buttonReg.addEventListener('click', function toggleClasses() {[body, buttonReg].forEach(function (el) {
el.classList.toggle('button');
});
});
})();