Fixed text boxes gap & Header issue ! #432

Css-files/signup1.css

@@ -27,16 +27,25 @@ body {
   overflow: hidden; /* Prevents overflow */
   position:relative;
 }
-
+ 
 .main-login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  overflow: hidden; /* Ensure nothing overflows from the flexbox */
-  gap: 20px; /* Spacing between the card and image */
-
+
+  display:  flex;
+  justify-content:  center;
+  align-items:  center;
+  width:  100%;
+  overflow:  hidden; 
+  gap: 70px; 
+
 }
+
+.homebtn{
+  position: absolute;
+  top:30px;
+  left:25px;
+
+} 
+
 .homebtn{
   position: absolute;
   top:30px;
@@ -61,6 +70,25 @@ body {
   background-color:white;
 }
 
+.card-login {
+
+  width: calc(100% - 40px); /* Full width minus padding */
+  max-width: 400px; /* Max width for better layout */
+  padding: 30px;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  background-color: var(--card-bg);
+  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
+  display: flex; /* Flex to stack elements */
+  flex-direction: column; /* Column layout for the card */
+  overflow: hidden; /* Added to ensure no content spills out */
+  border-radius: 50px;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+
+}
+
 .card-login {
   width: calc(100% - 40px); /* Full width minus padding */
   max-width: 400px; /* Max width for better layout */

Css-files/style.css

@@ -7,6 +7,11 @@ body {
     background-color: black;
     background-attachment: fixed;
 }
+
+.navbar {
+    padding: 8px 0px;
+  }
+
 .navbar {
     padding: 8px 0px;
   }
@@ -17,19 +22,31 @@ body {
 }
 
 .navbar li {
+
     float: left;
     list-style: none;
     margin: 2px 20px;
 
 }
 
+.navbar li {
+    float: left;
+    list-style: none;
+    margin: 2px 20px;
+
+}
+
+
 .navbar li a {
+
     padding: 1px 3px;
     text-decoration: none;
     color: white;
     font-size: 1.3rem;
+
 }
 
+
 .navbar li:hover {
     opacity: 0.7;
 }

Html-files/signup.html

@@ -85,6 +85,13 @@
     height: 33.33%;
     z-index: 1;
 }
+
+.area .way{
+    width: 33.33%;
+    height: 33.33%;
+    z-index: 1;
+}
+
 .area .box{
     width: 100%;
     height: 100%;

index.html

@@ -8,6 +8,14 @@
     <title>Retro</title>
 
     <style>
+
+@media (min-width: 992px) {
+
+            .navbar-expand-lg .navbar-nav {
+                margin-top: -9px; /* Add this line */
+            }
+        }
+
         @media (min-width: 992px) {
             .navbar-expand-lg .navbar-nav {
                 margin-top: -9px; /* Add this line */

style.css

@@ -14,6 +14,7 @@ body {
   background-color: black;
 }
 /*
+
 .navbar {
   padding: fixed;
   top: 0;
@@ -25,6 +26,15 @@ body {
   transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
 }
 */
+
+.navbar a {
+
+  text-decoration: none;
+  color: #333;
+  font-size: 1.3rem;
+  transition: color 0.3s ease,border-bottom 0.3s ease;
+
+}
 
 .navbar a {
   text-decoration: none;
@@ -40,14 +50,27 @@ body {
 }
 
 */
+
+
+.navbar.fixed-top {
 
+  position:  fixed; 
+  top:  0px;
+  width:  100%; 
+  z-index:  1030; 
+  background-color: #ffcdcd;
 
-.navbar.fixed-top {
-  position: fixed; 
-  top: 0;
-  width: 100%; 
-  z-index: 1030; 
 }
+
+
+.navbar.scrolled {
+
+  background-color: rgb(176, 63, 63); 
+  backdrop-filter: blur(15px);
+  color: #fff;
+
+}
+
 .navbar.scrolled {
   background-color: rgb(176, 63, 63); 
   backdrop-filter: blur(15px);