From 27c7c4f330b4c25e98c4238eb14ab73e3de723e8 Mon Sep 17 00:00:00 2001
From: Kelvin Samuel <kelvinbalkes@gmail.com>
Date: Sun, 19 Sep 2021 15:13:13 +0700
Subject: [PATCH] Modified Login Page

---
 login.html | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 87 insertions(+), 6 deletions(-)

diff --git a/login.html b/login.html
index cd42464..12de9f5 100644
--- a/login.html
+++ b/login.html
@@ -13,7 +13,7 @@
     <link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
     <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
     <script src="https://unpkg.com/feather-icons"></script>
-
+    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
     <style>
         body {
             font-family: 'Poppins', sans-serif;
@@ -106,7 +106,53 @@
             text-decoration: underline;
         }
 
-        @media screen and (max-width: 425px) {
+        .login-with {
+            color: white;
+            text-align: center;
+        }
+
+        .links {
+            display: flex;
+            cursor: pointer;
+            color: white;
+            margin: 0 0 20px 0;
+        }
+
+        .google, .facebook {
+            width: 100%;
+            height: 42px;
+            line-height: 45px;
+            margin-top: 10px;
+        }
+
+        .google {
+            background: white;
+            border: 1px solid white;
+            color: #1b1c1e;
+            margin-right: 10px;
+        }
+
+        .facebook {
+            background: #4267B2;
+            border: 1px solid #3e61a8;
+            margin-left: 10px
+        }
+
+        .google:hover{
+            background: #e0e0e0;
+        }
+
+
+        .facebook:hover{
+            background: #3e61a8;
+        }
+
+        .links i{
+            font-size: 17px;
+        
+        }
+
+        @media screen and (max-width: 426px) {
             .card a, input {
                 font-size: 3vw;
             }
@@ -114,9 +160,14 @@
             .card-header {
                 font-size: 6vw;
             }
+
+            .navbar-brand {
+                width: 15vw;
+                height: 15vw;
+            }
         }
 
-        @media screen and (min-width: 426px) {
+        @media screen and (min-width: 427px) {
             .card a, input {
                 font-size: 2vw;
             }
@@ -124,6 +175,11 @@
             .card-header {
                 font-size: 5vw;
             }
+
+            .navbar-brand {
+                width: 11vw;
+                height: 11vw;
+            }
         }
 
         @media screen and (min-width: 767px) {
@@ -134,6 +190,11 @@
             .card-header {
                 font-size: 4vw;
             }
+
+            .navbar-brand {
+                width: 8vw;
+                height: 8vw;
+            }
         }
 
         @media screen and (min-width: 993px) {
@@ -144,6 +205,11 @@
             .card-header {
                 font-size: 2.5vw;
             }
+
+            .navbar-brand {
+                width: 6vw;
+                height: 6vw;
+            }
         }
 
         @media screen and (min-width: 1400px) {
@@ -154,6 +220,11 @@
             .card-header {
                 font-size: 2.5vw;
             }
+
+            .navbar-brand {
+                width: 6vw;
+                height: 6vw;
+            }
         }
 
         @media screen and (max-width: 500px) {
@@ -206,14 +277,24 @@
                             <label for="exampleDropdownFormPassword1">Password</label>
                             <input class="form-control input-sm text-center" id="exampleDropdownFormPassword1"
                                    placeholder="Password" type="password">
-                            <br>
+                
                             <div class="options-01 hoverlogin-1" style="word-break: keep-all;">
                                 <label class="remember-me text-left"><input name="" type="checkbox">Remember me</label>
-                                <a href="forgot-password.html" style="margin-left: 14%; font-size: 10pt;">Forgot your
+                                <a href="forgot-password.html" style="margin-left: 15%; font-size: 10pt;">Forgot your
                                     password?</a>
                             </div>
                             <button class="btn btn-login btn-primary" type="submit">Login</button>
-
+                            <div class="login-with">Or login with
+                                <div class="links">
+                                    <div class="google">
+                                       <i class="fab fa-google"><a href=""></a><img class="google-icon-svg" src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"/><span></span></i>
+                                    </div>
+                                    <div class="facebook">
+                                        <i class="fab fa-facebook-f"><a href=""></a><img class="facebook-icon-svg" src="https://cdn-icons-png.flaticon.com/128/733/733547.png" style="height: 30px; width: 30px; margin: 0 30px; padding-top: -3px" ><span></span></i>
+                                     </div>
+                                 </div>
+                            </div>
+                            
                             <div class="hoverlogin-1 text-center">
                                 <a href="register.html">Not Have Account? Sign up</a>
                             </div>