<section class="gh-content gh-canvas">
<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>
</section>
$btn-bkg: #005670;
html {
background: lighten($btn-bkg,75%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.gh-content {
width: 75%;
margin: 0 auto;
}
.after-content {
width: 75%;
margin: 0 auto;
color: #005670;
font-weight: bold;
background-color: #8db9ca;
padding: 0.25rem 0.5rem;
text-align: center;
border-radius: 5px;
}
View Compiled
// Wait for the HTML document to load
document.addEventListener("DOMContentLoaded", function() {
// Find all elements with class "gh-content"
var elements = document.getElementsByClassName("gh-content");
// Loop through each element and append the HTML code
for (var i = 0; i < elements.length; i++) {
var element = elements[i];
var htmlCode = "<p>This is the HTML code to display after the section.</p>";
// Create a new element with class "after-content" to hold the HTML code
var codeElement = document.createElement("div");
codeElement.className = "after-content";
codeElement.innerHTML = htmlCode;
// Append the new element after the section element
element.parentNode.insertBefore(codeElement, element.nextSibling);
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.