html.de - CSS Menü - Demo #2

by SpiceLab

HTML

<link rel="stylesheet" href="//necolas.github.io/normalize.css/5.0.0/normalize.css">
<div id="main">
 <header><img src="./images/logo.svg" alt="Erlo"></header>
 <nav role="navigation" class="nav nav1">
    <input class="trigger" type="checkbox" id="mainNavButton1">
    <label for="mainNavButton1" onclick>Menu 1</label>
    <ul>
      <li><a class="pink" href="#"><span>Link 1</span></a></li>
      <li><a href="#"><span>Link 2</span></a>
    </ul>
  </nav>
  <nav role="navigation" class="nav nav2">
    <input class="trigger" type="checkbox" id="mainNavButton2">
    <label for="mainNavButton2" onclick>Menu 2</label>
    <ul>
      <li><a href="#"><span>Link 3</span></a></li>
      <li><a href="#"><span>Link 4</span></a>
      <li><a href="#"><span>Link 5</span></a></li>
      <li><a href="#"><span>Link 6</span></a></li>
    </ul>
  </nav>
  <main id="main_startseite">
  <div class="div_left">
   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 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 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. 
  </div>
  </main>
  <footer>
    <div><p>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer<br>Footer</p></div>
   ...

CSS

/* style.css */
body {
  -webkit-animation: bugfix infinite 1s;
  /* needed for checkbox hack */
  background: #ffffff;
  padding: 10px;
  margin: 10px 0;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
/* needed for checkbox hack */
h1, p {
  color: #464637;
}
header {
    height: 10em;
    margin: 0;
}
main {
    margin: 20px;
}
#main {
   margin: 10px;
   border: 1px solid #8b8a88;
   margin: 0 auto;
}
#main_startseite {
   background: url(../images/bg1.svg) no-repeat right center;
   background-repeat: no-repeat;
   background-size: 62% 100%;
}
.div_left { width: 35%; background: #a9c128; padding: 5px;}

footer {
    width: 100%;
    height: 200px;
    display: flex;
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    
}
footer div {
  height: 100%;
  /*width: 50%;*/
  margin: 0;
  padding: 0px;
  background-color: #887e83; 
  background-size: 10% 100%;
  transform: skew(45deg,0);
  margin: 0 5px;
  flex:1;
}
footer div:nth-child(1) {
  background-color: #887e83; 
  /*float:left;*/
  margin-left:100px;
}
footer div:nth-child(2) {
  background-color: #ee2f72; 
  /*float:right;*/
  margin-right:100px;
}
footer div p{
  transform: skew(-45deg);
  margin-left: 30px;
}
@media (min-width:100px) { 
  #main { width: 95%; }
  header { height: 70px; }
  header img { height: 60px; margin: 5px; }
}
@media (min-width:320px) { 
  #main { width: 95%; }
  header { height: 100px; }
  header img { height: 90px; margin: 5px; }
}
@media (min-width:481px)  { 
  #main { width: 95%; } 
  header { height: 120px; }
  header img { height: 100px; margin: 10px; }
}
@media (min-width:641px)  { 
  #main { width: 95%; } 
  header { height: 150px; }
  header img { height: 130px; margin: 10px; }
  
}
@media (min-width:961px)  { 
  #main { width: 90%; } 
  header { height: 180px; }
  header img { height: 160px; margin: 10px; }
}
@media (min-width:1025px) { 
  #main { width: 75%; } 
  header { height: 180px; }
  header img {...