diff --git a/assets/css/login.css b/assets/css/login.css
index f7dd3c47..c238eb3a 100644
--- a/assets/css/login.css
+++ b/assets/css/login.css
@@ -12,7 +12,7 @@
position: relative;
width: 100%;
font-family: "Montserrat", sans-serif;
- background-image: linear-gradient(to right, #141e30, #243b55);
+ background-image: linear-gradient(to right, #6092f0, #1c426e);
}
.login-box {
@@ -117,7 +117,7 @@
.form-container .user-box input:valid ~ label {
top: -20px;
left: 0;
- color: #d8b8ff;
+ color: #22004b;
font-size: 14px;
}
@@ -167,7 +167,7 @@
}
.remember-me input:checked + .slider {
- background-color: #00aaff;
+ background-color: #004c73;
}
.remember-me input:checked + .slider:before {
@@ -224,7 +224,7 @@ button .flow {
top: -80px;
width: 250px;
height: 200px;
- background: #243b55;
+ background: #0050ab;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
transition: 0.5s;
}
@@ -286,7 +286,7 @@ button .flow:after {
}
.form-container .signup_link {
display: inline-block;
- color: cyan;
+ color: rgb(0, 0, 0);
font-size: 18px;
text-decoration: none;
font-weight: 500;
diff --git a/assets/css/signup.css b/assets/css/signup.css
index d67c64bc..ec7bd951 100644
--- a/assets/css/signup.css
+++ b/assets/css/signup.css
@@ -1,12 +1,11 @@
/* Global styles */
-* {
+*,
+*::before,
+*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
-}
-
-:root {
--header-height: 70px;
}
@@ -15,19 +14,24 @@
position: relative;
width: 100%;
font-family: "Montserrat", sans-serif;
- background-image: linear-gradient(to right, #141e30, #243b55);
+ background-image: linear-gradient(to right, #6092f0, #1c426e);
}
.signup-box {
- margin-top: 20px;
- padding: 40px;
+ padding: 40px 40px 30px 40px;
background: rgba(255, 255, 255, 0.25);
+ box-sizing: border-box;
border-radius: 10px;
- box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
- rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
- rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+ margin-top: 20px;
+ box-shadow:
+ rgba(0, 0, 0, 0.25) 0px 54px 55px,
+ rgba(0, 0, 0, 0.12) 0px -12px 30px,
+ rgba(0, 0, 0, 0.12) 0px 4px 6px,
+ rgba(0, 0, 0, 0.17) 0px 12px 13px,
+ rgba(0, 0, 0, 0.09) 0px -3px 5px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
+ border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
@@ -36,52 +40,51 @@
font-size: 35px;
letter-spacing: 1px;
margin-bottom: 20px;
+ margin-top: unset;
}
/* Google button styles */
.google {
- display: flex;
- align-items: center;
gap: 10px;
- border: 2px solid #1877f2;
+ border: none;
+ outline: 2px solid #243b55;
+ box-shadow: #568dcd 0px 25px 20px -20px;
margin-bottom: 10px;
padding: 6px 8px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
letter-spacing: 1px;
- transition: all 0.3s;
+ transition: 0.3s ease;
}
.googleicon {
width: 25px;
border-radius: 100px;
transition: all 0.3s;
- background-color: rgba(255, 255, 255, 0.9);
+ background: rgba(255, 255, 255, 0.9);
}
.google:hover {
- background-color: #1877f2;
-}
-
-
-.google:hover .googleicon {
- background-color: rgba(255, 255, 255, 0.9);
+ background: #243b55;
+ outline: none;
+ box-shadow:
+ rgba(0, 0, 0, 0.09) 0px 2px 1px,
+ rgba(0, 0, 0, 0.09) 0px 4px 2px,
+ rgba(0, 0, 0, 0.09) 0px 8px 4px,
+ rgba(0, 0, 0, 0.09) 0px 16px 8px,
+ rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
/* Divider styles */
.or {
width: 230px;
- margin: auto;
- display: flex;
- align-items: center;
}
-
-.or-line {
+.or .or-line {
border-top: 1px solid #fff;
- flex-grow: 1;
- margin: 0 10px;
+ width: 100%;
+ margin: auto 10px;
}
/* Form container styles */
@@ -113,7 +116,7 @@
left: 0;
padding: 10px 0;
font-size: 16px;
- color: #fff;
+ color: #ffffff;
letter-spacing: 1px;
pointer-events: none;
transition: 0.5s;
@@ -123,7 +126,7 @@
.user-box input:valid ~ label {
top: -20px;
left: 0;
- color: #d8b8ff;
+ color: #22004b;
font-size: 14px;
}
@@ -136,25 +139,80 @@
/* Submit button styles */
.submit-button[type="submit"] {
- background: linear-gradient(to right, #141e30, #243b55);
- color: #fff;
- border: none;
- letter-spacing: 1px;
- font-weight: 500;
- font-size: 20px;
- line-height: 30px;
+ outline: none;
+ position: relative;
+ padding: 10px 50px;
+ display: block;
+ text-decoration: none;
+ text-transform: uppercase;
+ height: 70px;
+ width: 170px;
+ overflow: hidden;
+ margin: 0 auto;
+ background-color: transparent;
border-radius: 45px;
- padding: 12px 45px;
- margin: 10px 0;
- transition: all 0.3s ease;
+ border: none;
+ margin-top: 30px;
+ text-align: center;
}
-.submit-button[type="submit"]:hover {
- background: white;
- box-shadow: 0px 0 20px 5px #4a77aa;
- color: black;
- font-weight: bolder;
- transform: translateY(-2px);
+button span {
+ position: relative;
+ right: 10px;
+ z-index: 1;
+ color: #ffffff;
+ font-size: 16px;
+ letter-spacing: 7px;
+ font-style:italic;
+ font-weight: bold;
+}
+
+button .flow {
+ position: absolute;
+ left: 0;
+ top: -60px;
+ width: 250px;
+ height: 200px;
+ background: #0050ab;
+ box-shadow: inset 0 0 50px rgba(11, 0, 109, 0.468);
+ transition: 0.5s;
+}
+
+button:hover .flow {
+ top: -120px;
+}
+
+button .flow:before,
+button .flow:after {
+ content: '';
+ position: absolute;
+ width: 180%;
+ height: 200%;
+ top: 0;
+ left: 50%;
+ transform: translate(-50%, -75%);
+}
+
+button .flow:before {
+ border-radius: 45%;
+ background: #e4e0ddef;
+ animation: swing 5s linear infinite;
+}
+
+button .flow:after {
+ border-radius: 40%;
+ background: rgba(3, 1, 1, 0.863);
+ animation: swing 10s linear infinite;
+}
+
+@keyframes swing {
+ 0% {
+ transform: translate(-50%, -75%) rotate(0deg);
+ }
+
+ 100% {
+ transform: translate(-50%, -75%) rotate(360deg);
+ }
}
/* Additional styles */
@@ -166,7 +224,7 @@
}
.login_link {
- color: #9ac0eb;
+ color: #000000;
font-size: 18px;
text-decoration: none;
font-weight: 500;
diff --git a/signup/signup.html b/signup/signup.html
index 860c26d7..b3618284 100644
--- a/signup/signup.html
+++ b/signup/signup.html
@@ -187,9 +187,10 @@ Sign Up
-