Download free tribute landing page source code built with HTML, Tailwind CSS, and JavaScript. Easy to edit and perfect for personal or historical projects.
Table of Contents
Are you looking to create a beautiful tribute landing page for someone special, like a leader, teacher, or loved one? You’re in the right place! In this guide, you’ll learn how to create a free tribute landing page using HTML, Tailwind CSS, and JavaScript. Whether you're building a tribute to honor someone’s legacy or showcasing a special memory, this template is a perfect starting point.
It’s easy to use, beginner-friendly, and fully responsive on all devices.
Prerequisites:
Before you begin, make sure you have:
- A basic understanding of HTML and CSS
- VS Code or any code editor installed
- Internet connection to use the Tailwind CDN
- A browser (Chrome, Edge, etc.) to test the page
Source Code
Step 1 (HTML Code):
First, we start with the basic structure of the webpage using HTML. We’ll design the layout with Tailwind CSS for styling and use the GSAP ScrollTrigger plugin for scroll animations.
Copy and paste the below HTML code into your index.html file:
Step 2 (CSS Code):
Next, let’s add some custom styles to enhance the design. While Tailwind takes care of most of the layout, we’ll use plain CSS for extra effects like custom cursor, hero animation, and gallery spacing.
Paste the following code into your styles.css file:
:root {
--bg-color: #0d0d0d;
--primary-text: #e0e0e0;
--secondary-text: #a0a0a0;
--accent-color: #d4af37;
--panel-bg: #1a1a1a;
}
body {
background-color: var(--bg-color);
color: var(--primary-text);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6,
.serif {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
}
.accent-text {
color: var(--accent-color);
}
.border-accent {
border-color: var(--accent-color);
}
/* Hero Section */
.hero {
height: 100vh;
position: relative;
overflow: hidden;
}
.hero-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: -1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to top,
rgba(13, 13, 13, 1) 5%,
rgba(13, 13, 13, 0.7) 50%,
rgba(13, 13, 13, 0.2) 100%
);
}
.hero-content h1 span {
display: inline-block;
}
/* General Section Styling */
.content-section {
padding: 10rem 0;
position: relative;
}
/* Horizontal Scroll Section */
.horizontal-scroll-section {
overflow: hidden;
padding: 0;
}
.panels-container {
width: 400%;
height: 100vh;
display: flex;
flex-wrap: nowrap;
}
.panel {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
position: relative;
background-size: cover;
background-position: center;
}
.panel-content {
background-color: rgba(13, 13, 13, 0.7);
padding: 2rem;
border-radius: 0.5rem;
max-width: 500px;
text-align: center;
}
/* Gallery */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.gallery-item {
overflow: hidden;
border-radius: 0.5rem;
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-item:hover img {
transform: scale(1.1);
}
/* Quote Section */
.quote-section {
min-height: 80vh;
}
/* Custom Cursor */
.cursor {
position: fixed;
width: 20px;
height: 20px;
border: 1px solid var(--accent-color);
border-radius: 50%;
left: 0;
top: 0;
pointer-events: none;
transform: translate(-50%, -50%);
transition: width 0.2s, height 0.2s;
z-index: 9999;
}
.cursor.hovered {
width: 40px;
height: 40px;
background-color: rgba(212, 175, 55, 0.2);
} Step 3 (JavaScript Code):
Finally, let’s bring the page to life using JavaScript. We’ll add animations using GSAP ScrollTrigger, and also build a custom cursor for a modern interactive effect.
Paste the following code into your script.js file:
document.addEventListener('DOMContentLoaded', () => {
gsap.registerPlugin(ScrollTrigger);
const cursor = document.querySelector('.cursor');
window.addEventListener('mousemove', (e) => {
gsap.to(cursor, { duration: 0.2, x: e.clientX, y: e.clientY });
});
document
.querySelectorAll('a, button, .gallery-item, .panel')
.forEach((el) => {
el.addEventListener('mouseenter', () => cursor.classList.add('hovered'));
el.addEventListener('mouseleave', () =>
cursor.classList.remove('hovered')
);
});
gsap.from('.hero-content h1 span', {
y: 100,
opacity: 0,
stagger: 0.05,
duration: 1.5,
ease: 'power4.out',
delay: 0.5,
});
gsap.from('#hero-subtitle', {
opacity: 0,
y: 20,
duration: 1,
delay: 1.5,
});
gsap.from('#intro-text', {
scrollTrigger: {
trigger: '#intro-text',
start: 'top 80%',
},
opacity: 0,
y: 50,
duration: 1.5,
ease: 'power3.out',
});
gsap.to('#formative-img', {
yPercent: -20,
ease: 'none',
scrollTrigger: {
trigger: '#formative-img',
start: 'top bottom',
end: 'bottom top',
scrub: true,
},
});
gsap.to('#voice-img', {
yPercent: -20,
ease: 'none',
scrollTrigger: {
trigger: '#voice-img',
start: 'top bottom',
end: 'bottom top',
scrub: true,
},
});
const panels = gsap.utils.toArray('.panel');
gsap.to(panels, {
xPercent: -100 * (panels.length - 1),
ease: 'none',
scrollTrigger: {
trigger: '.horizontal-scroll-section',
pin: true,
scrub: 1,
snap: 1 / (panels.length - 1),
end: () => '+=' + document.querySelector('.panels-container').offsetWidth,
},
});
gsap.from('.gallery-item', {
scrollTrigger: {
trigger: '.gallery-grid',
start: 'top 80%',
},
opacity: 0,
y: 50,
stagger: 0.1,
duration: 1,
});
const quote = document.getElementById('quote-text');
const words = quote.innerText.split(' ');
quote.innerHTML = words.map((word) => `${word}`).join(' ');
gsap.fromTo(
quote.querySelectorAll('span'),
{ opacity: 0.1 },
{
opacity: 1,
duration: 1,
stagger: 0.1,
scrollTrigger: {
trigger: quote,
start: 'top 70%',
end: 'center 40%',
scrub: true,
},
}
);
// --- General Fade-in for other sections ---
const sections = document.querySelectorAll('.content-section > div');
sections.forEach((section) => {
gsap.from(section, {
scrollTrigger: {
trigger: section,
start: 'top 85%',
toggleActions: 'play none none none',
},
opacity: 0,
y: 60,
duration: 1.2,
ease: 'power3.out',
});
});
// --- 5. Star Canvas Animation ---
const canvas = document.getElementById('star-canvas');
const ctx = canvas.getContext('2d');
let stars = [];
let canvasSize;
function resizeCanvas() {
canvasSize = canvas.offsetWidth;
canvas.width = canvasSize;
canvas.height = canvasSize * 0.7;
initStars();
}
function initStars() {
stars = [];
for (let i = 0; i < 200; i++) {
stars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
radius: Math.random() * 1.5,
vx: (Math.random() - 0.5) * 0.2,
vy: (Math.random() - 0.5) * 0.2,
});
}
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(212, 175, 55, 0.8)';
stars.forEach((star) => {
star.x += star.vx;
star.y += star.vy;
if (star.x < 0 || star.x > canvas.width) star.vx = -star.vx;
if (star.y < 0 || star.y > canvas.height) star.vy = -star.vy;
ctx.beginPath();
ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
ctx.fill();
});
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
animate();
});Final Output:
Conclusion:
Creating a tribute landing page using HTML, Tailwind CSS, and JavaScript is a great way to show respect and share the story of someone who inspired you. This free source code gives you a strong base to build something personal and meaningful. The design is responsive, easy to customize, and looks great on all screen sizes.
Whether you're building a tribute to a national hero, a teacher, or a loved one, this page will help you do it with style.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
