diff options
| author | oweissbarth | 2014-03-10 16:26:04 +0100 |
|---|---|---|
| committer | oweissbarth | 2014-03-10 16:26:04 +0100 |
| commit | 4cbf137b5160cbd228d84a1c0776cbcea446c443 (patch) | |
| tree | 21b4b64abb25bd8c1354785bb3927126dd68cafe | |
| parent | 196aa2523e3f14131da23ad7afb7686850f84d67 (diff) | |
| download | files.iamfabulous.de-4cbf137b5160cbd228d84a1c0776cbcea446c443.tar.gz | |
initial ui containing header, footer and login panel
| -rw-r--r-- | www/footer.html | 9 | ||||
| -rw-r--r-- | www/header.html | 16 | ||||
| -rw-r--r-- | www/login.php | 14 | ||||
| -rw-r--r-- | www/logo.png | bin | 0 -> 121360 bytes | |||
| -rw-r--r-- | www/style.css | 147 |
5 files changed, 186 insertions, 0 deletions
diff --git a/www/footer.html b/www/footer.html new file mode 100644 index 0000000..03128ea --- /dev/null +++ b/www/footer.html @@ -0,0 +1,9 @@ + <!-- ______________________Content End______________________ --> + </div><!-- div content-area--> + </div><!-- div page-wrap--> + <footer> + <p id="copyright-text"> Copyright Maximilian Möhring und Oliver Weissbarth 2014 </p> + </footer> + </body> +</html> + diff --git a/www/header.html b/www/header.html new file mode 100644 index 0000000..bb47107 --- /dev/null +++ b/www/header.html @@ -0,0 +1,16 @@ +<!Doctype html> +<html> + <head> + <title>VFS</title> + <link rel="stylesheet" href="style.css"> + </head> + + <body> + <div id="page-wrap"> + + <div class="header-bar"> + <a href="http://google.de" class="logo"> </a> + </div> + + <div id="content-area"> + <!-- ______________________Content Start______________________ --> diff --git a/www/login.php b/www/login.php new file mode 100644 index 0000000..e9c839b --- /dev/null +++ b/www/login.php @@ -0,0 +1,14 @@ +<?php include("header.html");?> + + <div class="login-area"> + <h1 class="login-area"> Log in </h1> + <form id="login-form"> + <input type="text" placeholder="username" name="username" id="username-input" class="login-input"> + <input type="password" placeholder="password" name="password" id="password-input" class="login-input"> + + <input type="submit" name="login" id="button-input" class="login-input" value="login"> + <a href="recover-password.php" id="recover-password-link">recover password</a> + </form> + </div> + +<?php include("footer.html");?> diff --git a/www/logo.png b/www/logo.png Binary files differnew file mode 100644 index 0000000..c1be2fa --- /dev/null +++ b/www/logo.png diff --git a/www/style.css b/www/style.css new file mode 100644 index 0000000..8287b0f --- /dev/null +++ b/www/style.css @@ -0,0 +1,147 @@ +/*************************************************************** + General Page Styling +****************************************************************/ +*{ + margin: 0; + padding: 0; +} +html, body{ + height: 100%; + font-family: Impact, Charcoal, sans-serif; +} + + + +/*************************************************************** + Header +****************************************************************/ +div.header-bar{ + background-color: #3083D6; + height: 80px; + width: 100%; + position: absolute; +} + +a.logo{ + display: block; + height: 70px; + width: 70px; + margin-top: 5px; + margin-left: 5px; + background-image: url(./logo.png); + background-repeat:no-repeat; + background-size:66px 66px; + background-color:#3083D6; + background-position: center; + border: 1px solid red; +} + + + +.logo:hover .logo{ + display: block; + background:#98C1EA; + background-image: url(./logo.png); + background-repeat:no-repeat; + background-size:66px 66px; + background-position: center; +} + + + +/************************************************************ + Page-Wrap for sticky footer +*************************************************************/ +#page-wrap{ + margin-bottom: -25px; + width: 100%; + min-height: 100%; +} + +#page-wrap:after{ + content: ""; + display: block; + height: 25px; +} + +/********************************************************** + Content-Area +**********************************************************/ +#content-area{ + height: 100%; + width: 100%; + position: absolute; + margin-bottom: 0; +} + + +/********************************************************* + Login-Form +**********************************************************/ +div.login-area{ + height: auto; + width: 400px; + position: relative; + top: 50%; + transform: translateY(-50%); + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + + margin-left: auto; + margin-right: auto; + vertical-align: middle; + border: 1px solid grey; + padding: 10px; +} + +h1.login-area{ + font-weight: lighter; +} + + +form.login-form{ + +} + +input.login-input{ + box-shadow: 0px 0px 0px; + border-radius: 0; + height: 40px; + font-size: 25px; + margin-top: 15px; + width: 100%; + display:block; +} + +input.login-input:focus{ + background: #D6E0E5 +} +#button-input{ + height: 40px; + width: 120px; + display:inline; +} +#recover-password-link{ + +} + + + + +/****************************************************** + FOOTER +*******************************************************/ +footer{ + height: 25px; + width: 100%; + margin-top: -25px; + background-color:#3083D6; + position:relative; +} + +#copyright-text{ + margin-right: 10px; + text-align: right; + font-size: 12px; + color: white; +} |
