Webpage

Header Sidebars Galerie Platzhalter

by Vloxxity

HTML

<html lang="de">
    
    <body>
        <div id="custom-header">
            <div id="header"> <a href="/index.html">
      <div class="header-item">Domum</div>
    </a>
 <a href="/Vlox">
      <div class="header-item">Vlox</div>
    </a>

            </div>
        </div>
        <div id="sidebar-container">
            <div class="sidebar-menu-left">
                <div class="sidebar-menu-group">
                     <h1>Invidunt</h1>

                    <ul>
                        <li>sadipscing</li>
                        <li>aliquyam</li>
                        <li>takimata</li>
                        <li>hendrerit</li>
                    </ul>
                </div>
                <div class="sidebar-menu-group">
                     <h1>Magna</h1>

                    <ul>
                        <li>consequat</li>
                        <li>delenit</li>
                    </ul>
                </div>
            </div>
            <div class="sidebar-menu-right">
                <div class="sidebar-menu-group">
                     <h1>Gubergren</h1>

                    <ul>
                        <li>vulputate</li>
                        <li>commodo</li>
                        <li>tincidunt</li>
                        <li>consetetur</li>
                    </ul>
                </div>
            </div>
            <div id="content">
                <div class="textblock">At vero eos et accusam et justo duo dolores et ea rebum. Stet
                    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
                    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                    sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
                    sit amet. Lorem ipsum dolor...

CSS

html {
    background: url(http://www.windows-7-wallpapers.com/wallpapers/img24-1920x1200.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: serif;
    font-style: italic;    background-size: cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
body {
  background-size: 100%;
} 
#custom-header {
    height: 32px;
    width: 100%;
    /*background-color: rgb(251, 122, 35);*/
    position:fixed;
    --margin: auto 0;
    z-index:1;
    background: url(http://www.windows-7-wallpapers.com/wallpapers/img24-1920x1200.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: serif;
    font-style: italic;    background-size: cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
a {
    color: #0077cc;
    text-decoration: none;
    cursor: pointer;
}
a:visited {
    /*color: #999999;*/
}
#header {
    width: 1300px;
    --width: 960px;
    height: 32px;
    margin: 0 auto;
    line-height: 30px;
}
#header :hover {
    background-color: rgb(255, 132, 45);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
}
#sidebar-container {
    margin: 0 auto;
    background-color: rgb(240, 240, 240);
    width: 1300px;
    height:900px;
    padding-top:32px;
}
.sidebar-menu-left {
    position:relative;
    left:10px;
    float: left;
}
.sidebar-menu-right {
    position:relative;
    right:10px;
    float: right;
}
.sidebar-menu-group {
    margin-top:10px;
    background-color: rgb(220, 220, 220);
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    width:140px;
    border-radius: 3px;
    hyphens: auto;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-top: 3px;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens:...