Kirschmanneu64638
/
PR


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							
<!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>