index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Favicon. -->
    <link
      rel="icon"
      type="image/png"
      href="./favicon-96x96.png"
      sizes="96x96"
    />
    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
    <link rel="shortcut icon" href="./favicon.ico" />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./apple-touch-icon.png"
    />
    <link rel="manifest" href="./site.webmanifest" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Anton&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Unkempt:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Michael Jackson</title>
    <meta property="og:title" content="마이클잭슨을 소개합니다" />
    <meta property="og:description" content="허허" />
    <meta
      property="og:image"
      content="https://github.com/dev-practice0/cline0/blob/main/og.png?raw=true"
    />
    />
    <!-- Web Font (Noto Serif KR) -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&display=swap"
      rel="stylesheet"
    />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: unkempt, Raleway;
        background-color: #f8f9fa;
      }
      .hero {
        background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Michael_Jackson_in_1988.jpg/800px-Michael_Jackson_in_1988.jpg");
        background-size: cover;
        background-position: center;
        color: white;
        text-align: center;
        padding: 100px 0;
        position: relative;
      }
      .hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
      }
      .hero-content {
        position: relative;
        z-index: 1;
      }
      .card {
        margin-bottom: 20px;
      }
      .biography-flex {
        display: flex;
        gap: 20px;
      }
      .biography-flex .col-md-4 {
        flex: 0 0 30%; /* Adjust as needed */
      }
      .biography-flex .col-md-8 {
        flex: 1;
      }
    </style>
  </head>
  <body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Michael Jackson</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#biography">Biography</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#albums">Albums</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#videos">Videos</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-content">
        <h1 class="display-4">Michael Jackson</h1>
        <p class="lead">The King of Pop</p>
        <a
          class="btn btn-primary btn-lg"
          href="#biography"
          role="button"
          id="learnMoreBtn"
          >Learn more</a
        >
      </div>
    </section>

    <div class="container mt-5">
      <!-- Biography Section -->
      <section id="biography">
        <h2 class="mb-4">Biography</h2>
        <div class="biography-flex">
          <div class="col-md-4">
            <img
              src="main.jpg"
              alt="Michael Jackson in 1988"
              class="img-fluid rounded"
            />
          </div>
          <div class="col-md-8">
            <p>
              Michael Joseph Jackson (August 29, 1958 – June 25, 2009) was an
              American singer, songwriter, and dancer. Dubbed the "King of Pop",
              he is widely regarded as one of the most significant cultural
              figures of the 20th century and one of the greatest entertainers
              of all time. Jackson was central to the development of pop music,
              dance, and fashion.
            </p>
            <p>
              Jackson's contributions to music, dance, and fashion, along with
              his publicized personal life, made him a global figure in popular
              culture for over four decades. He influenced artists across a
              range of musical genres, and generations of fans worldwide.
            </p>
            <p>
              His albums such as "Thriller," "Bad," and "Dangerous" remain some
              of the best-selling albums of all time. Jackson's impact on music
              and culture is undeniable, and he continues to be celebrated and
              remembered by millions around the world.
            </p>
          </div>
        </div>
      </section>

      <!-- Albums Section -->
      <section id="albums" class="mt-5">
        <h2 class="mb-4">Key Albums</h2>
        <div class="row">
          <div class="col-md-4">
            <div
              class="card album-card"
              data-bs-toggle="modal"
              data-bs-target="#albumModal"
            >
              <img src="thriller.jpg" class="card-img-top" alt="Thriller" />
              <div class="card-body">
                <h5 class="card-title">Thriller (1982)</h5>
                <p class="card-text">
                  The best-selling album of all time, featuring hits like
                  "Billie Jean" and "Beat It."
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div
              class="card album-card"
              data-bs-toggle="modal"
              data-bs-target="#albumModal"
            >
              <img src="bad.png" class="card-img-top" alt="Bad" />
              <div class="card-body">
                <h5 class="card-title">Bad (1987)</h5>
                <p class="card-text">
                  Another iconic album with hits like "Smooth Criminal" and "Man
                  in the Mirror."
                </p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div
              class="card album-card"
              data-bs-toggle="modal"
              data-bs-target="#albumModal"
            >
              <img src="dangerous.jpg" class="card-img-top" alt="Dangerous" />
              <div class="card-body">
                <h5 class="card-title">Dangerous (1991)</h5>
                <p class="card-text">
                  Features hits like "Black or White" and "Remember the Time."
                </p>
                <div
                  class="spinner-border text-primary"
                  role="status"
                  id="albumSpinner"
                  style="display: none"
                >
                  <span class="visually-hidden">Loading...</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- Video Section -->
      <section id="videos" class="mt-5">
        <h2 class="mb-4">Music Videos on YouTube</h2>
        <div id="videoCarousel" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <iframe
                width="560"
                height="315"
                src="https://www.youtube.com/embed/dsUXAEzaC3Q?si=W0iu6ZLqvkOaCT3h"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin"
                allowfullscreen
              ></iframe>
            </div>
            <div class="carousel-item">
              <iframe
                width="560"
                height="315"
                src="https://www.youtube.com/embed/7jTq2FXKr0g?si=ZDd6aMvoOF8D4Dpo"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin"
                allowfullscreen
              ></iframe>
            </div>
            <div class="carousel-item">
              <iframe
                width="560"
                height="315"
                src="https://www.youtube.com/embed/sOnqjkJTMaA?si=niFj_noVWhTnA6K9"
                title="YouTube video player"
                frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin"
                allowfullscreen
              ></iframe>
            </div>
          </div>
          <button
            class="carousel-control-prev"
            type="button"
            data-bs-target="#videoCarousel"
            data-bs-slide="prev"
          >
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button
            class="carousel-control-next"
            type="button"
            data-bs-target="#videoCarousel"
            data-bs-slide="next"
          >
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </section>
    </div>

    <!-- Footer -->
    <footer class="bg-dark text-white text-center py-3 mt-5">
      <p>&copy; 2025 Michael Jackson Fan Page. All rights reserved.</p>
    </footer>

    <!-- Album Modal -->
    <div
      class="modal fade"
      id="albumModal"
      tabindex="-1"
      aria-labelledby="albumModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="albumModalLabel">Album Details</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            More details about the album will be displayed here.
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- Toast container -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
      <div
        id="learnMoreToast"
        class="toast"
        role="alert"
        aria-live="assertive"
        aria-atomic="true"
      >
        <div class="toast-header">
          <strong class="me-auto">Learn More</strong>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="toast"
            aria-label="Close"
          ></button>
        </div>
        <div class="toast-body">You clicked the "Learn more" button!</div>
      </div>
    </div>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const learnMoreBtn = document.getElementById("learnMoreBtn");
        const learnMoreToast = new bootstrap.Toast(
          document.getElementById("learnMoreToast")
        );

        learnMoreBtn.addEventListener("click", () => {
          learnMoreToast.show();
        });

        const albumCards = document.querySelectorAll(".album-card");
        const albumModalBody = document.querySelector(
          "#albumModal .modal-body"
        );
        const albumSpinner = document.getElementById("albumSpinner");

        albumCards.forEach((card) => {
          card.addEventListener("click", () => {
            albumSpinner.style.display = "inline-block";
            albumModalBody.innerHTML = "Loading album details...";
            setTimeout(() => {
              albumSpinner.style.display = "none";
              albumModalBody.innerHTML =
                "Details for " +
                card.querySelector(".card-title").textContent +
                " album.";
            }, 1000); // Simulate loading
          });
        });
      });
    </script>
  </body>
</html>