From 2558fdd0c48eb1690d7eb796359f127e4b0907d2 Mon Sep 17 00:00:00 2001
From: ipaullly <ipaully22@gmail.com>
Date: Wed, 31 Oct 2018 13:07:12 +0300
Subject: [PATCH] Restructure UI directory

---
 UI/css/style.css             | 170 +++++++++++++++++++++++++++++++++++
 {img => UI/img}/box1.jpg     | Bin
 {img => UI/img}/box2.jpg     | Bin
 {img => UI/img}/box3.jpg     | Bin
 UI/img/download.png          | Bin 0 -> 2538 bytes
 {img => UI/img}/showcase.jpg | Bin
 index.html => UI/index.html  |   0
 UI/login.html                |  62 +++++++++++++
 8 files changed, 232 insertions(+)
 create mode 100644 UI/css/style.css
 rename {img => UI/img}/box1.jpg (100%)
 rename {img => UI/img}/box2.jpg (100%)
 rename {img => UI/img}/box3.jpg (100%)
 create mode 100644 UI/img/download.png
 rename {img => UI/img}/showcase.jpg (100%)
 rename index.html => UI/index.html (100%)
 create mode 100644 UI/login.html

diff --git a/UI/css/style.css b/UI/css/style.css
new file mode 100644
index 0000000..d8fd35e
--- /dev/null
+++ 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%;
+    }
+}
\ No newline at end of file
diff --git a/img/box1.jpg b/UI/img/box1.jpg
similarity index 100%
rename from img/box1.jpg
rename to UI/img/box1.jpg
diff --git a/img/box2.jpg b/UI/img/box2.jpg
similarity index 100%
rename from img/box2.jpg
rename to UI/img/box2.jpg
diff --git a/img/box3.jpg b/UI/img/box3.jpg
similarity index 100%
rename from img/box3.jpg
rename to UI/img/box3.jpg
diff --git a/UI/img/download.png b/UI/img/download.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0889f9b3e86eb78b5d795d44cf9ab7e95b9dfc8
GIT binary patch
literal 2538
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
A{Qv*}

literal 0
HcmV?d00001

diff --git a/img/showcase.jpg b/UI/img/showcase.jpg
similarity index 100%
rename from img/showcase.jpg
rename to UI/img/showcase.jpg
diff --git a/index.html b/UI/index.html
similarity index 100%
rename from index.html
rename to UI/index.html
diff --git a/UI/login.html b/UI/login.html
new file mode 100644
index 0000000..4fb0111
--- /dev/null
+++ 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>
\ No newline at end of file