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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="png/32x32.png"/>
  <link rel="icon" type="image/png" sizes="16x16" href="png/16x16.png"/>
  <meta name="robots" content="index, follow, max-image-preview:standard">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <!-- <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap"> -->
  <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <script src="images.js" defer></script>
  <script src="script.js" defer></script>
  <title>Foto Suwałki</title>
  <meta name="description" content="Galeria zdjęć przyrody i krajobrazów Suwalszczyzny."/>
  <meta name="keywords" content="zdjęcia, foto, fotografia, przyroda, krajobraz, ptaki, jelenie, sarny, Suwalszczyzna, Suwałki, Wigierski Park Narodowy, Suwalski Park Krajobrazowy, SPK, WPN"/>
  <meta name="author" content="noka" />
  <meta name="copyright" content="Copyright foto.suwalki.pl" />
</head>

<body>
  <noscript>
    <p>Wyświetlenie zawartości wymaga włączenia JavaScript w przeglądarce.</p>
 </noscript>
  <!-- <nav class="navbar"> -->
  <nav class="navbar">
    <div class="hamburger-menu">
      <div class="line line-1"></div>
      <div class="line line-2"></div>
      <div class="line line-3"></div>
    </div>
    <div class="navbar-container">
      <img class="logo" src="svg/logo.svg" title="O stronie Foto Suwałki" alt="LOGO FOTO SUWAŁKI">
      <ul class="nav-list">
        <li class="nav-item"><a href="#" class="nav-link">NOWE</a></li>
        <li class="nav-item"><a href="#" class="nav-link active-link">KRAJOBRAZ</a></li>
        <li class="nav-item"><a href="#" class="nav-link">PTAKI</a></li>
        <li class="nav-item"><a href="#" class="nav-link">SSAKI</a></li>
        <li class="nav-item"><a href="#" class="nav-link">PRZYRODA</a></li>
        <!-- <li class="nav-item"><a href="#" class="nav-link">INNE</a></li> -->
      </ul>
      <fieldset>
        <legend>OPISY ZDJĘĆ</legend>
        <label class="switch" for="description-toggle">
          <input type="checkbox" id="description-toggle" checked>
          <div>
            <span class="desc-show">POKAŻ</span>&nbsp;/&nbsp;<span class="desc-hide">UKRYJ</span>
          </div>
        </label>
      </fieldset>
      <div class="socials">
        <!-- dodać  -->
      </div>
    </div>
  </nav>

  <section>
    <div class="about">
      <div class="about-container">
        <h1>FOTO SUWAŁKI</h1>
        <p>Autorska galeria zdjęć prezentujących przyrodę i krajobraz Suwalszczyzny. </p>
        <p>Zdjęcia umieszczone zostały w kategoriach tematycznych, zgodnie z nazwami odnośników. W menu możesz wyłączyć lub włączyć wyświetlane opisy zdjęć<span class="about-hide-mob-info">, natomiast w prawym górnym rogu witryny możesz włączyć pełny widok zdjęć. Po skierowaniu kursora w dół stony pojawią się miniatury ułatwiające nawigację po galerii</span>. Miłego oglądania!</p>
        <!-- <p></p> -->
        <img class="kontakt" src="svg/kontakt.svg" title="kontakt" alt="kontakt">
        <!-- <p></p> -->
      </div>

    </div>
  </section>

  <section>
    <div class="fullscreen">
      <svg class="fullscreen-icon" id="fullscreen-on" viewBox="0 0 32 32">
        <path d="M4 12 L4 4 12 4 M20 4 L28 4 28 12 M4 20 L4 28 12 28 M28 20 L28 28 20 28" />
      </svg>
      <svg class="fullscreen-icon d-none" id="fullscreen-off" viewBox="0 0 32 32">
        <path d="M4 12 L12 12 12 4 M20 4 L20 12 28 12 M4 20 L12 20 12 28 M28 20 L20 20 20 28" />
      </svg>
    </div>
  </section>

  <section>
    <div class="mobile-header">
      <div class="mobile-gallery-title"><span data-mobile-gallery-title>KRAJOBRAZ</span></div>
    </div>
  </section>

  <section>
    <div class="mobile-container">
      <ul data-mobile-img>
      </ul>
    </div>
  </section>

  <section>
    <div class="carousel" data-carousel>
      <button class="carousel-button prev" data-carousel-button="prev" aria-label="prev"></button>
      <button class="carousel-button next" data-carousel-button="next" aria-label="next"></button>
      <ul data-slides>
      </ul>
    </div>
  </section>

  <section>
    <div class="thumbs-carousel is-open" data-thumbs-carousel>
      <div class="inner-thumbs">
        <ul data-thumbs-slides>
        </ul>
      </div>
    </div>
  </section>

  <section>
    <div class="footer"></div>
  </section>
</body>

</html>