Merge pull request #3 from BLV-OSAV-USAV/feature/logincss

login css update
BLV-OSAV-USAV · Mar 15, 2024 · b8778e5 · b8778e5
2 parents 97682fc + fa5220c
commit b8778e5
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 18 deletions.
diff --git a/home.css b/home.css
@@ -1,12 +1,4 @@
-/* homepage */
-@font-face {
-    font-family: "Digitalt";
-    src:
-      local("fonts/Digitalt"),
-      url("fonts/Digitalt/Digitalt.otf") format("opentype"),
-      url("fonts/Digitalt/Digitalt.ttf") format("truetype");
-  }
-
+/* homepage */     
 * {
     font-size: 62, 5%;
     box-sizing: border-box;

diff --git a/login.css b/login.css
@@ -0,0 +1,70 @@
+/* Add Montserrat font to your CSS */
+
+body {
+  font-family: "Montserrat", sans-serif;
+  background-color: #009999;
+}
+
+/* Container */
+.login-container {
+  display: flex;
+  justify-content: center; /* horizontally center */
+  align-items: center; /* vertically center */
+  height: 100vh; /* set height to 100% of viewport height */
+  padding: 10px;
+}
+
+/* Your existing CSS styles */
+/* Form */
+.login-form {
+  background-color: white;
+  padding: 20px;
+  border-radius: 10px;
+}
+
+/* Input fields */
+.input-field {
+  width: 90%;
+  padding: 10px;
+  margin: 10px 0;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  text-size-adjust: 16 px;
+}
+
+/* Submit button */
+.login-btn {
+  width: 100%;
+  padding: 10px;
+  margin-top: 10px;
+  background-color: #ff99cc;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.login-btn:hover {
+  background-color: #0056b3;
+}
+
+p {
+  text-size-adjust: 6px;
+}
+
+/* Additional styles for smaller screens */
+@media screen and (max-width: 480px) {
+  .login-form {
+    padding: 10px;
+  }
+
+  .input-field {
+    padding: 8px;
+    margin: 8px 0;
+  }
+
+  .login-btn {
+    padding: 8px;
+    margin-top: 8px;
+  }
+}
diff --git a/login.html b/login.html
@@ -3,24 +3,41 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Login and Sign Up</title>
-    <link rel="stylesheet" href="style.css" />
-    <link rel="icon" type="image/x-icon" href="/img/favicon.png">
+    <title>Login</title>
+    <link rel="stylesheet" href="login.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
+    />
+
+    <link rel="icon" type="image/x-icon" href="/img/favicon.png" />
   </head>
   <body>
-    <div class="container">
+    <div class="login-container">
+      <form class="login-form" id="loginForm">
         <h2>Login</h2>
-        <input type="text" id="loginUsername" placeholder="Username" required />
+        <input
+          type="text"
+          id="loginUsername"
+          class="input-field"
+          placeholder="Username"
+          required
+        />
         <input
           type="password"
           id="loginPassword"
+          class="input-field"
           placeholder="Password"
           required
         />
-        <button onclick="login()">Login</button>
-
+        <button type="submit" class="login-btn">Login</button>
+        <p>
+          You should login with <br />
+          <b>username: test@text.com </b><br />
+          <b>password: 123456</b>
+        </p>
+      </form>
     </div>
-
     <script src="js/login.js"></script>
   </body>
-</html>
+</html>