Untitled

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Laman Kirani</title>
  <style>
    body {
      margin: 0;
      font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
        'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      background: url('https://files.catbox.moe/hr7d3o.jpeg') no-repeat center center fixed;
      background-size: cover;
    }

    .container {
      max-width: 700px;
      margin: 50px auto;
      background: #5E1104;
      border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAAAAXNSR0IArs4c6QAAAXtJREFUeF7t2sEJAlEUxdA/tVqXtSpYgCFwGVDiOlz0+HQ11+Oc1+k1E7gCnVl+hgLdegY69gw00LXAeK//0EDHAuO5LjTQscB4rgsNdCwwnutCAx0LjOe60EDHAuO5LjTQscB4rgsNdCwwnutCAx0LjOe60EDHAuO5LjTQscB4rgsNdCwwnrv9Qp/nXOPP8HXu7keNAh1/u4EG6gT6yTsvrANFIhcE6rywDhSJXBCo88I6UCRyQaDOC+tAkcgFgTovrANFIhcE6rywDhSJXBCo88I6UCRyQaDOC+tAkcgFgTovrANFIhcE6rywDhSJXBCo88I6UCRyQaDOC+tAkcgFfw/qOH6vvv1RnN8jcu84UOeFdaBI5IJAnRfWgSKRCwJ1XlgHikQuCNR5YR0oErkgUOeFdaBI5IJAnRfWgSKRCwJ1XlgHikQuCNR5YR0oErkgUOeFdaBI5IJAnRfWgSKRCwJ1XlgHikQuCNR5YR0oErkgUOeFdaBI5II3PWWsfdvC8aUAAAAASUVORK5CYII=") 28 / 28px / 0 round;
      border-width: 28px;
      border-style: solid;
      padding: 26px;
      position: relative;
      color: white
    }

    /* SECTION 1: Profile */
    .profile {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .profile-left img {
      width: 200px;
      height: auto;
    }

    .profile-right {
      text-align: right;
      width: 480px;
    }

    .profile-right img {
      width: 150px;
    }

    .profile-name {
      margin-top: 1px;
    }

    /* SECTION 2: Paragraph + Picture */
    .text-image {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 20px 0;
    }

    .text-image img {
      width: 300px;
      border-radius: 8px;
    }

    .text-image .text {
      flex: 1;
      margin-right: 20px;
    }

    /* SECTION 3: Icons + Explanation */
    .icon-section {
      display: flex;
      flex-direction: column;
    }

    .icon-section h2 {
      margin-bottom: 15px;
    }

    .content {
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }

    .icons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      max-width: 400px;
    }

    .icons img {
  width: 100px;
  height: 100px;   /* tambahin biar jadi persegi dulu */
  object-fit: cover; /* biar gambar nggak gepeng */
  cursor: pointer;
  border-radius: 50%; /* bikin bulet */
}

    .explanation {
      flex: 1;
      padding: 15px;
      border: 1px solid #ccc;
      min-height: 80px;
      background: #f9f9f9;
      color: black;
    }

    /* SECTION 4: Gallery Marquee */
   /* --- Gallery --- */
.marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.marquee-content {
  display: flex;
  gap: 20px;
  flex: 0 0 auto;
  animation: scroll 15s linear infinite;
  will-change: transform;
  width: max-content; /* makes sure width expands to fit all items */
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* shift by half (one full set width) */
  }
}


}

.gallery h2 {
  margin: 30px 0 20px 0; text-align: center;
}

.gallery-item { flex: 0 0 auto; text-align: center; p {font-size: 12px;}; padding: 5px 0; }

/* Pause entire row on hover */
.marquee-content:hover {
  animation-play-state: paused;
}

/* Pop-out effect only on gallery, not lightbox */
.gallery img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.1);
  z-index: 2;
}

/* Disable hover zoom inside lightbox */
#lightbox img:hover {
  transform: none !important;
}


/* Fullscreen overlay */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;          /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#lightbox img {
  width: auto;
  height: auto;
  max-width: 95%;
  max-height: 95%;
  border-radius: 0;   /* no soft edges */
  box-shadow: none;   /* remove shine */
  animation: fadeIn 0.3s ease;
}


@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

  </style>
</head>
<body>

  <div class="container">
    <!-- SECTION 1: Profile -->
    <section class="profile">
      <div class="profile-left">
        <img src="https://files.catbox.moe/251rm0.jpeg" alt="Profile Picture">
      </div>
      <div class="profile-right">
        <a href="kelompok7">
          <img src="https://files.catbox.moe/j9wsia.png" alt="Team Logo">
        </a>
        <h1 class="profile-name">Kirani Aysa Radyashita</h1>
        <p>Haii semua, kenalin gua Kirani. Gua tinggal di Bogor.
        Gua berasal dari SMAN 3 Bogor. Gua masuk ADV karena liat di Twitter seru banget banyak cosplay-nya, jadi dipilih deh. </p>
      </div>
    </section>

    <!-- SECTION 2: Paragraph + Picture -->
    <section class="text-image">
      <div class="text">
        <h2>Siapa sih Kirani?</h2>
        <p>Gua orangnya introvert banget, fyi MBTI gua itu INFP-T dan introvertnya tuh 87%.
        Tapi sebenernya gua anaknya seneng banget main dan jelajahin tempat-tempat baru. Jadi sebenernya cuma kaya butuh waktu pemanasan dikit sama orang baru.
        Funfact: gua tuh gak bisa banget makan pedes.</p>
      </div>
      <img src="https://files.catbox.moe/55nawm.jpeg" alt="Section Image">
    </section>

    <!-- SECTION 3: Icons + Explanation -->
    <section class="icon-section">
      <h2>Hobi & Interests</h2>
      <div class="content">
        <div class="icons">
          <img src="https://files.catbox.moe/ndyprt.png" alt="Icon 1" onclick="setExplanation('Suka banget nonton anime, drakor, western movie, dll.')">
          <img src="https://e7.pngegg.com/pngimages/4/438/png-clipart-spotify-logo-spotify-mobile-app-computer-icons-app-store-music-free-icon-spotify-miscellaneous-logo.png" alt="Icon 2" onclick="setExplanation('Pokoknya gak bisa kuping kosong, harus ada earphone terus.')">
          <img src="https://i.pinimg.com/1200x/35/a0/55/35a055e60fbe89b9cb7af328be91eb74.jpg" alt="Icon 3" onclick="setExplanation('Selain nonton sama dengerin lagu, gua juga suka banget baca novel di waktu senggang.')">
        </div>
        <div class="explanation" id="explanation-box">
         click one of the icon please.
        </div>
      </div>
    </section>

    <!-- SECTION 4: Gallery Marquee -->
    <section class="gallery"> <h2>Gallery</h2>
    <div class="marquee">
  <div class="marquee-content">
    <!-- Original set -->
        <div class="gallery-item"><img src="https://files.catbox.moe/dbsuji.jpeg" alt="Gallery 1"><p>jakun with ADV</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/u0bnps.jpeg" alt="Gallery 2"><p>drinkssss</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/qo3a6j.jpeg" alt="Gallery 3"><p>picnic in krb</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/rvo48c.jpeg" alt="Gallery 4"><p>duo cimit</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/2yrr4i.jpeg" alt="Gallery 5"><p>concert with higschool friends</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/qo3a6j.jpeg" alt="Gallery 6"><p>HOGARTH</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/pqk150.jpeg" alt="Gallery 7"><p>first time danau UI</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/to8frc.jpeg" alt="Gallery 8"> <p>last day of highschool</p></div>

        <!-- Duplicate set for seamless scroll -->
        <div class="gallery-item"><img src="https://files.catbox.moe/dbsuji.jpeg" alt="Gallery 1"><p>jakun with ADV</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/u0bnps.jpeg" alt="Gallery 2"><p>drinkssss</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/qo3a6j.jpeg" alt="Gallery 3"><p>picnic in krb</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/rvo48c.jpeg" alt="Gallery 4"><p>duo cimit</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/2yrr4i.jpeg" alt="Gallery 5"><p>concert with higschool friends</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/qo3a6j.jpeg" alt="Gallery 6"><p>HOGARTH</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/pqk150.jpeg" alt="Gallery 7"><p>first time danau UI</p></div>
        <div class="gallery-item"><img src="https://files.catbox.moe/to8frc.jpeg" alt="Gallery 8"> <p>last day of highschool</p></div>
  </div>
</div>

<!-- Lightbox Overlay -->
<div id="lightbox" onclick="closeLightbox()">
  <img src="" alt="Fullscreen Image">
</div>
  </section>

  </div>

  <script>
    function setExplanation(text) {
      document.getElementById('explanation-box').innerText = text;
    }

      function openLightbox(src) {
    const lightbox = document.getElementById('lightbox');
    const img = lightbox.querySelector('img');
    img.src = src;
    lightbox.style.display = 'flex';
  }

  function closeLightbox() {
    document.getElementById('lightbox').style.display = 'none';
  }

  // attach click to gallery images
  document.querySelectorAll('.gallery img').forEach(img => {
  img.addEventListener('click', () => {
    openLightbox(img.dataset.full || img.src);
  });
});

  </script>
</body>
</html>