Untitled

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="sheet.css" media="screen" type="text/css">
  <title>
    Tytuł strony
  </title>
  <script type="text/javascript">
    function deleteStyle() {
      document.getElementById("header").className = ""
      document.getElementById("nav").className = ""
      document.getElementById("main").className = ""
      document.getElementById("aside").className = ""
      document.getElementById("footer").className = ""
    }

    function setStyle() {
      document.getElementById("header").className = "azure";
      document.getElementById("nav").className = "azure margin fnav";
      document.getElementById("main").className = "azure margin fmain";
      document.getElementById("aside").className = "azure faside";
      document.getElementById("footer").className = "azure ffooter";
    }
  </script>
</head>

<body>

  <header id="header" class="azure">
    <!-- Page title -->
    <!-- Background color: #EFF -->
    <!-- Border color: #A8A8A8 -->
    <button type="button" onclick="deleteStyle()">Usun style</button>
    <button type="button" onclick="setStyle()">Dodaj style</button>
    <h1>
      Tytuł strony
    </h1>
  </header>

  <nav id="nav" class="azure margin fnav">
    <!--Tutaj menu nawigacyjne / Here the navigation menu -->
    <!-- left & right margin: 25px -->

    <ul>
      <li>
        <a href="">Element 1</a>
      </li>

      <li>
        <a href="">Element 2</a>
      </li>
    </ul>
  </nav>
  <!-- Tutaj treść panelu bocznego / Here the content of the side panel-->

  <aside id="aside" class="azure faside">
    <h1>
      Panel boczny
    </h1>

    <h2>
      Ciekawe odsyłacze
    </h2>

    <ul>
      <li>
        <a href="">Odsyłacz 1</a>
      </li>

      <li>
        <a href="">Odsyłacz 2</a>
      </li>

      <li>
        <a href="">Odsyłacz 3</a>
      </li>
    </ul>
  </aside>

  <main id="main" class="azure margin fmain">
    <!--Tutaj treść strony / Here the content of the page -->

    <h1 class="animate">
      Treść strony
    </h1>

    <pre>
Natenczas Wojski chwycił na taśmie przypięty
Swój róg bawoli, długi, cętkowany, kręty
Jak wąż boa, oburącz do ust go przycisnął,
Wzdął policzki jak banię, w oczach krwią zabłysnął,
Zasunął wpół powieki, wciągnął w głąb pół brzucha
I do płuc wysłał z niego cały zapas ducha,
I zagrał: róg jak wicher, wirowatym dechem
Niesie w puszczę muzykę i podwaja echem.

Umilkli strzelcy, stali szczwacze zadziwieni
Mocą, czystością, dziwną harmoniją pieni.
Starzec cały kunszt, którym niegdyś w lasach słynął,
Jeszcze raz przed uszami myśliwców rozwinął;
Napełnił wnet, ożywił knieje i dąbrowy,
Jakby psiarnię w nie wpuścił i rozpoczął łowy.

Bo w graniu była łowów historyja krótka:
Zrazu odzew dźwięczący, rześki: to pobudka;
Potem jęki po jękach skomlą: to psów granie;
A gdzieniegdzie ton twardszy jak grzmot: to strzelanie.
  </pre>
  </main>

  <footer id="footer" class="azure ffooter">
    <!-- Tutaj treść stopki / Here the content of the footer -->
    <a href="mailto:your.email.address">Imię Nazwisko</a>
  </footer>
  <!--<script type="text/javascript" src="cw02.js"></script> -->
</body>

</html>