ipaullly · ipaullly · Oct 31, 2018
diff --git a/UI/css/style.css b/UI/css/style.css
@@ -0,0 +1,170 @@
+body{
+    font: 15px/1.5 'Montserrat', sans-serif;
+    padding: o;
+    margin: 0;
+    background-color: #A2D7E9;
+}
+
+/* Global */
+.container{
+    width: 70%;
+    margin: auto;
+    overflow: hidden;
+}
+
+ul{
+    margin: 0;
+    padding: 0;
+}
+
+/* header */
+header{
+    background: #0B5068;
+    color: #ffffff;
+    padding-top: 30px;
+    min-height: 70px;
+}
+
+header a{
+    color: #ffffff;
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: 16px;
+}
+header li{
+    float: left;
+    display: inline;
+    padding: 0 20px 0 20px;
+}
+header #brand{
+    float: left;
+}
+header #brand h1{
+    margin: 0;
+}
+header nav{
+    float: right;
+    margin-top: 10px;
+}
+header .highlight{
+    color: #A2D7E9;
+    font-weight: bold;
+}
+header a:hover{
+    color: #cccccc;
+    font-weight: bold;
+}
+
+/* showcase */
+
+#showcase{
+    min-height: 400px;
+    background: url('../img/showcase.jpg') no-repeat 0 -400px;
+    text-align: center;
+
+}
+#showcase h1{
+    margin-top: 130px;
+    font-size: 55px;
+    margin-bottom: 10px;
+
+}
+#showcase p{
+    font-size: 20px;
+}
+/* boxes */
+#boxes{
+    margin-top: 20px;
+}
+
+#boxes .box{
+    float: left;
+    text-align: center;
+    width: 30%;
+    padding: 10px;
+}
+#boxes .box img{
+    width: 90px;
+}
+
+/* footer */
+footer{
+    padding: 20px;
+    margin-top: 20px;
+    color: #ffffff;
+    background-color: #0B5068;
+    text-align: center;
+}
+
+/**** login-page ****/
+/* Bordered form */
+form {
+    border: 3px solid #f1f1f1;
+}
+
+/* Full-width inputs */
+input[type=text], input[type=password] {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 8px 0;
+    display: inline-block;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+}
+
+/* Set a style for all buttons */
+button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 14px 20px;
+    margin: 8px 0;
+    border: none;
+    cursor: pointer;
+    width: 100%;
+}
+
+/* Add a hover effect for buttons */
+button:hover {
+    opacity: 0.8;
+}
+
+/* Extra style for the cancel button (red) */
+.cancelbtn {
+    width: auto;
+    padding: 10px 18px;
+    background-color: #f44336;
+}
+
+/* Center the avatar image inside this container */
+.imgcontainer {
+    text-align: center;
+    margin: 24px 0 12px 0;
+}
+
+/* Avatar image */
+img.avatar {
+    width: 40%;
+    border-radius: 50%;
+}
+
+/* Add padding to containers */
+.container {
+    padding: 16px;
+}
+
+/* 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/img/box1.jpg → UI/img/box1.jpg b/img/box1.jpg → UI/img/box1.jpg
diff --git a/img/box2.jpg → UI/img/box2.jpg b/img/box2.jpg → UI/img/box2.jpg
diff --git a/img/box3.jpg → UI/img/box3.jpg b/img/box3.jpg → UI/img/box3.jpg
diff --git a/UI/img/download.png b/UI/img/download.png
diff --git a/img/showcase.jpg → UI/img/showcase.jpg b/img/showcase.jpg → UI/img/showcase.jpg
diff --git a/index.html → UI/index.html b/index.html → UI/index.html
diff --git a/UI/login.html b/UI/login.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Login</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./css/style.css" />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+</head>
+<body>
+    <header>
+        <div class="container">
+            <div id="brand">
+                <h1><span class="highlight">Log</span>in</h1>
+            </div>
+            <nav>
+                <ul>
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="registration.html">Register</a></li>
+                    <li><a href="about.html">About</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+
+
+
+    <form action="">
+            <div class="imgcontainer">
+                <img src="./img/download.png" alt="Avatar" class="avatar">
+            </div>
+
+            <div class="container">
+                <label for="username"><b>Username</b></label>
+                <input type="text" placeholder="Enter Username" name="username" required>
+
+                <label for="psw"><b>Password</b></label>
+                <input type="password" placeholder="Enter Password" name="psw" required>
+
+                <button type="submit">Login</button>
+                <label>
+                <input type="checkbox" checked="checked" name="remember"> Remember me
+                </label>
+            </div>
+
+            <div class="container" style="background-color:#f1f1f1">
+                <br>
+                <span class="psw">Forgot <a href="#">password?</a></span>
+                <br>
+                <a href="register.html">Don't have an account? register here</a>
+            </div>
+    </form>
+    </section>
+
+    <footer>
+        <p>Send-IT, Copyright &copy; 2018</p>
+    </footer>
+
+</body>
+</html>