From 21e3639f8d656fc9f1aed8e3f1489adc2bddcf2d Mon Sep 17 00:00:00 2001
From: josephroy99 <joseph.roy@roysathome.net>
Date: Wed, 7 Feb 2024 22:50:17 +0000
Subject: [PATCH] added web page test

---
 roysathome.net/LoginPage.html | 214 ++++++++++++++++++++++++++++++++++
 roysathome.net/index.html     |   9 ++
 2 files changed, 223 insertions(+)
 create mode 100644 roysathome.net/LoginPage.html
diff --git a/roysathome.net/LoginPage.html b/roysathome.net/LoginPage.html
new file mode 100644
index 0000000..72c9253
--- /dev/null
+++ b/roysathome.net/LoginPage.html
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+
+        button {
+            background-color: white;
+        }
+
+        button:hover {
+            background-color: rgb(197, 197, 197);
+        }
+
+        button:active {
+            background-color: #169D00;
+            color: black;
+        }
+
+        hr {
+            background-color: #A8A8A8;
+            margin: 1.7em 0em;
+            height: 1px;
+        }
+
+        body {
+            background: rgb(0,13,4);
+            background: linear-gradient(133deg, rgba(0,13,4,1) 0%, rgba(3,38,0,1) 81%, rgba(0,59,18,1) 100%) no-repeat; 
+            color: #EDEDED;
+            font-family: 'Poppins';
+            background-attachment: fixed; /*edit*/
+        }
+
+        span {
+            display: inline-block;
+        }
+
+        .vertical-break {
+            width: 1px;
+            min-width: none;
+            height: 600px;
+            background-color: #424242;
+            margin-top: 20px;
+        }
+
+        .control-regions {
+            padding: 50px;
+            vertical-align: top;
+            font-size: 24px;
+        }
+
+        .control-regions h1 {
+            font-weight: 400;
+            font-size: 2.1em;
+            width: 6em;
+            text-align: left;
+            margin: 0px;
+        }
+
+        .control-regions p {
+            font-weight: 200;
+            text-align: left;
+            margin: 0px;
+        }
+
+        .control-regions input {
+            background-color: #09190B;
+            color: #EDEDED;
+            border: #052400;
+            border-style: solid;
+            border-width: 2px;
+            border-radius: 5px;
+            font-weight: 100;
+            text-align: left;
+            font-size: 1em;
+            width: 100%;
+            outline: none;
+            caret-color: white;
+            margin: 0px;
+            padding: 6px;
+
+            box-sizing:border-box;
+            -moz-box-sizing:border-box;
+        }
+
+        .control-regions button {
+            width: 100%;
+            border: none;
+            border-radius: 5px;
+            font-size: 1em;
+            padding: 0.4em;
+            font-weight: 500;
+        }
+
+        .input-container {
+            margin-bottom: 1em;
+            margin-top: 1em;
+        }
+
+        .input-container-region {
+            margin-top: 3em;
+            margin-bottom: 30px;
+        }
+
+        .green-bar {
+            background-color: #169D00;
+            height: 0.2em;
+            width: 50%;
+            margin-bottom: 3em;
+        }
+
+        .control-regions .forgot-password {
+            font-size: 0.6em;
+            color:#169D00;
+            font-weight: 300;
+            margin: 30px 0em;
+        }
+
+        .signup-section button {
+            margin-top: 50px;
+        }
+
+        @media only screen and (max-width: 1100px) {
+            .signup-section {
+                display: none;
+            }
+
+            .only-mobile {
+                display: inline;
+            }
+
+            .vertical-break {
+                display: none;
+            }
+
+            .login-section {
+                display: block;
+                margin-left: auto;
+                margin-right: auto;
+            }
+        }
+
+        @media only screen and (min-width: 1100px) {
+            .only-mobile {
+                display: none;
+            }
+
+            .control-regions {
+                width: 30%;
+            }
+        }
+    </style>
+  </head>
+  <body>
+    <div>
+        <span class="login-section control-regions">
+            <h1>Login To Finance</h1>
+            <div class="green-bar"></div>
+            <div class="input-container-region">
+                <div class="input-container">
+                    <p>Email</p>
+                    <input type="text">
+                </div>
+                <div class="input-container">
+                    <p>Password</p>
+                    <input type="text">
+                </div>
+            </div>
+            <p class="forgot-password">Forgot password?</p>
+            <button>
+                Login
+            </button>
+            
+            <div class="only-mobile">
+                <hr>
+    
+                <button>
+                    Sign Up
+                </button>
+            </div>
+        </span>
+
+        <span class="vertical-break"></span>
+        
+        <span class="signup-section control-regions">
+            <h1>Sign Up To Finance</h1>
+            <div class="green-bar"></div>
+
+            <div class="input-container-region">
+                <div class="input-container">
+                    <p>Email</p>
+                    <input type="text">
+                </div>
+                <div class="input-container">
+                    <p>Password</p>
+                    <input type="text">
+                </div>
+            </div>
+
+            <button>
+                Sign Up
+            </button>
+        </span>
+    </div>
+  </body>
+</html>
diff --git a/roysathome.net/index.html b/roysathome.net/index.html
index 5daf367..75043da 100644
--- a/roysathome.net/index.html
+++ b/roysathome.net/index.html
@@ -73,6 +73,10 @@
             background-color: #609926;
         }
 
+        .webpagetest-button:hover {
+            background-color: #00450a;
+        }
+
         .login-signup-button {
             font-size: 30px;
             margin: auto;
@@ -115,6 +119,11 @@
                         Drive
                     </a>
                 </li>
+                <li>
+                    <a class="webpagetest-button" href="LoginPage.html">
+                        Web Page Test
+                    </a>
+                </li>
             </ul>
         </nav>
     </div>
