+
+
+
+
+
+
+
- LOGIN
+ LOGIN/SIGNUP
diff --git a/login.html b/login.html
index 3f32d5d..0a6efb8 100644
--- a/login.html
+++ b/login.html
@@ -1,27 +1,50 @@
-
-
-
-
-
- Login Form Design
-
-
-
-
- 
- Slide Navbar
+
+
+
+
+
- Login Here
- + + +
+ 
-
-
\ No newline at end of file
+
+
+
+
diff --git a/login_style.css b/login_style.css
index aaf8134..97560b8 100644
--- a/login_style.css
+++ b/login_style.css
@@ -1,89 +1,102 @@
-body{
- margin: 0;
- padding: 0;
- background: url(img/music.jpg);
- background-size: cover;
- background-position: centre;
- font-family: sans-serif;
+body {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ font-family: "Jost", sans-serif;
+ background: rgb(230, 226, 173);
}
-
-.loginbox{
- width: 320px;
- height: 420px;
- background: rgba(0, 0, 0, 0.486);
- color: #fff;
- top: 50%;
- left: 50%;
- position: absolute;
- transform: translate(-50%,-50%);
- box-sizing: border-box;
- padding: 70px 30px;
+.container {
+ background: rgb(194, 179, 96);
+ border-radius: 10px;
+ position: absolute;
+ margin: auto;
}
-
-.avatar{
- width: 100px;
- height: 100px;
- border-radius: 50%;
- position: absolute;
- top: -50px;
- left: calc(50% - 50px);
+.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;
}
-
-h1{
- margin: 0;
- padding: 0 0 20px;
- text-align: center;
- font-size: 22px;
+#chk {
+ display: none;
}
-
-.loginbox p{
- margin: 0;
- padding: 0;
- font-weight: bold;
+.signup {
+ position: relative;
+ width: 100%;
+ height: 100%;
}
-
-.loginbox input{
- width: 100%;
- margin-bottom: 20px;
+label {
+ color: #fff;
+ font-size: 2.3em;
+ justify-content: center;
+ display: flex;
+ margin: 60px;
+ font-weight: bold;
+ cursor: pointer;
+ transition: 0.5s ease-in-out;
}
-
-.loginbox input[type="text"], input[type="password"]
-{
- border: none;
- border-bottom: 1px solid #fff;
- background: transparent;
- outline: none;
- height: 40px;
- color: #fff;
- font-size: 16px;
+input {
+ width: 60%;
+ height: 20px;
+ background: #e0dede;
+ justify-content: center;
+ display: flex;
+ margin: 20px auto;
+ padding: 10px;
+ border: none;
+ outline: none;
+ border-radius: 5px;
}
-
-.loginbox input[type="submit"]
-{
- border: none;
- outline: none;
- background: #ff17b2;
- color: #fff;
- font-size: 18px;
- border-radius: 20px;
+button {
+ width: 60%;
+ height: 40px;
+ margin: 10px auto;
+ justify-content: center;
+ display: block;
+ color: #fff;
+ background: #573b8a;
+ font-size: 1em;
+ font-weight: bold;
+ margin-top: 20px;
+ outline: none;
+ border: none;
+ border-radius: 5px;
+ transition: 0.2s ease-in;
+ cursor: pointer;
}
-
-.loginbox input[type="submit"]:hover
-{
- cursor: pointer;
- background: #ffc107;
- color: #000;
+button:hover {
+ background: #6d44b8;
}
-
-.loginbox a{
- text-decoration: none;
- font-size: large;
- font-size: 15px;
- line-height: 20px;
- color: rgb(216, 216, 216);
+.login {
+ height: 460px;
+ background: #eee;
+ border-radius: 60% / 10%;
+ transform: translateY(-180px);
+ transition: 0.8s ease-in-out;
+}
+.login label {
+ color: #573b8a;
+ transform: scale(0.6);
}
-.loginbox a:hover
-{
- color: #ffc107;
-}
\ No newline at end of file
+#chk:checked ~ .login {
+ transform: translateY(-500px);
+}
+#chk:checked ~ .login label {
+ transform: scale(1);
+}
+#chk:checked ~ .signup label {
+ transform: scale(0.6);
+}
+.geet-logo {
+ position: relative;
+ top: -200px;
+ left: -450px;
+}
+
+
+
+