170 lines
4.2 KiB
HTML
170 lines
4.2 KiB
HTML
|
|
||
|
|
<!DOCTYPE HTML >
|
||
|
|
<html lang="de-DE" class="scheme_original">
|
||
|
|
<head>
|
||
|
|
<title>HTML FlexBox Template - Two columns, left menu</title>
|
||
|
|
<meta http-equiv="content-type" content="text/html">
|
||
|
|
<meta name="description" content="Use this HTML basic website layout template with the navigation menu on the left, the main content at the center, the extra stuff on the right.">
|
||
|
|
<meta name="generator" content="HAPedit 3.1">
|
||
|
|
<link rel="canonical" href="https://www.w3docs.com/snippets/html/layout_templates/01.html" />
|
||
|
|
<meta property="og:type" content="website" />
|
||
|
|
<meta property="og:title" content="HTML FlexBox Template - Two columns, left menu" />
|
||
|
|
<meta property="og:description" content="Use this HTML basic website layout template with the navigation menu on the left, the main content at the center, the extra stuff on the right." />
|
||
|
|
<meta property="og:image" content="https://www.w3docs.com/build/images/logo-amp.png" />
|
||
|
|
<meta property="og:image:type" content="image/jpeg" />
|
||
|
|
<meta property="og:image:width" content="192" />
|
||
|
|
<meta property="og:image:height" content="192" />
|
||
|
|
<meta property="og:image:alt" content="W3dcos" />
|
||
|
|
<style type="text/css">
|
||
|
|
html, body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
color: #292929;
|
||
|
|
font: 90% Roboto, Arial, sans-serif;
|
||
|
|
font-weight: 300;
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
padding: 0 10px;
|
||
|
|
line-height: 1.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul li {
|
||
|
|
padding-right: 10px;
|
||
|
|
line-height: 1.6;
|
||
|
|
}
|
||
|
|
|
||
|
|
h3 {
|
||
|
|
padding: 5px 20px;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#header {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#header h1 {
|
||
|
|
height: 80px;
|
||
|
|
line-height: 80px;
|
||
|
|
margin: 0;
|
||
|
|
padding-left: 10px;
|
||
|
|
background: #e0e0e0;
|
||
|
|
color: #292929;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#header a {
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 23px;
|
||
|
|
padding: 10px;
|
||
|
|
color: #006;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#navigation {
|
||
|
|
background: #7cb71c;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#navigation li {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#extra {
|
||
|
|
background: #147FA9;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#footer {
|
||
|
|
background: #42444e;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#footer p {
|
||
|
|
padding: 20px 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#wrapper {
|
||
|
|
float: left;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#content {
|
||
|
|
margin: 0 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#navigation {
|
||
|
|
float: left;
|
||
|
|
width: 25%;
|
||
|
|
margin-left: -100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#extra {
|
||
|
|
float: left;
|
||
|
|
width: 25%;
|
||
|
|
margin-left: -25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div#footer {
|
||
|
|
clear: left;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="container">
|
||
|
|
<div id="header">
|
||
|
|
<h1>EUGEN WEB</h1>
|
||
|
|
<a href="/download/template/1" target="_blank">download Link</a>
|
||
|
|
</div>
|
||
|
|
<div id="wrapper">
|
||
|
|
<div id="content">
|
||
|
|
<p><strong>1. Main Content</strong></p>
|
||
|
|
<h3>Ueberschrift 1 </h3>
|
||
|
|
<p>
|
||
|
|
üüüüü
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
TEXT1.1
|
||
|
|
</p>
|
||
|
|
<h3>Ueberschrift2</h3>
|
||
|
|
<p>
|
||
|
|
TEXT2
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="navigation">
|
||
|
|
<p><strong>2. Navigation Menu</strong></p>
|
||
|
|
<h3>Seiten</h3>
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://www.google.de/" target="_blank">GOOGLE</a></li>
|
||
|
|
|
||
|
|
<li>1</li>
|
||
|
|
<li>2</li>
|
||
|
|
</ul>
|
||
|
|
<h3>Verknupfungen und Bilder </h3>
|
||
|
|
<ul>
|
||
|
|
<li>5</li>
|
||
|
|
<li>6</li>
|
||
|
|
<li>7</li>
|
||
|
|
<li>8</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="extra">
|
||
|
|
<p><strong>3. Additional Stuff</strong></p>
|
||
|
|
<h3>Stichpunkte:</h3>
|
||
|
|
<ul>
|
||
|
|
<li>X</li>
|
||
|
|
<li>X</li>
|
||
|
|
<li>X</li>
|
||
|
|
<li>X</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div id="footer"><p>Footer</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script type="text/javascript">AddFillerLink("content", "navigation", "extra")</script>
|
||
|
|
</body>
|
||
|
|
</html>
|