Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>VELOCITY | Premium Performance Footwear</title>
<!-- Google Fonts + Font Awesome Icons -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background-color: #ffffff;
color: #1A1E2B;
scroll-behavior: smooth;
overflow-x: hidden;
}
/* container system */
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 32px;
}
/* buttons base — interactive styles */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 28px;
font-weight: 600;
font-size: 1rem;
border-radius: 48px;
border: none;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
font-family: inherit;
background: #1A1E2B;
color: white;
letter-spacing: -0.01em;
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.btn-primary {
background: #1A1E2B;
color: white;
border: 1px solid rgba(255,255,255,0.1);
}
.btn-primary:hover {
background: #2D3348;
transform: translateY(-3px);
box-shadow: 0 12px 22px -8px rgba(0,0,0,0.2);
}
.btn-primary:active {
transform: translateY(1px);
transition: 0.05s;
}
.btn-outline {
background: transparent;
border: 1.5px solid #1A1E2B;
color: #1A1E2B;
}
.btn-outline:hover {
background: #1A1E2B;
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}
.btn-outline:active {
transform: translateY(1px);
}
.btn-small {
padding: 10px 20px;
font-size: 0.85rem;
font-weight: 600;
}
/* navbar */
.navbar {
padding: 24px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.logo {
font-size: 1.8rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #1A1E2B, #2D3A5E);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.nav-links {
display: flex;
gap: 32px;
align-items: center;
}
.nav-links a {
text-decoration: none;
font-weight: 500;
color: #2c2f3b;
transition: color 0.2s;
}
.nav-links a:hover {
color: #1A1E2B;
}
/* hero section */
.hero {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 48px;
padding: 40px 0 72px 0;
}
.hero-content {
flex: 1;
min-width: 260px;
}
.hero-badge {
background: #f0f2f8;
display: inline-block;
padding: 6px 14px;
border-radius: 40px;
font-size: 0.8rem;
font-weight: 600;
color: #1A1E2B;
margin-bottom: 24px;
}
.hero-content h1 {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 20px;
color: #0A0C14;
}
.hero-content p {
font-size: 1.1rem;
color: #4a4f62;
line-height: 1.5;
margin-bottom: 32px;
max-width: 500px;
}
.hero-buttons {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.hero-image {
flex: 1;
display: flex;
justify-content: center;
min-width: 280px;
}
.hero-image img {
width: 100%;
max-width: 480px;
border-radius: 48px;
object-fit: cover;
box-shadow: 0 30px 40px -20px rgba(0,0,0,0.2);
transition: transform 0.4s ease;
}
.hero-image img:hover {
transform: scale(1.02);
}
/* section headers */
.section-header {
text-align: center;
margin: 64px 0 48px 0;
}
.section-header h2 {
font-size: 2.4rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 12px;
}
.section-header p {
color: #5b6072;
max-width: 580px;
margin: 0 auto;
}
/* product grid */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
margin-bottom: 80px;
}
.product-card {
background: #FFFFFF;
border-radius: 32px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: 0 28px 38px -16px rgba(0,0,0,0.12);
border-color: rgba(0,0,0,0.08);
}
.card-img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 0.5s ease, filter 0.3s;
}
.product-card:hover .card-img {
transform: scale(1.03);
filter: brightness(0.98);
}
.card-info {
padding: 24px 20px 28px;
}
.card-title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 8px;
}
.card-price {
font-weight: 700;
font-size: 1.4rem;
color: #1A1E2B;
margin: 12px 0 8px;
}
.rating {
color: #F4B942;
font-size: 0.85rem;
letter-spacing: 2px;
margin-bottom: 18px;
}
.card-info .btn {
width: 100%;
justify-content: center;
}
/* newsletter fade section */
.newsletter {
background: #F6F8FC;
border-radius: 48px;
padding: 56px 48px;
margin: 40px 0 80px;
text-align: center;
}
.newsletter h3 {
font-size: 1.9rem;
font-weight: 700;
margin-bottom: 16px;
}
.newsletter p {
max-width: 540px;
margin: 0 auto 28px auto;
color: #4e556b;
}
.form-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 14px;
max-width: 500px;
margin: 0 auto;
}
.form-group input {
flex: 1;
padding: 14px 22px;
border-radius: 60px;
border: 1px solid #dce2ec;
font-family: inherit;
font-size: 1rem;
background: white;
transition: 0.2s;
}
.form-group input:focus {
outline: none;
border-color: #1A1E2B;
box-shadow: 0 0 0 3px rgba(26,30,43,0.1);
}
/* footer */
footer {
border-top: 1px solid #eceef3;
padding: 48px 0 32px;
text-align: center;
color: #5d6275;
}
.footer-social {
display: flex;
justify-content: center;
gap: 28px;
margin-bottom: 28px;
}
.footer-social a {
color: #2c2f3b;
font-size: 1.4rem;
transition: all 0.2s;
}
.footer-social a:hover {
color: #000;
transform: translateY(-3px);
}
/* fade effect (intersection observer) */
.fade-item {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.75s cubic-bezier(0.2, 0.9, 0.4, 1.1), transform 0.7s ease;
}
.fade-item.visible {
opacity: 1;
transform: translateY(0);
}
/* additional micro-fade for cards images */
.product-card, .hero-content, .hero-image, .newsletter {
will-change: transform, opacity;
}
/* responsive */
@media (max-width: 768px) {
.container {
padding: 0 24px;
}
.hero-content h1 {
font-size: 2.4rem;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.nav-links {
flex-wrap: wrap;
gap: 20px;
}
.hero {
flex-direction: column;
text-align: center;
padding: 20px 0 40px;
}
.hero-content p {
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
.section-header h2 {
font-size: 2rem;
}
.newsletter {
padding: 40px 24px;
}
.newsletter h3 {
font-size: 1.6rem;
}
}
@media (max-width: 480px) {
.btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.hero-content h1 {
font-size: 2rem;
}
.product-grid {
gap: 24px;
}
}
/* interactive button additional flair */
.btn i {
transition: transform 0.2s;
}
.btn:hover i {
transform: translateX(4px);
}
</style>
</head>
<body>
<div class="container">
<!-- Header / Navbar -->
<nav class="navbar">
<div class="logo"><i class="fas fa-shoe-prints" style="margin-right: 6px;"></i> VELOCITY</div>
<div class="nav-links">
<a href="#">Home</a>
<a href="#">Collection</a>
<a href="#">New Arrivals</a>
<a href="#">Stories</a>
<button class="btn btn-small btn-outline" id="navCtaBtn"><i class="fas fa-user"></i> Sign In</button>
</div>
</nav>
</div>
<main>
<!-- Hero Section with fade effects -->
<div class="container">
<div class="hero">
<div class="hero-content fade-item" id="heroContent">
<span class="hero-badge"><i class="fas fa-bolt"></i> LIMITLESS ENERGY</span>
<h1>Where speed meets<br>sophistication.</h1>
<p>Engineered for athletes, designed for the street. Experience next-gen cushioning and adaptive grip in every stride.</p>
<div class="hero-buttons">
<button class="btn btn-primary" id="heroShopBtn"><i class="fas fa-shopping-cart"></i> Shop Now</button>
<button class="btn btn-outline" id="heroExploreBtn"><i class="fas fa-play"></i> Explore collection</button>
</div>
</div>
<div class="hero-image fade-item" id="heroImage">
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=600&h=600&fit=crop" alt="Velocity signature shoe" loading="eager">
</div>
</div>
</div>
<!-- Featured Products Section -->
<div class="container">
<div class="section-header fade-item">
<h2>Premium silhouettes</h2>
<p>Limited colorways, unlimited style. Engineered with reactive foam and breathable knit.</p>
</div>
<div class="product-grid" id="productGrid">
<!-- Card 1 -->
<div class="product-card fade-item">
<img class="card-img" src="https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?w=500&h=500&fit=crop" alt="Velocity Apex Runner">
<div class="card-info">
<div class="card-title">Velocity Apex</div>
<div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i> 4.8</div>
<div class="card-price">$129</div>
<button class="btn btn-primary btn-small product-btn" data-name="Velocity Apex"><i class="fas fa-bolt"></i> Buy Now</button>
</div>
</div>
<!-- Card 2 -->
<div class="product-card fade-item">
<img class="card-img" src="https://images.unsplash.com/photo-1608231387042-66d1773070a5?w=500&h=500&fit=crop" alt="Quantum stride">
<div class="card-info">
<div class="card-title">Quantum Stride</div>
<div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i> 5.0</div>
<div class="card-price">$149</div>
<button class="btn btn-primary btn-small product-btn" data-name="Quantum Stride"><i class="fas fa-bolt"></i> Buy Now</button>
</div>
</div>
<!-- Card 3 -->
<div class="product-card fade-item">
<img class="card-img" src="https://images.unsplash.com/photo-1605348532760-6753d2c43329?w=500&h=500&fit=crop" alt="AirGlide Elite">
<div class="card-info">
<div class="card-title">AirGlide Elite</div>
<div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i> 4.7</div>
<div class="card-price">$179</div>
<button class="btn btn-primary btn-small product-btn" data-name="AirGlide Elite"><i class="fas fa-bolt"></i> Buy Now</button>
</div>
</div>
<!-- Card 4 -->
<div class="product-card fade-item">
<img class="card-img" src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?w=500&h=500&fit=crop" alt="Trail Master X">
<div class="card-info">
<div class="card-title">Trail Master X</div>
<div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i> 4.9</div>
<div class="card-price">$159</div>
<button class="btn btn-primary btn-small product-btn" data-name="Trail Master X"><i class="fas fa-bolt"></i> Buy Now</button>
</div>
</div>
</div>
</div>
<!-- Newsletter + Fade call to action -->
<div class="container">
<div class="newsletter fade-item" id="newsletterBlock">
<h3><i class="fas fa-gem"></i> First access, first stride</h3>
<p>Subscribe for exclusive drops, early access to collaborations, and 10% off your first order.</p>
<div class="form-group">
<input type="email" placeholder="Your email address" id="subsEmail">
<button class="btn btn-primary" id="subscribeBtn"><i class="fas fa-paper-plane"></i> Subscribe</button>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<div class="footer-social">
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Youtube"><i class="fab fa-youtube"></i></a>
<a href="#" aria-label="Strava"><i class="fab fa-strava"></i></a>
</div>
<p>© 2025 VELOCITY — engineered motion. All rights reserved.</p>
<p style="margin-top: 12px; font-size: 0.8rem;"><i class="fas fa-shoe-prints"></i> Responsive | Fade effects | Interactive experience</p>
</div>
</footer>
<script>
(function() {
// ---------- FADE ON SCROLL (Intersection Observer) ----------
const fadeElements = document.querySelectorAll('.fade-item');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target); // once visible, stop observing
}
});
}, { threshold: 0.15, rootMargin: "0px 0px -10px 0px" });
fadeElements.forEach(el => observer.observe(el));
// ensure elements that are already visible on load also get class (just in case)
setTimeout(() => {
fadeElements.forEach(el => {
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight - 80) {
el.classList.add('visible');
observer.unobserve(el);
}
});
}, 100);
// ---------- INTERACTIVE BUTTONS: all buttons have visual + interactive alerts/feedback ----------
// We provide demo feedback for every button to fulfill "every button should be interactive"
// Also includes hero, product cards, newsletter, navbar CTA
// Helper: show subtle console & friendly alert replacement? Better to show modern alert? Use brief dialog but not intrusive:
// We'll do a clean and modern mini feedback (toast-like but avoid heavy dom) — but the requirement ensures interactive feedback.
// For better UX I will use a temporary alert that doesn't annoy but shows interactivity. However, I'll use a stylish modal?
// Using a short duration "demo" notification? I'll use a non-blocking snackbar? but to keep simple: small console logs + alert for demo?
// Usually I would make a toast, but to meet 'interactive', I will make each button show a brief non-obstructive message (alert for demo) but
// some users may dislike alerts. Better to create a transient floating message? I can implement small inline notif but it's overhead.
// The client expects each button interactive, alert is fine but I'll use an unobtrusive banner that disappears. Let's create a minimal temporary snackbar.
// Create temporary toast element (clean)
function showMessage(text, isSuccess = true) {
let toast = document.querySelector('.dynamic-toast');
if(!toast) {
toast = document.createElement('div');
toast.className = 'dynamic-toast';
toast.style.position = 'fixed';
toast.style.bottom = '24px';
toast.style.left = '50%';
toast.style.transform = 'translateX(-50%)';
toast.style.backgroundColor = '#1A1E2B';
toast.style.color = 'white';
toast.style.padding = '12px 28px';
toast.style.borderRadius = '60px';
toast.style.fontWeight = '500';
toast.style.fontSize = '0.9rem';
toast.style.zIndex = '9999';
toast.style.boxShadow = '0 12px 24px rgba(0,0,0,0.2)';
toast.style.backdropFilter = 'blur(2px)';
toast.style.fontFamily = "'Inter', sans-serif";
toast.style.pointerEvents = 'none';
toast.style.opacity = '0';
toast.style.transition = 'opacity 0.2s ease';
document.body.appendChild(toast);
}
toast.textContent = text;
toast.style.opacity = '1';
setTimeout(() => {
toast.style.opacity = '0';
}, 2100);
}
// Hero buttons
const heroShop = document.getElementById('heroShopBtn');
const heroExplore = document.getElementById('heroExploreBtn');
const navBtn = document.getElementById('navCtaBtn');
const subscribeButton = document.getElementById('subscribeBtn');
if(heroShop) {
heroShop.addEventListener('click', (e) => {
e.preventDefault();
showMessage('✨ Limited edition — added to bag (demo)');
});
}
if(heroExplore) {
heroExplore.addEventListener('click', () => {
showMessage('🔥 Explore the full collection. Step into speed.');
});
}
if(navBtn) {
navBtn.addEventListener('click', () => {
showMessage('👋 Member zone coming soon — stay tuned');
});
}
// Product buttons (all .product-btn)
const productBtns = document.querySelectorAll('.product-btn');
productBtns.forEach(btn => {
btn.addEventListener('click', (e) => {
e.stopPropagation();
const productName = btn.getAttribute('data-name') || 'selected shoe';
showMessage(`✔️ ${productName} added to cart • Free shipping`);
});
});
// Subscribe button with email validation / interaction
if(subscribeButton) {
subscribeButton.addEventListener('click', () => {
const emailInput = document.getElementById('subsEmail');
const email = emailInput.value.trim();
if(email === "" || !email.includes('@') || !email.includes('.')) {
showMessage('📧 Please enter a valid email address', false);
emailInput.style.borderColor = '#e07c7c';
setTimeout(() => { emailInput.style.borderColor = '#dce2ec'; }, 1500);
} else {
showMessage(`🎉 Thanks ${email.split('@')[0]}! You're on the list. First drop incoming.`);
emailInput.value = '';
}
});
}
// Additional "every button" guarantee: also if any future button appears (like any .btn element that we didn't catch)
const Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
12
Requests
5
Domains
502KB
Transfer Size
578KB
Content Size
296.0ms
Dom Content Loaded
304.0ms
First Paint
413.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...