integrate this with your sngine

'

Join the Conversation Post Reply

Edy Lee

Admin

Joined: 2024-11-24 00:57:42

2025-06-12 21:40:43

just in case if someone wants to add extra boxes in their landing...

Customer Service

Member

Joined: 2025-05-22 01:19:13

2025-06-13 03:49:50

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yourwebsite.com - Start Earning in 3 Steps</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="hero">
<div class="container">
<h1>Welcome to yourwebsite.com</h1>
<p class="tagline">Start Earning in 3 Simple Steps</p>
<a href="#steps" class="cta-btn">Get Started</a>
</div>
</header>

<section class="steps" id="steps">
<div class="container">
<div class="step purple">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm0 15c-1.623 0-3-1.277-3-2.857 0-.81.713-1.523 1.632-2.19C7.1 9.562 7.6 9 8 9c.4 0 .9.562 1.368 1.953C9.287 11.62 10 12.433 10 13.143c0 1.58-1.377 2.857-3 2.857z"/>
</svg>
</div>
<h2>Step 1: Sign Up</h2>
<p>Create your account and join the Chirp community.</p>
</div>
<div class="step light-green">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-link-45deg" viewBox="0 0 16 16">
<path d="M4.354 11.354a3 3 0 1 1 4.243-4.243l1.9 1.9a3 3 0 0 1 0 4.243 3 3 0 0 1-4.243 0l-1.9-1.9zM5.732 10.243a1 1 0 0 0 1.415 1.415l1.9 1.9a1 1 0 1 0 1.415-1.415l-1.9-1.9a1 1 0 1 0-1.415 1.415zM8 4a3 3 0 1 1 4.243 4.243l-1.9-1.9a3 3 0 1 1-4.243-4.243L8 4z"/>
</svg>
</div>
<h2>Step 2: Connect & Share</h2>
<p>Link your social profiles and start sharing your content.</p>
</div>
<div class="step light-blue">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-currency-dollar" viewBox="0 0 16 16">
<path d="M8 0c-.992 0-1.735.524-2.15 1.304a2.957 2.957 0 0 0-1.113-.212C4.537 1.092 4 1.916 4 3c0 .317.119.613.325.837-.397.061-.68.368-.68.68 0 .147.03.287.085.419A2.985 2.985 0 0 0 4 6c0 1.046.44 1.997 1.153 2.663-.309.255-.59.515-.858.784C3.38 10.238 2 11.489 2 13c0 1.104.896 2 2 2s2-.896 2-2c0-.473.269-.919.63-1.261-.357-.742-.63-1.588-.63-2.439 0-.973.432-1.836 1.152-2.528-.071-.082-.153-.165-.244-.243.455-.568.79-1.23.948-1.908.342-.874.61-1.778.853-2.703A3.976 3.976 0 0 0 8 0z"/>
</svg>
</div>
<h2>Step 3: Start Earning</h2>
<p>Earn rewards and income for your engagement and shares.</p>
</div>
</div>
</section>

<section class="start-earning">
<div class="container">
<div class="start-earning-content">
<h2>Start Earning</h2>
<p>Qualify for monetization, add your links, and watch the revenue roll in.</p>
<a href="#sign-up" class="cta-btn">Sign Up Now</a>
</div>
</div>
</section>

<section class="sign-up" id="sign-up">
<div class="container">
<h2>Ready to Start?</h2>
<p>Sign up now and start your journey with yourwebsite.com!</p>
<a href="#steps" class="cta-btn">Get Started</a>
</div>
</section>

<footer>
<div class="container">
<p>© 2025 yourwebsite.com. All Rights Reserved.</p>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>javascript

document.addEventListener('DOMContentLoaded', () => {
const options = {
root: null,
rootMargin: '0px',
threshold: 0.5
};

const steps = document.querySelectorAll('.step');
const startEarning = document.querySelector('.start-earning');

steps.forEach(step => {
observer.observe(step);
});

observer.observe(startEarning);
});CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
background-color: #f5f5f5;
overflow-x: hidden;
}

.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
}

.hero {
background-color: #6a1b9a; /* Purple */
color: white;
padding: 100px 0;
text-align: center;
}

.hero h1 {
font-size: 3rem;
}

.hero .tagline {
font-size: 1.5rem;
margin: 20px 0;
}

.cta-btn {
background-color: #ff4081; /* Pink */
color: white;
padding: 15px 30px;
border-radius: 30px;
text-decoration: none;
font-size: 1.2rem;
transition: background-color 0.3s ease;
}

.cta-btn:hover {
background-color: #e32d67; /* Darker pink */
}

.steps {
display: flex;
justify-content: space-around;
padding: 50px 0;
background-color: white;
}

.step {
background-color: #ffffff;
border-radius: 10px;
padding: 30px;
width: 30%;
text-align: center;
transition: transform 1s ease-out, opacity 1s ease-out;
opacity: 0;
transform: translateY(100px);
}

.step.visible {
transform: translateY(0);
opacity: 1;
}

.step h2 {
margin: 20px 0;
}

.step .icon svg {
width: 50px;
height: 50px;
}

.start-earning {
background-color: #f3f3f3;
padding: 50px 0;
text-align: center;
}

.start-earning h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}

.start-earning p {
font-size: 1.2rem;
margin-bottom: 20px;
}

.sign-up {
background-color: #ffeb3b;
padding: 50px 0;
text-align: center;
}

footer {
background-color: #333;
color: white;
padding: 20px 0;
text-align: center;
}

footer p {
font-size: 1rem;
}

.step.purple {
background-color: #6a1b9a; /* Purple */
}

.step.light-green {
background-color: #81c784; /* Light Green */
}

.step.light-blue {
background-color: #4fc3f7; /* Light Blue */
}

Edy Lee

Admin

Joined: 2024-11-24 00:57:42

2025-06-13 18:19:07