From 4cbf137b5160cbd228d84a1c0776cbcea446c443 Mon Sep 17 00:00:00 2001 From: oweissbarth Date: Mon, 10 Mar 2014 16:26:04 +0100 Subject: initial ui containing header, footer and login panel --- www/footer.html | 9 ++++ www/header.html | 16 ++++++ www/login.php | 14 ++++++ www/logo.png | Bin 0 -> 121360 bytes www/style.css | 147 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 186 insertions(+) create mode 100644 www/footer.html create mode 100644 www/header.html create mode 100644 www/login.php create mode 100644 www/logo.png create mode 100644 www/style.css (limited to 'www') 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 @@ + + + + + + + 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 @@ + + + + VFS + + + + +
+ +
+ +
+ +
+ 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 @@ + + + + + diff --git a/www/logo.png b/www/logo.png new file mode 100644 index 0000000..c1be2fa Binary files /dev/null and b/www/logo.png differ 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; +} -- cgit v1.2.3