<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>my scrapbook journal</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">

    <header>
      <h1>Ryleigh’s Journal</h1>
      <p class="tagline">tiny thoughts, cut-out feelings, random obsessions, and things i should probably be doing instead</p>

      <nav>
        <a href="#">home</a>
        <a href="#">entries</a>
        <a href="#">photos</a>
        <a href="#">playlist</a>
        <a href="#">about</a>
      </nav>
    </header>

    <section>
      <span class="cutout">April 2007 energy</span>
      <span class="cutout">scrapbook mess</span>
      <span class="cutout">personal archive</span>

      <h2>Welcome</h2>
      <p>
        This is my little corner of the internet, built like a
        <span class="highlight">messy journal someone actually cares about</span>
        instead of a boring sterile website with commitment issues.
      </p>
    </section>

    <section class="journal-entry">
      <h2>Latest Entry</h2>
      <p class="note">dear diary, today i romanticized my own website for three straight hours</p>
      <p>
        I want this place to feel layered and personal, like old magazine clippings, taped photos,
        handwritten notes in the margins, and pages that look like they’ve been opened a hundred times.
      </p>
    </section>

    <section>
      <div class="polaroid">
        <img src="https://placehold.co/500x300" alt="placeholder image">
        <div class="caption">a memory i refuse to explain</div>
      </div>
    </section>

    <section>
      <div class="note-box">
        things i love lately:<br>
        rainy windows, old paper, eyeliner, weird songs, unfinished poems, and overdecorated websites
      </div>
    </section>

    <footer>
      made with too many tabs open and suspicious levels of determination
    </footer>

  </div>
</body>
</html>