INterior is a free, copy-paste ready interior design landing page template built with
pure vanilla HTML, CSS, and JavaScript — no frameworks, no libraries, no npm install required.
It features an animated shifting gradient background, 50 dynamically generated
floating particles created with JavaScript, a glassmorphism sticky navbar
using CSS backdrop-filter: blur(20px) that darkens on scroll, three
parallax decorative circles that track mouse movement, a gradient glow headline,
ripple-effect CTA buttons, an animated scroll indicator, and a fully
responsive hamburger mobile menu — all in a single self-contained HTML file.
This project is an excellent demonstration of professional vanilla JavaScript and CSS techniques:
dynamic DOM element creation for the particle system, scroll event listeners for the navbar,
mousemove parallax with speed multipliers per element, programmatic ripple effects
with getBoundingClientRect() precision, and CSS cubic-bezier easing
throughout. Perfect as a real interior design website template, a frontend learning project,
or a portfolio showcase of advanced CSS and JS skills.
Open the file in VS Code. Update the hero headline DESIGN YOUR HOUSE to your
brand tagline. Change the nav links (Home, Bedroom, Dining, Kitchen) to your site sections.
Replace the logo text INterior with your business name.
To change the teal color scheme, find-replace #17a2b8 with your primary brand
color and #00d4ff with a lighter tint.
Add new sections below the <section class="hero"> for portfolio galleries,
services grid, testimonials, team bios, and contact forms to build a complete website.
This template is ideal for: interior design studio websites, home renovation service landing pages, architecture firm hero sections, furniture brand websites, real estate developer landing pages, frontend portfolio projects, CSS JavaScript learning exercises, and any project that needs a dark, animated, modern aesthetic with glassmorphism UI elements.
Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INterior - Design Your House</title>
<style>
* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;overflow-x:hidden;background:#000;}
.animated-bg {position:fixed;width:100%;height:100%;background:linear-gradient(45deg,#000000,#1a1a1a,#2d2d2d,#1a1a1a);background-size:400% 400%;animation:gradientShift 15s ease infinite;z-index:-1;}
@keyframes gradientShift {0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.particles {position:fixed;width:100%;height:100%;z-index:0;pointer-events:none;}
.particle {position:absolute;width:3px;height:3px;background:rgba(23,162,184,0.3);border-radius:50%;animation:float 20s infinite;}
@keyframes float {0%,100%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) translateX(50px);opacity:0}}
.hero {min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
nav {position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:2rem 5rem;background:rgba(0,0,0,0.2);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(255,255,255,0.1);z-index:1000;transition:all .4s cubic-bezier(.4,0,.2,1);}
nav.scrolled {background:rgba(0,0,0,0.95);padding:1.2rem 5rem;box-shadow:0 10px 30px rgba(0,0,0,0.5);}
.logo {font-size:2rem;font-weight:700;color:white;letter-spacing:2px;cursor:pointer;transition:all .3s ease;position:relative;}
.logo::before {content:'';position:absolute;bottom:-5px;left:0;width:100%;height:2px;background:linear-gradient(90deg,#17a2b8,#00d4ff);transform:scaleX(0);transition:transform .3s ease;}
.logo:hover::before {transform:scaleX(1);}
.nav-links {display:flex;gap:3rem;list-style:none;}
.nav-links a {color:rgba(255,255,255,0.9);text-decoration:none;font-size:0.95rem;font-weight:600;letter-spacing:1px;transition:all .3s ease;position:relative;padding:.5rem 0;}
.nav-links a::before {content:'';position:absolute;bottom:0;left:50%;width:0;height:2px;background:linear-gradient(90deg,#17a2b8,#00d4ff);transform:translateX(-50%);transition:width .3s ease;}
.nav-links a:hover {color:#17a2b8;transform:translateY(-2px);}
.nav-links a:hover::before {width:100%;}
.hero-content {text-align:center;color:white;max-width:1000px;padding:2rem;animation:fadeInUp 1.2s cubic-bezier(.4,0,.2,1);z-index:10;}
@keyframes fadeInUp {from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
.hero-content h1 {font-size:5rem;font-weight:900;margin-bottom:2rem;letter-spacing:4px;background:linear-gradient(135deg,#ffffff,#17a2b8,#00d4ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 80px rgba(23,162,184,0.5);animation:glow 3s ease-in-out infinite;}
@keyframes glow {0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
.hero-content p {font-size:1.2rem;line-height:2;margin-bottom:3rem;color:rgba(255,255,255,0.85);font-weight:300;animation:fadeInUp 1.2s .3s cubic-bezier(.4,0,.2,1) backwards;}
.cta-buttons {display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;animation:fadeInUp 1.2s .6s cubic-bezier(.4,0,.2,1) backwards;}
.btn {padding:1.2rem 3rem;font-size:1rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;border:none;border-radius:50px;cursor:pointer;transition:all .4s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;gap:.8rem;position:relative;overflow:hidden;z-index:1;}
.btn::before {content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,0.1);transform:translate(-50%,-50%);transition:width .6s,height .6s;z-index:-1;}
.btn:hover::before {width:300px;height:300px;}
.btn-primary {background:linear-gradient(135deg,#17a2b8,#00d4ff);color:white;box-shadow:0 8px 30px rgba(23,162,184,0.4);}
.btn-primary:hover {transform:translateY(-5px) scale(1.05);box-shadow:0 15px 40px rgba(23,162,184,0.6);}
.btn-secondary {background:transparent;color:white;border:2px solid rgba(255,255,255,0.5);backdrop-filter:blur(10px);}
.btn-secondary:hover {background:rgba(255,255,255,0.1);border-color:white;transform:translateY(-5px) scale(1.05);box-shadow:0 15px 40px rgba(255,255,255,0.2);}
.play-icon {width:0;height:0;border-left:14px solid currentColor;border-top:9px solid transparent;border-bottom:9px solid transparent;animation:pulse 2s infinite;}
@keyframes pulse {0%,100%{opacity:1}50%{opacity:0.7}}
.deco-circle {position:absolute;border-radius:50%;border:2px solid rgba(23,162,184,0.2);animation:rotate 20s linear infinite;}
.circle-1 {width:500px;height:500px;top:-250px;right:-250px;}
.circle-2 {width:400px;height:400px;bottom:-200px;left:-200px;animation-direction:reverse;}
.circle-3 {width:300px;height:300px;top:50%;left:10%;animation-duration:30s;}
@keyframes rotate {from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.scroll-indicator {position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);animation:bounce 2s infinite;cursor:pointer;z-index:10;}
.scroll-indicator::before {content:'';display:block;width:30px;height:50px;border:2px solid rgba(255,255,255,0.5);border-radius:20px;}
.scroll-indicator::after {content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:6px;height:6px;background:white;border-radius:50%;animation:scrollDot 2s infinite;}
@keyframes bounce {0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}60%{transform:translateX(-50%) translateY(-5px)}}
@keyframes scrollDot {0%{opacity:1;top:8px}100%{opacity:0;top:30px}}
.mobile-menu {display:none;flex-direction:column;gap:6px;cursor:pointer;z-index:1001;}
.mobile-menu span {width:28px;height:3px;background:white;border-radius:3px;transition:all .3s ease;}
.mobile-menu.active span:nth-child(1){transform:rotate(45deg) translate(8px,8px);}
.mobile-menu.active span:nth-child(2){opacity:0;}
.mobile-menu.active span:nth-child(3){transform:rotate(-45deg) translate(8px,-8px);}
@media(max-width:768px){
nav{padding:1.5rem 2rem;}
nav.scrolled{padding:1rem 2rem;}
.nav-links{position:fixed;top:80px;left:-100%;flex-direction:column;background:rgba(0,0,0,0.98);backdrop-filter:blur(20px);width:100%;padding:3rem 2rem;gap:2rem;transition:left .4s cubic-bezier(.4,0,.2,1);border-top:1px solid rgba(255,255,255,0.1);}
.nav-links.active{left:0;}
.mobile-menu{display:flex;}
.hero-content h1{font-size:3rem;}
.cta-buttons{flex-direction:column;align-items:center;}
.btn{width:100%;max-width:320px;justify-content:center;}
.circle-1,.circle-2,.circle-3{display:none;}
}
</style>
</head>
<body>
<div class="animated-bg"></div>
<div class="particles" id="particles"></div>
<nav id="navbar">
<div class="logo">INterior</div>
<ul class="nav-links" id="navLinks">
<li><a href="#home">HOME</a></li>
<li><a href="#bedroom">BEDROOM</a></li>
<li><a href="#dining">DINING</a></li>
<li><a href="#kitchen">KITCHEN</a></li>
</ul>
<div class="mobile-menu" id="mobileMenu">
<span></span><span></span><span></span>
</div>
</nav>
<section class="hero" id="home">
<div class="deco-circle circle-1"></div>
<div class="deco-circle circle-2"></div>
<div class="deco-circle circle-3"></div>
<div class="hero-content">
<h1>DESIGN YOUR HOUSE</h1>
<p>Subscribe Easy Tutorials YouTube Channel to watch more videos,<br>
press the bell icon to get latest updates.</p>
<div class="cta-buttons">
<button class="btn btn-primary">
<span class="play-icon"></span>
Watch More
</button>
<button class="btn btn-secondary">Subscribe</button>
</div>
</div>
<div class="scroll-indicator"></div>
</section>
<script>
// Create floating particles
const particlesContainer = document.getElementById('particles');
for (let i = 0; i < 50; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.left = Math.random() * 100 + '%';
particle.style.animationDelay = Math.random() * 20 + 's';
particle.style.animationDuration = (15 + Math.random() * 10) + 's';
particlesContainer.appendChild(particle);
}
// Navbar scroll effect
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
navbar.classList.toggle('scrolled', window.scrollY > 50);
});
// Mobile menu toggle
document.getElementById('mobileMenu').addEventListener('click', () => {
document.getElementById('navLinks').classList.toggle('active');
document.getElementById('mobileMenu').classList.toggle('active');
});
// Close menu on link click
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
document.getElementById('navLinks').classList.remove('active');
document.getElementById('mobileMenu').classList.remove('active');
});
});
// Smooth scroll indicator
document.querySelector('.scroll-indicator').addEventListener('click', () => {
window.scrollBy({top: window.innerHeight, behavior: 'smooth'});
});
// Button ripple effect
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', function(e) {
const ripple = document.createElement('span');
const rect = this.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
const x = e.clientX - rect.left - size / 2;
const y = e.clientY - rect.top - size / 2;
ripple.style.cssText = `position:absolute;width:${size}px;height:${size}px;border-radius:50%;background:rgba(255,255,255,0.5);left:${x}px;top:${y}px;transform:scale(0);animation:ripple-effect .6s ease-out;pointer-events:none;`;
this.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
});
});
// Ripple animation
const style = document.createElement('style');
style.textContent = `@keyframes ripple-effect {to{transform:scale(4);opacity:0;}}`;
document.head.appendChild(style);
// Parallax circles on mouse move
document.addEventListener('mousemove', (e) => {
const circles = document.querySelectorAll('.deco-circle');
const x = e.clientX / window.innerWidth;
const y = e.clientY / window.innerHeight;
circles.forEach((circle, i) => {
const speed = (i + 1) * 20;
circle.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
});
});
</script>
</body>
</html>
Common questions about this free interior design landing page HTML CSS JavaScript template.
Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment. Click Download Project and use it in personal or commercial projects with attribution to Coodeverse.
A glassmorphism navbar uses backdrop-filter: blur(20px) saturate(180%) and a semi-transparent background (rgba(0,0,0,0.2)) to create a frosted glass panel over the page. In INterior, scrolling adds a class that increases opacity to rgba(0,0,0,0.95) and adds a drop shadow via JavaScript scroll event listener.
50 particle <div> elements are created dynamically with JavaScript. Each gets a random left position, a random animation-delay, and a random animation-duration. The CSS @keyframes float moves each particle upward (translateY(-100vh)) while fading in and out over 15–25 seconds.
A mousemove listener normalizes mouse position to 0–1 by dividing by window dimensions. Each circle's transform is set to translate(x * speed, y * speed) where speed increases per circle (20, 40, 60px). Faster movement = closer to the viewer, creating a 3D parallax depth effect.
On each button click, a <span> is created and positioned at the exact click coordinates using getBoundingClientRect(). It's sized to the button's largest dimension and animated with @keyframes ripple-effect scaling from 0 to 4 while fading out. The button needs position:relative; overflow:hidden to clip the ripple.
Yes. Under CC BY 4.0 you may use this template for commercial client work with attribution to Coodeverse. Update the logo, nav links, headline, and colors to match your client's brand. Add portfolio, services, and contact sections below the hero to complete the site.
Browse the full collection at coodeverse.com/projects — VORTEX Interactive Canvas, Red Bull Landing Page, Holographic Login, Epic Animated Delete, Cosmos Star Animation, Gold Circuit Background and more. All 100% free with complete source code.