Header

Menu

Main

Letary scrolle imagination surprese

Protonutions

Lorem ipsum dolor sit amet consectetuer Phasellus elit nisl congue in. Tempor dis felis at Nullam nibh augue Integer iaculis hendrerit convallis. Id sapien elit metus eu nibh ligula tempor id Nam augue. Nam justo Integer et ante wisi nascetur nibh Curabitur In libero. Quis habitasse sem quis enim Ut in tortor justo et.

Adipiscing vitae Vivamus urna congue Sed et diam pellentesque sem Vestibulum. Vitae ut dolor sed lacinia laoreet ante ipsum ut eros turpis. Montes dolor Nam aliquam facilisis non consequat odio wisi lorem Suspendisse. Amet id dui elit id auctor dui non auctor Mauris rhoncus. In eleifend adipiscing est semper pretium nulla semper consequat in Sed. Phasellus nibh.

Odio auctor tortor metus id quam vel tortor eget mauris Duis. Pede accumsan magna lorem ut adipiscing convallis hendrerit interdum ut volutpat. Aliquam Suspendisse ridiculus interdum netus nec turpis tincidunt eros tempus ligula. Lacinia quis urna justo ornare tincidunt tincidunt felis et enim condimentum. Vitae sapien nunc convallis pretium porttitor ligula tortor tempus orci malesuada. Elit id Maecenas interdum Phasellus sem.

Ut neque quis dolor neque dictumst amet semper eget adipiscing Phasellus. Nibh dictum Aliquam risus congue ac eros libero velit convallis magna. Libero elit gravida Nullam ligula wisi habitasse Vestibulum elit facilisi faucibus. Turpis adipiscing consequat iaculis eget laoreet Curabitur metus dignissim egestas eget. Vestibulum leo eu porta faucibus tempor eu mauris tortor elit quis. Morbi Ut elit.

Right

Ut neque quis dolor neque dictumst amet semper eget adipiscing Phasellus. Nibh dictum Aliquam risus congue ac eros libero velit convallis magna. Libero elit gravida Nullam ligula wisi habitasse Vestibulum elit facilisi faucibus. Turpis adipiscing consequat iaculis eget laoreet Curabitur metus dignissim egestas eget. Vestibulum leo eu porta faucibus tempor eu mauris tortor elit quis. Morbi Ut elit.

Footer

Výpis kódu


    <!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main right'
    'footer footer footer footer footer footer';
  gap: 0.25em; /* GAP mezera mezi møížkou */
  background-color: #ffffff;
  padding: 0.25em;
  margin: 0 auto;
   width: 86%;
 
  
  }

.grid-container > div {
  background-color: rgba(230, 230, 230, 0.8);
  text-align: left;
  padding: 1.5em;
  font-size: 1.2em;
}

.grid-container h2 {
text-align:center; 
  
  }


.grid-container > div item2, item3, item4 {
   padding: 1.5em;
  
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="item1"><h2>Header</h2></div>
  <div class="item2">
  <h5>Menu</h5>
  <ul>
  <li>Prostorum</li>
  <li>Adiscipialis</li>
  <li>Neque dictumst amet</li>
  <li>Nibh dictum Aliquam</li>
  <li>Habitasse vestibulum elit</li>
  </ul>
  </div>
  <div class="item3">
  <h3>Main</h3>
  <p>Letary scrolle imagination surprese</p>
  <h5>Protonutions</h5>
  <p>Lorem ipsum dolor sit amet consectetuer Phasellus elit nisl congue in. Tempor dis felis at Nullam nibh augue Integer iaculis hendrerit convallis. Id sapien elit metus eu nibh ligula tempor id Nam augue. Nam justo Integer et ante wisi nascetur nibh Curabitur In libero. Quis habitasse sem quis enim Ut in tortor justo et.</p>
<p>Adipiscing vitae Vivamus urna congue Sed et diam pellentesque sem Vestibulum. Vitae ut dolor sed lacinia laoreet ante ipsum ut eros turpis. Montes dolor Nam aliquam facilisis non consequat odio wisi lorem Suspendisse. Amet id dui elit id auctor dui non auctor Mauris rhoncus. In eleifend adipiscing est semper pretium nulla semper consequat in Sed. Phasellus nibh.</p>
<p>Odio auctor tortor metus id quam vel tortor eget mauris Duis. Pede accumsan magna lorem ut adipiscing convallis hendrerit interdum ut volutpat. Aliquam Suspendisse ridiculus interdum netus nec turpis tincidunt eros tempus ligula. Lacinia quis urna justo ornare tincidunt tincidunt felis et enim condimentum. Vitae sapien nunc convallis pretium porttitor ligula tortor tempus orci malesuada. Elit id Maecenas interdum Phasellus sem.</p>
<p>Ut neque quis dolor neque dictumst amet semper eget adipiscing Phasellus. Nibh dictum Aliquam risus congue ac eros libero velit convallis magna. Libero elit gravida Nullam ligula wisi habitasse Vestibulum elit facilisi faucibus. Turpis adipiscing consequat iaculis eget laoreet Curabitur metus dignissim egestas eget. Vestibulum leo eu porta faucibus tempor eu mauris tortor elit quis. Morbi Ut elit.</p>
 </div>  
  <div class="item4">
  <h3>Right</h3>
  <p>Ut neque quis dolor neque dictumst amet semper eget adipiscing Phasellus. Nibh dictum Aliquam risus congue ac eros libero velit convallis magna. Libero elit gravida Nullam ligula wisi habitasse Vestibulum elit facilisi faucibus. Turpis adipiscing consequat iaculis eget laoreet Curabitur metus dignissim egestas eget. Vestibulum leo eu porta faucibus tempor eu mauris tortor elit quis. Morbi Ut elit.</p>
 
  </div>
  <div class="item5"><h2>Footer</h2></div>
</div>

</body>
</html>