<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Kinku - Template #01</title>

  <!-- ================= MAIN STYLES ================= -->
  <link rel="stylesheet" href="style.css" />

  <!-- ================= DARK THEME (separate file, toggled by button) ================= -->
  <link rel="stylesheet" href="dark.css" />

  <!-- ================= FONT AWESOME (icons) ================= -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    referrerpolicy="no-referrer" />

  <!-- ================= JS AVAILABILITY (helps css know js is available) ================= -->
  <script>document.documentElement.classList.add('js');</script>
</head>

<body>
  <div class="page">

    <!-- ================= HEADER TOPBAR (navigation) ================= -->
    <div class="header-bar" id="sticky-nav">
      <nav class="nav container">
        <a class="brand" href="index.php"><i class="fa-solid fa-globe icon"></i>Website Name</a>

        <!-- ================= MOBILE MENU (only visible on small screens) ================= -->
        <button class="nav-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"
          aria-controls="site-nav">
          <i class="fa-solid fa-bars"></i> Menu
        </button>

        <!-- ================= NAVIGATION ITEMS (copy <li>...</li> for a normal link, <li class="nav-item-has-children">...</li> for a dropdown) ================= -->

        <ul class="nav-links" id="site-nav">
          <li><a href="index.php"><i class="fa-solid fa-house icon"></i>Home</a></li>
          <li><a href="examples.php"><i class="fa-solid fa-table-cells icon"></i>Examples</a></li>

          <li class="nav-item-has-children">
            <a href="#"><i class="fa-solid fa-link icon"></i>Dropdown <i class="fa-solid fa-chevron-down"
                style="font-size: 0.75em; margin-left: 4px;"></i></a>
            <ul class="sub-menu">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </li>

          <li class="nav-item-has-children">
            <a href="#"><i class="fa-solid fa-link icon"></i>Dropdown <i class="fa-solid fa-chevron-down"
                style="font-size: 0.75em; margin-left: 4px;"></i></a>
            <ul class="sub-menu">
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>
          </li>
        </ul>

        <div class="nav-actions">
          <!-- ================= DARK MODE TOGGLE ================= -->
          <button class="nav-dark" type="button" aria-label="Toggle dark mode" aria-pressed="false"
            title="Toggle dark mode">
            <i class="fa-solid fa-moon"></i>
          </button>

          <!-- ================= CTA BUTTON ================= -->
          <a class="nav-cta" href="#">
            <i class="fa-solid fa-plus"></i>
            Button
          </a>
        </div>
      </nav>
    </div>

    <header class="site-header" id="site-header" aria-label="Site header">

      <!-- ================= HEADER ================= -->
      <div class="header-image" aria-label="Header image">
        <div class="header-overlay">
          <div class="container header-content">
            <p class="header-kicker"><i class="fa-solid fa-wand-magic-sparkles icon"></i>Welcome!</p>
            <h1 class="header-title">Your Website Title</h1>
            <p class="header-text"><i class="fa-solid fa-pen-to-square icon"></i>Edit this text inside header.php!</p>
          </div>
        </div>
      </div>

    </header>