<?php include 'header.php'; ?>

<main class="site-main">

  <!-- ================= BASIC CONTENT ================= -->
  <section class="section">
    <div class="container">

      <h2><i class="fa-solid fa-house icon"></i>Home</h2>

      <p>
        Welcome to Kinku's second template! Just like the first one, it's a clean, responsive, and easy-to-edit starter
        kit. I've included
        everything you need: flexible grids, content boxes, sections with subtle separators to keep things organized
        and even Font Awesome icons.
        It also features a large header, a sticky navigation with standard links & dropdowns, and a dark/light mode
        switcher for a comfortable reading experience. Everything is fully responsive and works perfectly on all
        devices.
        <br><br>
        <b>Make sure to check out the <a href="examples.php">example page</a> to see styling examples like sections,
          boxes and grids.</b>
        <br><br>
        Feel free to change it into anything you want! <i class="fa-solid fa-heart icon"></i>
      </p>

      <h2><i class="fa-solid fa-ellipsis icon"></i>Header 2</h2>

      <p>
        <a href="#">link</a>
        <strong>bold</strong>
        <em>italic</em>
        <u>underline</u>
        <s>strike</s>
      </p>

      <h3><i class="fa-solid fa-ellipsis icon"></i>Header 3</h3>

      <blockquote>
        <i class="fa-solid fa-quote-left icon"></i>
        This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua.
      </blockquote>

    </div>
  </section>

  <!-- ================= NEW SECTION ================= -->
  <section class="section">
    <div class="container">

      <h2><i class="fa-solid fa-ellipsis icon"></i>New Section</h2>

      <p>
        <i class="fa-solid fa-caret-right icon"></i>
        Here is an example of a form, just to visualize some ideas of what's possible with this template.
      </p>

      <div class="box">
        <h3><i class="fa-solid fa-pen-to-square icon"></i>Form example</h3>

        <form class="form" action="#" method="post">
          <div class="form-field">
            <label class="form-label" for="name"><i class="fa-solid fa-user icon"></i>Name</label>
            <input class="form-input" type="text" id="name" name="name" />
          </div>

          <div class="form-field">
            <label class="form-label" for="email"><i class="fa-solid fa-envelope icon"></i>Email</label>
            <input class="form-input" type="email" id="email" name="email" />
          </div>

          <div class="form-field">
            <label class="form-label" for="message"><i class="fa-solid fa-message icon"></i>Message</label>
            <textarea class="form-textarea" id="message" name="message"></textarea>
          </div>

          <button class="btn" type="button"><i class="fa-solid fa-paper-plane"></i>Submit</button>
        </form>

      </div>
    </div>
  </section>

</main>

<?php include 'footer.php'; ?>