added login page

Okikijoshua · Aug 30, 2019 · f15a41c · f15a41c
1 parent 8f20b0c
commit f15a41c
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 2 deletions.
diff --git a/.gitiignore b/.gitiignore
@@ -0,0 +1 @@
+.vscode/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/dist/Styles/layout.css b/dist/Styles/layout.css
@@ -66,4 +66,62 @@ a{
 }
 .footer-section li{
     list-style: none;
-}
+}
+
+
+
+.form-container{
+    display: block;
+    margin-top:50px;
+    margin-left: 20%;
+    margin-right: 20%;
+    color:green;
+}
+
+
+  input[type=text], input[type=password] {
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    width:100%;
+  }
+
+  button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width:100%;
+  }
+
+  button:hover {
+    opacity: 0.8;
+  }
+
+  .cancelbtn {
+    width: auto;
+    padding: 10px 18px;
+    background-color: #f44336;
+  }
+
+
+  /* The "Forgot password" text */
+  span.psw {
+    float: right;
+    padding-top: 16px;
+  }
+
+  /* Change styles for span and cancel button on extra small screens */
+  @media screen and (max-width: 300px) {
+    span.psw {
+      display: block;
+      float: none;
+    }
+    .cancelbtn {
+      width: 100%;
+    }
+  }
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
    <div class="header-section">
        <div class="top-nav">
            <ul class="top-nav-link">
-               <li><i class="fas fa-sign-in-alt"></i><a href="#">Sign In</a></li>
+               <li><i class="fas fa-sign-in-alt"></i><a href="login.html">Sign In</a></li>
                <li><i class="fas fa-user-plus"></i><a href="#">Register</a></li>
            </ul>
        </div>

diff --git a/login.html b/login.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" type="text/css" href="dist/Styles/layout.css">
+    <title>Document</title>
+</head>
+<body>
+    <div class="header-section">
+            <div class="top-nav">
+                <ul class="top-nav-link">
+                    <li><i class="fas fa-sign-in-alt"></i><a href="login.html">Sign In</a></li>
+                    <li><i class="fas fa-user-plus"></i><a href="#">Register</a></li>
+                </ul>
+            </div>
+            <div class="logo-section">
+                <img src="https://res.cloudinary.com/dcczd9zz5/image/upload/v1567174130/ff_nbwkbr.png" width="300px">
+            </div>
+            <div class="main-nav">
+                <ul class="main-nav-link">
+                    <li><a href="/index.html">Home</a></li>
+                    <li><a href="#">About Us</a></li>
+                    <li><a href="#">Contact Us</a></li>
+                    <li>Fund Projects</li>
+                    <li>Team</li>
+                </ul>
+            </div>
+    </div>
+    <form action="">
+        <div class="form-container">
+            <div>
+                <label for="username"><b>Username</b></label>
+                <input type="text" placeholder="Enter Username" name="username" required>
+            </div>
+
+            <div>
+                <label for="psw"><b>Password</b></label>
+                <input type="password" placeholder="Enter Password" name="password" required>
+            </div>
+
+            <button type="submit">Login</button>
+
+            <div>
+                <label>
+                    <input type="checkbox" checked="checked" name="remember"> Remember me
+                </label>
+            </div>
+
+            <div class="container">
+                <button id="button-cancel" type="button" class="cancelbtn">Cancel</button>
+                <span class="psw">Forgot password?<a href="#"></a></span>
+            </div>
+        </div>
+
+
+    </form>
+</body>
+</html>