Styling added to signUp and login pages

BeehiveCommunity · Oct 10, 2024 · 413059d · 413059d
1 parent 6c3abdd
commit 413059d
Show file tree

Hide file tree

Showing 13 changed files with 152 additions and 26 deletions.
diff --git a/f1.png b/f1.png
diff --git a/index.html b/index.html
@@ -78,7 +78,7 @@
 
     <!-- <nav class="navbar navbar-expand-lg bg-body-white">
 =======
-     <!-- Scroll-to-Top Button -->
+     Scroll-to-Top Button -->
      <button class="scroll-up-btn">
       <i class="arrow-up"></i>
     </button>
@@ -116,15 +116,15 @@
               <a class="nav-link" href="contact.html">Contact</a>
             </li>
             <li class="nav-item">
-              <a class="nav-link" href="login-sginup.html">Login</a>
+              <a class="nav-link" href="login.html">Login</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="#Projects">Challenges</a>
             </li>
           </ul>
         </div>
       </div>
-    </nav> -->
+    </nav>
     <section>
       <h2 id="Projects" class="">Projects</h2>
       <ul id="list" class="list"></ul>

diff --git a/login.avif b/login.avif
diff --git a/login.html b/login.html
@@ -7,25 +7,29 @@
     <title>Sign In</title>
 </head>
 <body>
-    <form id="signinForm">
+    <form id="signinForm" class="signinform-container">
         <div class="container">
-            <h1>Sign In</h1>
 
-            <hr>
-
+
 
-           <div class="form">
+           <div class="signinform">
+            <h1>Sign In</h1>
+           <div class="form-fields">
             <label for="email"><b>Email</b></label>
             <input type="email" placeholder="Enter Email" autocomplete="email" id="email" required>
 
             <label for="psw"><b>Password</b></label>
             <input type="password" placeholder="Enter Password" autocomplete="new-password" id="psw" required>
-
+        </div>
             <div class="buttons">
                 <button type="button" class="cancelbtn">Cancel</button>
                 <button type="submit" class="signinbtn">Sign In</button>
             </div>
            </div>
+           <div class="signinimage-container">
+            <img src="/login.webp" alt="image" class="sign-in-img" />
+        </div>
+
         </div>
     </form>
 

diff --git a/login.jpeg b/login.jpeg
diff --git a/login.jpg b/login.jpg
diff --git a/login.png b/login.png
diff --git a/login.webp b/login.webp
diff --git a/signUp.css b/signUp.css
@@ -1,35 +1,152 @@
+* {
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
+}
+
+.image-container{
+   display: flex;
+align-items:flex-end;
+
+}
 .container{
-    text-align: center;
-     border:2px solid black;
-     padding: 10px;
+    display: flex;
+    flex-direction: row-reverse;
+
+}
+.form-container{
+background-color: #B7E0FF;  
+  justify-content: center;
+    display: flex;
+     align-items: center;
+     width:100vw;
+     height:100vh;
+
+
+ }
+ .signinform-container{
 
+    background-color: #D3E2FA;  
+  justify-content: center;
+    display: flex;
+     align-items: center;
+     width:100vw;
+     height:100vh;
 
 
+ }
+
+ .form-fields{
+    display: flex;
+    flex-direction: column;
+    width:100%;
+   gap:5px;
+
  }
  .buttons{
      margin-top: 10px;
  }
  h1{
-     font-size: 1.2rem;
+     font-size: 2rem;
+     color:#091057;
  }
  label{
      font-size: 1rem;
  }
  .form{
-     display: flex;
+background-color:white;
+display: flex;
      flex-direction: column;
-     gap:2px;
+     gap:20px;
      align-items: center;
-
-
+      justify-content: center;
+    border-radius: 10px;
+     width:30vw;
+     height:80vh;
+ padding-inline:30px;
+ box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  }
+ .signinform{
+    background-color:white;
+    display: flex;
+         flex-direction: column;
+         gap:30px;
+         align-items: center;
+          justify-content: center;
+         width:30vw;
+         height:80vh;
+     padding-inline:30px;
+     box-shadow: rgba(255, 116, 143, 0.4) 5px 5px, rgba(255, 116, 143, 0.3) 10px 10px, rgba(255, 116, 143, 0.2) 15px 15px, rgba(255, 116, 143, 0.1) 20px 20px, rgba(255, 116, 143, 0.05) 25px 25px;
+
+     }
  input{
-     padding:2px;
-     margin-block: 5px;
+     padding:12px;
+     width:100%;
+     margin-bottom:20px;
+     border-radius: 8px;
+    border:2px solid #9bd1fa
+
+ }
+ label{
+    color:#093d82;
  }
  button{
-     padding-block:8px;
-     padding-inline: 15px;
+     padding:10px;
      background: #fff;
-     border-radius: 20px;
- }
+     width:9vw;
+     border-radius: 10px;
+     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+     border-style:none;
+
+ }
+
+ .cancelbtn{
+    background-color: rgb(249, 89, 89);
+    border:2px solid rgb(249, 89, 89);
+    color:white;
+
+ }
+ .cancelbtn:hover{
+    background-color: red;
+    border:2px solid red;
+    cursor: pointer;
+    font-weight: bold;
+ }
+.buttons{
+    display: flex;
+    gap:12px;
+}
+
+.signupbtn{
+    background-color:#091057;
+    border:2px solid #091057;
+    color:white;
+}
+.signupbtn:hover{
+    cursor: pointer;
+    background-color: white;
+    border:2px solid #091057;
+    color:#091057;
+    font-weight: bold;
+}
+
+.signinimage-container{
+    background: #fff;
+    width:50%;
+
+}
+.sign-in-img{
+    width:100%;
+    height: 100%; 
+}
+.signinbtn{
+    background-color: #4F6BFC;
+    color:white;
+}
+.signinbtn:hover{
+    color: #4F6BFC;
+    background-color:white;
+    border:2px solid #4F6BFC ;
+    font-weight: bold;
+    cursor:pointer;
+}
diff --git a/signUp.html b/signUp.html
@@ -7,14 +7,18 @@
     <title>Sign Up</title>
 </head>
 <body>
-    <form id="signupForm" >
+    <form id="signupForm" class="form-container" >
         <div class="container">
+            <div class="image-container">
+                <img src="/signup.webp" alt="image" />
+            </div>
+          <div class="form">
             <h1>Sign Up</h1>
 
             <hr>
 
-          <div class="form">
-            <label for="name"><b>Name</b></label>
+            <div class="form-fields">
+                <label for="name"><b>Name</b></label>
             <input type="text" placeholder="Enter Name" autocomplete="name" id="name" required>
 
             <label for="email"><b>Email</b></label>
@@ -25,6 +29,7 @@ <h1>Sign Up</h1>
 
             <label for="psw-repeat"><b>Repeat Password</b></label>
             <input type="password" placeholder="Repeat Password" id="psw-repeat" autocomplete="new-password" required>
+            </div>
 
             <div class="buttons">
                 <button type="button" class="cancelbtn">Cancel</button>

diff --git a/signup.jpg b/signup.jpg
diff --git a/signup.png b/signup.png
diff --git a/signup.webp b/signup.webp