From 5ca2f25ffaeeec864861b8c33af5b7e557fbd69c Mon Sep 17 00:00:00 2001
From: Kelvin Samuel <kelvinbalkes@gmail.com>
Date: Mon, 27 Sep 2021 08:22:11 +0700
Subject: [PATCH] Modified Logo Banner on OTP Page

---
 index.html |   3 +-
 otp.html   | 166 +++++++++++++++++++++++++++++------------------------
 2 files changed, 92 insertions(+), 77 deletions(-)
diff --git a/index.html b/index.html
index 5d7a773..0e92cbc 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -23,7 +22,7 @@
 <body class="bg-color">
     <nav class="navbar navbar-expand-lg navbar-dark nav-color ml-5 mr-5 nav-radius">
         <a href="/"><img alt="Banner" class="navbar-brand lazyload" height="80" src="assets/logo_transparent.webp"
-                style="margin-top: 0%;" width="80"></a>
+            style="margin-top: 0%;" width="80"></a>
         <button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
             class="navbar-toggler" data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
             <span class="navbar-toggler-icon"></span>
diff --git a/otp.html b/otp.html
index fe23697..e800c67 100644
--- a/otp.html
+++ b/otp.html
@@ -88,80 +88,6 @@
             height: 40px;
         }
 
-        @media screen and (max-width: 425px) {
-
-            .card a,
-            input {
-                font-size: 3vw;
-            }
-
-            .card-header {
-                font-size: 6vw;
-            }
-        }
-
-        @media screen and (min-width: 426px) {
-
-            .card a,
-            input {
-                font-size: 2vw;
-            }
-
-            .card-header {
-                font-size: 5vw;
-            }
-        }
-
-        @media screen and (min-width: 767px) {
-
-            .card a,
-            input {
-                font-size: 2vw;
-            }
-
-            .card-header {
-                font-size: 4vw;
-            }
-        }
-
-        @media screen and (min-width: 993px) {
-
-            .card a,
-            input {
-                font-size: 1vw;
-            }
-
-            .card-header {
-                font-size: 2.5vw;
-            }
-        }
-
-        @media screen and (min-width: 1400px) {
-
-            .card a,
-            input {
-                font-size: 1vw;
-            }
-
-            .card-header {
-                font-size: 2.5vw;
-            }
-        }
-
-        @media screen and (max-width: 500px) {
-            .form {
-                width: 95%;
-            }
-
-            .form .user-input {
-                width: 100%
-            }
-
-            .form .btn {
-                width: 100%;
-            }
-        }
-
         .verify-btn {
             width: 100%;
             background-color: darkred;
@@ -178,6 +104,96 @@
             outline: 0 !important;
             box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
         }
+
+        @media screen and (max-width: 426px) {
+
+            .card a,
+            input {
+                font-size: 3vw;
+            }
+
+            .card-header {
+                font-size: 6vw;
+            }
+
+            .navbar-brand {
+                width: 15vw;
+                height: 15vw;
+            }
+        }
+
+            @media screen and (min-width: 427px) {
+
+            .card a,
+            input {
+                font-size: 2vw;
+            }
+
+            .card-header {
+                font-size: 5vw;
+            }
+
+            .navbar-brand {
+                width: 11vw;
+                height: 11vw;
+            }
+        }
+
+            @media screen and (min-width: 767px) {
+
+            .card a,
+            input {
+                font-size: 2vw;
+            }
+
+            .card-header {
+                font-size: 4vw;
+            }
+
+            .navbar-brand {
+                width: 8vw;
+                height: 8vw;
+            }
+        }
+
+            @media screen and (min-width: 993px) {
+
+            .card a,
+            input {
+                font-size: 1vw;
+            }
+
+            .card-header {
+                font-size: 2.5vw;
+            }
+
+            .navbar-brand {
+                width: 6vw;
+                height: 6vw;
+            }
+        }
+
+            @media screen and (min-width: 1400px) {
+
+            .card a,
+            input {
+                font-size: 1vw;
+            }
+
+            .card-header {
+                font-size: 2.5vw;
+            }
+
+            .navbar-brand {
+                width: 6vw;
+                height: 6vw;
+            }
+
+            :focus {
+                outline: 0 !important;
+                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
+            }
+        }
     </style>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"></script>
 </head>
@@ -187,7 +203,7 @@
         <a href="/"><img alt="Banner" class="navbar-brand lazyload" src="assets/logo_transparent.webp" style="margin-top: 0%;"></a>
         <ul class="navbar-nav">
             <li class="nav-item">
-                <a style="color: white; font-size: 16pt;">2-Factor Verification</a>
+                <a style="color: white; font-size: 14pt;">2-Factor Verification</a>
             </li>
         </ul>
         <div class="collapse navbar-collapse" id="navbarTogglerDemo01"></div>
