/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Futurish Site</title>
  <link rel="stylesheet" href="style.css">
  <style>
    body {
      body {
  background-color: pink;
  font-family: sans-serif;
}
      margin: 0;
      font-family: 'Verdana', sans-serif;
      background: url('your-background.png') repeat;
      color: #333;
    }
body {
  background-color: pink;
  font-family: sans-serif;
}
    .wrapper {
      display: grid;
      grid-template-columns: 200px 1fr 200px;
      grid-template-rows: auto 1fr auto;
      gap: 10px;
      max-width: 1200px;
      margin: auto;
      padding: 10px;
    }

    header {
      grid-column: 1 / 4;
      background: pink;
      padding: 10px;
      text-align: center;
      border: 2px solid #ccc;
    }

    .banner {
      width: 100%;
      max-height: 200px;
      object-fit: cover;
    }

    .top-links a {
      margin: 0 5px;
      text-decoration: none;
      color: #0066cc;
      font-weight: bold;
    }

    .left-bar, .right-bar {
      background: #f0f8ff;
      padding: 10px;
      border: 2px solid #ccc;
    }

    .music-player {
      background: #fff8fc;
      padding: 5px;
      margin-bottom: 10px;
      border: 1px dashed pink;
    }

    .sidebar h2 {
      font-size: 16px;
      margin-top: 10px;
      border-bottom: 1px dashed #ffb6c1;
    }

    .sidebar ul {
      list-style: none;
      padding-left: 0;
    }

    .sidebar li {
      margin: 5px 0;
    }

    .sidebar a {
      text-decoration: none;
      color: #ff69b4;
    }

    main {
      background: #fff;
      padding: 10px;
      border: 2px solid #ccc;
    }

    .intro, .recent-posts, .about {
      margin-bottom: 20px;
    }

    .recent-posts ul {
      list-style: none;
      padding-left: 0;
    }

    .recent-posts li {
      background: #f9f9f9;
      padding: 5px;
      margin-bottom: 5px;
      border-left: 3px solid #ffb6c1;
    }

    .right-bar section {
      margin-bottom: 15px;
    }

    .right-bar h2 {
      font-size: 16px;
      border-bottom: 1px dashed #aaa;
    }

    .right-bar ul {
      list-style: none;
      padding-left: 0;
    }

    .right-bar li {
      margin: 5px 0;
    }

    footer {
      grid-column: 1 / 4;
      background: #ffe4e1;
      text-align: center;
      padding: 10px;
      font-size: 14px;
      border: 2px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="wrapper">

    <header>
      <img src="your-banner.png" alt="Site Banner" class="banner">
      <nav class="top-links">
        <a href="#">Home</a>
        <a href="#">Love Central</a>
        <a href="#">Feed</a>
        <a href="#">Webring</a>
      </nav>
    </header>

    <aside class="left-bar">
      <div class="music-player">
        <p>🎵 Music may be loud!</p>
        <audio controls>
          <source src="your-music.mp3" type="audio/mpeg">
        </audio>
      </div>

      <nav class="sidebar">
        <h2>navigation</h2>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Me</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">My Art</a></li>
          <li><a href="#">My OCs</a></li>
          <li><a href="#">Shrines</a></li>
          <li><a href="#">Guestbook</a></li>
        </ul>
      </nav>

      <div class="extra-widget">
        <img src="your-sidebar-pic.png" alt="Cute character">
        <p>Write a little sidebar message here!</p>
      </div>
    </aside>

    <main>
      <section class="intro">
        <p>I update my gallery and front page with everything I make as I make it, so check back every now and then if you're interested! 💫</p>
      </section>

      <section class="recent-posts">
        <h2>📝 Recent Blog Posts</h2>
        <ul>
          <li><strong>08/02/2025 —</strong> Survey Results!</li>
          <li><strong>04/22/2025 —</strong> New Art Posted!</li>
          <li><strong>12/21/2024 —</strong> Website Launch!</li>
        </ul>
      </section>

      <section class="about">
        <h2>about my site</h2>
        <p>This site is coded on a 3040x2160 monitor using the Neocities editor. It may look a little janky on other screens. I'm still learning, so your support is appreciated!</p>
      </section>
    </main>

    <aside class="right-bar">
      <section class="status">
        <h2>Status</h2>
        <p>💖 Reached my minimum goal of 5 artworks. So happy!</p>
      </section>

      <section class="calendar">
        <h2>Calendar</h2>
        <img src="your-calendar.png" alt="Calendar">
      </section>

      <section class="connections">
        <h2>Friends & Links</h2>
        <ul>
          <li><a href="#">Promenits</a></li>
          <li><a href="#">Tholia</a></li>
        </ul>
      </section>

      <section class="comments">
        <h2>Comments</h2>
        <p><em>wishing happy happla ✔</em></p>
        <p><em>love everything here omg</em></p>
      </section>
    </aside>

    <footer>
      <p>© 2025 YourSiteName ✿ Coded with love on Neocities</p>
    </footer>

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

