Update signup.css

here are the some changes did with the code of signup with improvig below key poinnts Improved Button & Link Styles: Buttons and links now have smoother transitions, and :hover and :active states are better defined. The links and buttons maintain a consistent, interactive feel. Media Queries: Added media queries for better responsiveness on smaller screens (like tablets and mobile devices). Enhanced Aesthetics: Tweaked shadow effects, animations, and hover effects to be more fluid and engaging. General Clean-Up: Removed unnecessary filter properties and improved box-shadow effects. The signup-container now has more appropriate opacity, and its background is a semi-transparent black to enhance readability.
swaraj-das · Nov 8, 2024 · 337573d · 337573d
1 parent 3cf72c4
commit 337573d
Showing 1 changed file with 80 additions and 166 deletions.
diff --git a/SignUp/signup.css b/SignUp/signup.css
@@ -1,3 +1,4 @@
+/* General Reset */
 * {
   box-sizing: border-box;
   margin: 0;
@@ -10,25 +11,27 @@ body {
   font-family: 'Trebuchet MS', Arial, sans-serif;
   display: flex;
   flex-direction: column;
-  justify-content: start;
-  align-items: start;
-  height: 100vh;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 100vh;
   color: white;
   text-shadow: 1px 1px 2px #000;
 }
 
+/* Error message styling */
 .error-message {
   color: red;
   font-size: 0.85em;
   margin-top: 5px;
 }
 
+/* Signup container */
 .signup-container {
-  opacity: 0.75;
-  background-color: black;
+  opacity: 0.85;
+  background-color: rgba(0, 0, 0, 0.7);
   padding: 3rem 5rem;
   border-radius: 20px;
-  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   text-align: center;
   max-width: 500px;
   width: 100%;
@@ -42,17 +45,19 @@ body {
       transform: scale(0.9);
   }
   to {
-      opacity: 0.75;
+      opacity: 0.85;
       transform: scale(1);
   }
 }
 
+/* Heading */
 h1 {
   margin-bottom: 1.5rem;
-  font-size: 1.5rem;
+  font-size: 2rem;
   color: #fb5283;
 }
 
+/* Input Group */
 .input-group {
   margin-bottom: 1.5rem;
   text-align: left;
@@ -64,6 +69,7 @@ label {
   font-size: 16px;
 }
 
+/* Input Styling */
 input[type="text"],
 input[type="email"],
 input[type="password"] {
@@ -75,6 +81,7 @@ input[type="password"] {
   color: white;
   font-family: "Press Start 2P", cursive;
   font-size: 0.875rem;
+  transition: background-color 0.3s, border-color 0.3s;
 }
 
 input[type="text"]:focus,
@@ -85,25 +92,29 @@ input[type="password"]:focus {
   background-color: #2a2e32;
 }
 
+/* Button Styling */
 .signup-button {
   color: white;
   font-family: Helvetica, sans-serif;
   font-weight: bold;
-  font-size: 20px;
-  text-align: center;
+  font-size: 1rem;
   background-color: #ffa12b;
   display: block;
   position: relative;
   padding: 15px 60px;
-  margin: auto;
+  margin: 20px auto;
   cursor: pointer;
   transition: background-color 0.2s, color 0.2s;
   text-shadow: 0px 1px 0px #000;
-  filter: dropshadow(color=#000, offx=0px, offy=1px);
   box-shadow: inset 0 1px 0 #ffe5c4, 0 10px 0 #915100;
   border-radius: 5px;
 }
 
+.signup-button:hover {
+  background-color: #ffd198;
+  color: #f78900;
+}
+
 .signup-button:active {
   top: 10px;
   background-color: #f78900;
@@ -112,76 +123,54 @@ input[type="password"]:focus {
 
 .signup-button:after {
   content: "";
-  height: 100%;
-  width: 100%;
-  padding: 4px;
   position: absolute;
   bottom: -15px;
   left: -4px;
-  z-index: -1;
+  width: 100%;
+  height: 100%;
   background-color: #2b1800;
   border-radius: 5px;
 }
 
-.signup-button:hover {
-  background-color: #ffd198;
-  color: #f78900;
-}
-
+/* Link Styling */
 .links {
   margin-top: 18px;
 }
 
 .links a {
   color: #fb5283;
   text-decoration: none;
-  transition: color 0.3s;
   font-size: 18px;
+  transition: color 0.3s ease;
 }
 
 .links a:hover {
   color: #ff80ab;
   text-decoration: underline;
 }
 
+/* Home link button styling */
 .linksHome {
   position: absolute;
   top: 20px;
   left: 20px;
-  cursor: pointer;
   padding: 10px;
   font-size: large;
   text-decoration: none;
   border-radius: 15px;
   border: none;
   background: linear-gradient(0deg, rgba(255, 193, 219, 1) 0%, rgba(245, 131, 202, 1) 100%);
   color: #fff;
-  overflow: hidden;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 .linksHome:hover {
-  text-decoration: none;
   background: linear-gradient(0deg, rgba(245, 131, 202, 1) 0%, rgba(255, 193, 219, 1) 100%);
-  color: #fff;
-}
-
-.linksHome:before {
-  position: absolute;
-  content: "";
-  display: inline-block;
-  top: -180px;
-  left: 0;
-  width: 30px;
-  height: 100%;
-  background-color: rgba(255, 255, 255, 0.3);
-  animation: shiny-btn1 3s ease-in-out infinite;
 }
 
 .linksHome:active {
-  box-shadow: 4px 4px 6px 0 rgba(255, 193, 219, 0.3),
-              -4px -4px 6px 0 rgba(245, 131, 202, 0.3),
-              inset -4px -4px 6px 0 rgba(255, 193, 219, 0.3),
-              inset 4px 4px 6px 0 rgba(245, 131, 202, 0.3);
+  box-shadow: 4px 4px 6px rgba(255, 193, 219, 0.3), -4px -4px 6px rgba(245, 131, 202, 0.3);
 }
 
 @keyframes shiny-btn1 {
@@ -203,149 +192,74 @@ input[type="password"]:focus {
   }
 }
 
-.linksHome a {
-  color: #ffe4e9;
-}
-
-a {
-  text-decoration: none;
-}
-
-#link-home {
-  border: 1px solid rgb(255, 255, 255);
-  box-shadow: 0 0 5px white;
-  border-radius: 15px;
-  padding: 8px 15px;
-  margin-left: 1rem;
-  margin-top: 1rem;
-}
-
-#link-home:hover {
-  border: 1px solid rgb(202, 202, 202);
-  box-shadow: 0 0 5px #424242;
-  background-color: #42424222;
-  border-radius: 15px;
-  padding: 8px 15px;
-}
-
-#link-home a {
-  text-decoration: none;
-  color: #fff;
-  font-size: 1.4rem;
-  text-shadow: none;
-  font-family: 'Trebuchet MS', Arial, sans-serif;
-}
-
-.signup-button, .google-signup-button {
-  width: 100%;
-  padding: 10px;
-  margin: 10px 0;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: background-color 0.3s ease;
-}
-
-.signup-button {
-  background-color: #f4a261;
-  color: white;
-}
-
-.signup-button:hover {
-  background-color: #e76f51;
+/* Footer Styling */
+.footer {
+  text-align: center;
+  margin-top: auto;
+  padding: 20px 0;
+  font-size: 0.8rem;
 }
 
-.google-signup-button {
-  background-color: white;
-  color: #757575;
-  border: 1px solid #dadce0;
+/* Social Icons */
+.icons {
   display: flex;
-  align-items: center;
   justify-content: center;
+  margin-top: 10px;
 }
 
-.google-signup-button:hover {
-  background-color: #f8f9fa;
-}
-
-.google-signup-button img {
-  width: 18px;
-  height: 18px;
-  margin-right: 10px;
-}
-
-.or-divider {
-  text-align: center;
-  margin: 20px 0;
-  color: #757575;
-  position: relative;
-  overflow: hidden;
-}
-
-.or-divider::before,
-.or-divider::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  width: 45%;
-  height: 1px;
-  background-color: #dadce0;
+.icons a {
+  margin: 0 10px;
+  transition: transform 0.2s;
 }
 
-.or-divider::before {
-  left: 0;
+.icons a:hover {
+  transform: scale(1.1);
 }
 
-.or-divider::after {
-  right: 0;
+.icons img {
+  width: 30px;
+  height: 30px;
 }
 
-.or-divider span {
-  display: inline-block;
-  position: relative;
-  padding: 0 10px;
-  background-color: #000; /* Match this with your form background color */
-}
+/* Media Queries for Responsiveness */
+@media (max-width: 768px) {
+  .signup-container {
+    padding: 2rem 3rem;
+  }
 
-.links {
-  text-align: center;
-  margin-top: 20px;
-}
+  h1 {
+    font-size: 1.25rem;
+  }
 
-.links a {
-  color: #e76f51;
-  text-decoration: none;
-}
+  .signup-button {
+    padding: 12px 50px;
+    font-size: 18px;
+  }
 
-.links a:hover {
-  text-decoration: underline;
+  .input-group {
+    margin-bottom: 1rem;
+  }
 }
 
-.footer {
-  text-align: center;
-  margin-top: auto;
-  padding: 20px 0;
-  font-size: 0.8rem;
-}
+@media (max-width: 480px) {
+  .signup-container {
+    padding: 1.5rem 2rem;
+  }
 
-.icons {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-top: 10px; /* Margin added for spacing above icons */
-}
+  h1 {
+    font-size: 1rem;
+  }
 
-.icons a {
-  margin: 0 10px; /* Spacing between icons */
-  transition: transform 0.2s;
-}
+  .signup-button {
+    width: 100%;
+    padding: 12px 30px;
+  }
 
-.icons a:hover {
-  transform: scale(1.1); /* Slight scaling effect on hover */
-}
+  .input-group input {
+    font-size: 0.75rem;
+  }
 
-.icons img {
-  width: 30px; /* Consistent size for icons */
-  height: 30px; /* Consistent size for icons */
+  .links a {
+    font-size: 16px;
+  }
 }