<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>

<script>
// Wait until the main page content is loaded
document.addEventListener('DOMContentLoaded', function() {

const duration = 4 * 1000; // How long the effect lasts in milliseconds (e.g., 3 seconds)
const animationEnd = Date.now() + duration;
const defaults = {
startVelocity: 30,
spread: 360,
ticks: 60,
zIndex: 0,
shapes: ['square', 'circle', 'star'] // Added 'star' here
};

function randomInRange(min, max) {
return Math.random() * (max - min) + min;
}

const interval = setInterval(function() {
const timeLeft = animationEnd - Date.now();

if (timeLeft <= 0) {
return clearInterval(interval);
}

// Calculate particle count based on remaining time
const particleCount = 200 * (timeLeft / duration);

// Fire small bursts from random positions near the left and right top/middle
// since particles fall down, start a bit higher than random
confetti(Object.assign({}, defaults, { particleCount: particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
confetti(Object.assign({}, defaults, { particleCount: particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));

}, 250); // Fire new bursts every 250ms

});
</script>

STEP 1:

Create a custom code block in the section with your pricing blocks and paste the following code:

<div class="pricing-card-container">
<div class="card-content">
<br>
<h3 style="text-align: center;">BASIC</h3>
<h1 style="text-align: center;"><span style="color: #ddb167;">$29</span></h1>
<p style="text-align: center;"><strong><span style="text-decoration: underline;">BEST VALUE</span></strong></p>
<ul>
<li style="text-align: left;">Excepteur sint occaecat velit</li>
<li style="text-align: left;">Excepteur sint occaecat velit</li>
<li style="text-align: left;">Excepteur sint occaecat velit</li>
<li style="text-align: left;">Excepteur sint occaecat velit</li>
<li style="text-align: left;">Excepteur sint occaecat velit</li>
<li style="text-align: left;">Excepteur sint occaecat velit</li>
<li style="text-align: left;">Excepteur sint occaecat velit</li>
<li style="text-align: left;">Excepteur sint occaecat velit</li>
</ul>
<p><a href="/" target="_blank" rel="noopener noreferrer"><button class="btn">CHOOSE BASIC</button></a></p>
</div>

<div class="corner-ribbon ribbon-top-right">
<span class="ribbon-text">Best Value</span>
</div>
</div>

STEP 2:

Navigate to Settings tab of your landing page, then Custom Code, and paste the following code in the CSS Code block:

/* --- Pricing Card Ribbon --- */

.pricing-card-container {
position: relative;
overflow: hidden;
padding: 20px;
margin-bottom: 0px; /* Example spacing */
}

.corner-ribbon {
position: absolute;
padding: 13px 0 ;
background-color: #000000;
color: #ddb167;
text-align: center;
font-weight: bold;
font-size: 21px;
line-height: 1.7;

/* Adjust width based on text length and desired appearance */

width: 280px;
box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2); /* Optional shadow */
z-index: 10; /* Ensure it's above card content */
}

.corner-ribbon .ribbon-text {
display: block; /* Allows transform */
}

/* Top Right Corner */

.ribbon-top-right {
top: 40px; /* Distance from top - adjust as needed */
right: -80px; /* Negative distance from right - adjust as needed */
transform: rotate(45deg);
transform-origin: center; /* Rotate around the center */
}