<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>My 90s Fan Site</title>
<style>
  /* 90s vibes: fonts, bright colors, tiled background */
  body{
    margin:0;
    font-family: "Comic Sans MS", "Trebuchet MS", sans-serif;
    background-image: url('images/tile.png'); /* small repeating tile gif/png */
    background-repeat: repeat;
    color:#000;
    line-height:1.4;
    padding:20px;
  }

  /* centered container with a beveled frame */
  .container{
    max-width:900px;
    margin:0 auto;
    background: #fff;
    border:6px groove #ffd700; /* chunky 90s border */
    padding:18px;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.15);
  }

  /* retro header */
  .title{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:8px;
  }
  .logo{
    width:96px; height:96px;
    border:4px inset #ccc;
    background:#eee url('images/animated.gif') center/cover no-repeat;
  }
  h1{
    margin:0;
    font-size:40px;
    letter-spacing:2px;
    text-transform:uppercase;
    text-shadow: 2px 2px 0 #ff6ec7, -2px -2px 0 #6efcff;
  }

  /* pixel-ish nav */
  nav{
    margin:10px 0;
    background: linear-gradient(#ffe4f2,#fff);
    padding:6px;
    border:2px solid #000;
  }
  nav a{
    margin-right:12px;
    padding:6px 10px;
    text-decoration:none;
    border:2px outset #ccc;
    background:#f5f5f5;
    color:#000;
    font-weight:bold;
  }
  nav a:hover{ background:#ffd; }

  /* old-school table-like layout using floats */
  .left{
    width:260px;
    float:left;
    margin-right:18px;
    border:2px inset #ddd;
    padding:8px;
    background:#faf7e6;
  }
  .main{
    overflow:hidden; /* clears float */
    padding:8px;
    border:2px inset #ddd;
    background:#fffef8;
  }

  /* bevel buttons */
  .btn{
    display:inline-block;
    padding:6px 12px;
    border:3px outset #bbb;
    background: linear-gradient(#fff,#ddd);
    text-decoration:none;
    color:#000;
    font-weight:bold;
    margin:6px 0;
  }
  .btn:active{ border-style:inset; }

  /* marquee-ish banner (use <marquee> tag for authenticity) */
  .marquee{
    margin:12px 0;
    font-weight:bold;
    padding:6px;
    border:2px solid #000;
    background: linear-gradient(#ffebf7,#fff);
  }

  /* blinking element via CSS (since <blink> is gone) */
  .blink{
    animation: blink 1s steps(1, end) infinite;
  }
  @keyframes blink { 50% { visibility: hidden; } }

  /* visitor counter / guestbook box look */
  .counter{
    font-family: monospace;
    border:2px dashed #000;
    padding:8px;
    display:inline-block;
    background:#fff;
  }

  /* little footer */
  footer{
    margin-top:18px;
    font-size:12px;
    color:#333;
    text-align:center;
  }

  /* tiny responsive tweak so it still looks okay on phones */
  @media(max-width:640px){
    .left{ float:none; width:auto; margin-right:0; }
    .title h1{ font-size:28px; }
  }
</style>
</head>
<body>
  <div class="container">
    <div class="title">
      <div class="logo" aria-hidden="true"></div>
      <h1>MY RAD 90s SITE</h1>
    </div>

    <div class="marquee">
      <!-- Using <marquee> for authentic 90s style. It's deprecated but classic. -->
      <marquee behavior="alternate" scrollamount="6">WELCOME — NEW GIFS ADDED! <span class="blink">*NEW*</span></marquee>
    </div>

    <nav>
      <a href="#">Home</a>
      <a href="#">Fanart</a>
      <a href="#">Downloads</a>
      <a href="#">Guestbook</a>
      <a class="btn" href="#">Link Exchange</a>
    </nav>

    <div class="left">
      <h3>About Me</h3>
      <p>Hi! I'm a huge fan of retro stuff. I collect animated GIFs, midi files, and rave about pixel fonts.</p>

      <h4>Links</h4>
      <ul>
        <li><a href="#">My GeoCities</a></li>
        <li><a href="#">Old Blog</a></li>
        <li><a href="#">Downloads</a></li>
      </ul>

      <p class="counter">Visitors: 001234</p>
    </div>

    <div class="main">
      <h2>Cool GIFs</h2>
      <p>
        <img src="images/90s-anim.gif" alt="wavey gif" style="max-width:100%; border:4px groove #ff9;">
      </p>

      <h3>Midi of the Day</h3>
      <p><em>Play midi in a new tab or embed using a plugin—back in the day this auto-played!</em></p>

      <h3>Guestbook</h3>
      <p>Sign my guestbook! (Imaginary link, but feels right.)</p>

      <hr>

      <p style="font-size:11px;"><strong>Tip:</strong> Want the 90s more authentic? add a visitor counter GIF, a guestbook CGI, or a guestbook form that posts to a text file on your server.</p>
    </div>

    <div style="clear:both"></div>

    <footer>
      <p>Page created in 1999 — recreated in spirit. <br> <small>Best viewed in Netscape 4 / Internet Explorer 5 (kidding).</small></p>
    </footer>
  </div>
</body>
</html>
