commit
3120140ef0
|
|
@ -0,0 +1,90 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Dashboard Test</title>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
|
<meta name="robots" content="noindex,nofollow" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="wrap-all">
|
||||||
|
<div id="wrap-nonfooter-content">
|
||||||
|
<div id="nonfooter-content-container">
|
||||||
|
|
||||||
|
<div id="headerbar">
|
||||||
|
<ol class="vertical-list">
|
||||||
|
<li><span>Willkommen zum Dashboard-Test!</span></li>
|
||||||
|
<li><span class="navi-active">Spruch des Tages</span></li>
|
||||||
|
<li><span>Logge dich ein!</span></li>
|
||||||
|
<li><span>Oder mach etwas!</span></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="padding: 1em; background-color: hsla(0, 0%, 100%, 0.25); border-radius: 5px; color: hsl(0, 0%, 95%); margin-left: 2em; margin-right: 2em; margin-top: 2em; margin-bottom: 1em;">
|
||||||
|
<div style="">
|
||||||
|
<h1>Some random stuff maybe a search bar or some fancy info box?</h1>
|
||||||
|
<p>I do not know what to put here, but it ought to be fun.</p>
|
||||||
|
<p>Well, whatever.</p>
|
||||||
|
</div>
|
||||||
|
<div style="float: right; margin-top: -3.5em;">
|
||||||
|
<input type="text" style="border: 2px solid hsla(0, 0%, 45%, 0.5); width: 25em; font-size: 16pt; border-radius: 5px; padding: 5px; font-family: Sintony;" value="Search ..." />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
<div id="content-grid-container">
|
||||||
|
<div id="content-column-1" class="content-column">
|
||||||
|
<div class="content-container">
|
||||||
|
<h1>Col1</h1>
|
||||||
|
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||||
|
</div>
|
||||||
|
<div class="content-container">
|
||||||
|
<h1>Irgendne Überschrift ...</h1>
|
||||||
|
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="content-column-2" class="content-column">
|
||||||
|
<div class="content-container">
|
||||||
|
<h1>Col2</h1>
|
||||||
|
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||||
|
</div>
|
||||||
|
<div class="content-container">
|
||||||
|
<h1>Irgendne Überschrift ...</h1>
|
||||||
|
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||||
|
</div>
|
||||||
|
<div class="content-container">
|
||||||
|
<h1>Irgendne Überschrift ...</h1>
|
||||||
|
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||||
|
</div>
|
||||||
|
<div class="content-container">
|
||||||
|
<h1>Irgendne Überschrift ...</h1>
|
||||||
|
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="content-column-3" class="content-column">
|
||||||
|
<div class="content-container">
|
||||||
|
<h1>Col3</h1>
|
||||||
|
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird. Desoxyribonukleinsäure ist ein wichtiger Bestandteil der Altpapierverwertungszellulosemaschine. Meine Absätze machen Sinn, denn anders geht es eh nicht.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||||
|
</div>
|
||||||
|
<div class="content-container">
|
||||||
|
<h1>Irgendne Überschrift ...</h1>
|
||||||
|
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||||
|
</div>
|
||||||
|
<div class="content-container">
|
||||||
|
<h1>Irgendne Überschrift ...</h1>
|
||||||
|
<p>Hallo!<br>Ich bin ein langweiliger Blindtext damit der Entwickler sehen kann, wie der ganze Kram in etwa mal aussehen wird.<br>Ein paar Sätze pro Absatz und gut ist! ;-)</p><p>Bitte beachte mich nicht weiter, ich war eh nie wirklich wichtig.</p><p>Achja: Ich grüße alle die mich kennen!<br>Macht's gut!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div> <!-- content-grid-container -->
|
||||||
|
</div> <!-- nonfooter-content-container -->
|
||||||
|
</div><!-- wrap-nonfooter-content -->
|
||||||
|
<div id="footer">
|
||||||
|
<div id="footer-content">
|
||||||
|
<span><p>Project Dashboard - Still in development.</p></span>
|
||||||
|
</div><!-- footer content -->
|
||||||
|
</div><!-- footer -->
|
||||||
|
</div><!-- wrap-all -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,136 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: Sintony;
|
||||||
|
src: url('sintony/Sintony-Regular.ttf');
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: Sintony_Bold;
|
||||||
|
src: url('sintony/Sintony-Bold.ttf');
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* reset padding and margin on elements */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #FF00FF; /* Development only! */
|
||||||
|
font-family: Sintony, sans-serif;
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5 {
|
||||||
|
font-family: Sintony_Bold, sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: 12pt; }
|
||||||
|
h2 { font-size: 11pt; }
|
||||||
|
h3 { font-size: 11pt; }
|
||||||
|
h4 { font-size: 11pt; }
|
||||||
|
h5 { font-size: 11pt; }
|
||||||
|
|
||||||
|
.vertical-list {
|
||||||
|
list-style: none;
|
||||||
|
clear: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-list li {
|
||||||
|
padding-right: 1em;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navi-active {
|
||||||
|
color: hsla(0, 0%, 100%, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-column {
|
||||||
|
float: left;
|
||||||
|
width: 33.3%;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 0em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container {
|
||||||
|
padding-top: 0.3em;
|
||||||
|
padding-bottom: 0.3em;
|
||||||
|
margin: 1em 1em 2em 1em;
|
||||||
|
color: hsla(0, 0%, 10%, 0.9);
|
||||||
|
background-color: hsla(0, 0%, 100%, 0.8);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container h1 {
|
||||||
|
margin-top: 5px; /* see border-radius of .content-container */
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
background-color: hsla(0, 100%, 100%, 0.3);
|
||||||
|
color: hsla(0, 0%, 25%, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-container p {
|
||||||
|
margin: 0.5em 0.75em 1em 0.75em;
|
||||||
|
color: hsla(0, 0%, 5%, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrap-all {
|
||||||
|
overflow: auto; /* without this, the background gets messed up when scrolling down on long pages. */
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
background-color: hsla(0, 0%, 50%, 1);
|
||||||
|
/* epic background image or something like that */
|
||||||
|
background: url('bkg01.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
#wrap-nonfooter-content {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nonfooter-content-container {
|
||||||
|
overflow: auto;
|
||||||
|
padding-bottom: 10em; /* footer height */
|
||||||
|
}
|
||||||
|
|
||||||
|
#headerbar {
|
||||||
|
padding: 0.1em 1em 0.1em 1em;
|
||||||
|
height: 1.75em;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 1.75em;
|
||||||
|
color: hsla(0, 0%, 70%, 0.9);
|
||||||
|
background-color: hsla(0, 0%, 0%, 0.75);
|
||||||
|
font-family: Sintony_Bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content-grid-container {
|
||||||
|
margin-left: 1em;
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer {
|
||||||
|
height: 7em; /* footer height */
|
||||||
|
margin-top: -7em; /* footer height */
|
||||||
|
color: hsla(0, 0%, 90%, 0.9);
|
||||||
|
background-color: hsla(0, 0%, 0%, 0.75);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-content {
|
||||||
|
padding: 1em 1em 1em 1em;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue