<div id="lightbox">
    <span class="close">&times;</span>
    <p>This is where you may put an exciting annoucement! <a class="signup-btn" href="#">Read More</a></p>
  </div>

<section class="gh-content gh-canvas">
      <h1>Introduction</h1>
        <p>The Caribbean Islands are renowned for their breathtaking beauty, crystal-clear turquoise waters, pristine white sandy beaches, and vibrant culture. With so many stunning destinations to choose from, it can be challenging to narrow down your choices. Whether you're seeking a romantic getaway, an adventurous escape, or simply a place to relax and unwind, the Caribbean has it all. In this article, I will present the 20 most beautiful Caribbean islands that deserve a spot on your bucket list. From the popular favorites to hidden gems, these islands will captivate you with their natural wonders, rich history, and warm hospitality.</p>
      <h2>When Is the Shoulder Season?</h2>
<p>The shoulder season refers to the period between the peak season and the off-season. It is characterized by fewer crowds and milder weather, making it an attractive option for solo travelers seeking a balance between favorable conditions and cost savings. The specific timing of the shoulder season varies depending on the destination, but generally, it falls just before or after the high season.</p>
    </section>

#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  display: none;
  text-align: center;
  z-index: 9999;
}

#lightbox p {
  /* Add custom styling here */
}

#lightbox a.signup-btn {
  background-color: #0085ad;
  border: 1px solid #005670;
  padding: 0.5rem 0.75rem;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

#lightbox a.signup-btn:hover {
  background-color: #005670;
  border: 1px solid #005670;
  padding: 0.5rem 0.75rem;
  color: #fff;
  text-decoration: none;
}

#lightbox .close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
}

window.addEventListener('DOMContentLoaded', function() {
  // Set options for the lightbox appearance
  var triggerType = 'time'; // 'time' or 'scroll'
  var timeDelay = 5000; // 5 seconds
  var scrollPercentage = 50;

  // Set styles for the lightbox
  var backgroundColor = '#8db9ca';
  var textColor = '#000000';
  var borderBottom = '1px solid #0085ad';
  var padding = '0.25rem';

  // Check the trigger type and show the lightbox accordingly
  if (triggerType === 'time') {
    setTimeout(showLightbox, timeDelay);
  } else if (triggerType === 'scroll') {
    window.addEventListener('scroll', handleScroll);
  }

  // Function to display the lightbox
  function showLightbox() {
    var lightbox = document.getElementById('lightbox');
    lightbox.style.display = 'block';
    lightbox.style.backgroundColor = backgroundColor;
    lightbox.style.color = textColor;
    lightbox.style.borderBottom = borderBottom;
    lightbox.style.padding = padding;

    var closeButton = document.querySelector('.close');
    closeButton.addEventListener('click', function() {
      lightbox.style.display = 'none';
    });

    var signupButton = document.getElementById('signup-btn');
    signupButton.addEventListener('click', function() {
      // Handle sign-up button click event
    });
  }

  // Function to handle scroll event
  function handleScroll() {
    var scrollPosition = window.innerHeight + window.pageYOffset;
    var documentHeight = document.body.scrollHeight;
    var reachedScrollPercentage = (scrollPosition / documentHeight) * 100 >= scrollPercentage;

    if (reachedScrollPercentage) {
      showLightbox();
      window.removeEventListener('scroll', handleScroll);
    }
  }
});