Blogger HTML ve CSS ile Yazılmış Kayıt Ol Giriş Yap Eklentisi

Aşağıda ki HTML Kodlarını kopyalayın.

123456789101112131415161718192021222324252627282930313233343536
 <!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.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
 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%;
}