Aşağıda ki HTML Kodlarını kopyalayın.
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sign Up</title>
<link rel="stylesheet" href="style.css">
<link rel="JavaSctipt" href="script.js">
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<!--[ Form Login and Sign Up by CODETHINK ]-->
<div class="main">
<input type="checkbox" id="chk" aria-hidden="true">
<div class="signup">
<form>
<label for="chk" aria-hidden="true">Sign up</label>
<input type="text" name="txt" placeholder="User name" required="">
<input type="email" name="email" placeholder="Email" required="">
<input type="password" name="pswd" placeholder="Password" required="">
<button>Sign up</button>
</form>
</div>
<div class="login">
<form>
<label for="chk" aria-hidden="true">Login</label>
<input type="email" name="email" placeholder="Email" required="">
<input type="password" name="pswd" placeholder="Password" required="">
<button>Login</button>
</form>
</div>
</div>
</body>
</html> Aşağıda ki CSS Kodlarını kopyalayın.
body {
margin:0;
padding:0;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
font-family:'Jost',sans-serif;
background-image:linear-gradient(to bottom,#302b62,#36387a,#394693,#3855ac,#3264c7,#3264c7,#3264c7,#3264c7,#3855ac,#394693,#36387a,#302b62);
}
.main {
width:350px;
height:500px;
background:red;
overflow:hidden;
background:url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38") no-repeat center/ cover;
border-radius:10px;
box-shadow:5px 20px 50px #000;
background:rgba( 255,255,255,0.10 );
box-shadow:0 10px 50px 0 rgb(31 38 135 / 20%);
/* CHANGE THIS TO CHANGE THE BLUR AMOUNT */
backdrop-filter:blur( 8.0px );
-webkit-backdrop-filter:blur( 8.0px );
border-radius:10px;
border:1px solid rgb(255 255 255 / 15%);
text-align:center;
}
#chk {
display:none;
}
.signup {
position:relative;
width:100%;
height:100%;
}
label {
color:#fff;
font-size:2.3em;
justify-content:center;
display:flex;
margin:60px;
font-weight:bold;
cursor:pointer;
transition:.5s ease-in-out;
}
input {
width:60%;
height:20px;
background:#e0dede;
justify-content:center;
display:flex;
margin:20px auto;
padding:10px;
border:none;
outline:none;
border-radius:5px;
}
button {
width:60%;
height:40px;
margin:10px auto;
justify-content:center;
display:block;
color:#fff;
background:#312E67;
font-size:1em;
font-weight:bold;
margin-top:20px;
outline:none;
border:none;
border-radius:5px;
transition:.2s ease-in;
cursor:pointer;
}
button:hover {
background:#005DC0;
}
.login {
height:460px;
background:#eee;
border-radius:60% / 10%;
transform:translateY(-180px);
transition:.8s ease-in-out;
}
.login label {
color:#573b8a;
transform:scale(.6);
}
#chk:checked ~ .login {
transform:translateY(-500px);
}
#chk:checked ~ .login label {
transform:scale(1);
}
#chk:checked ~ .signup label {
transform:scale(.6);
}
html,
body {
height:100%;
width:100%;
}