Detalii Tehnice
⚡ Landing Page animat Pepsi-style, 100% HTML/CSS/JS. Interactiv, responsive & GRATUIT de descărcat!
🔹 Template Landing Pepsi — Demo RTEC DESIGN
Acest proiect gratuit este un landing page modern creat exclusiv cu HTML, CSS și JavaScript, fără framework-uri externe.
👉 Ce include:
- 🌊 Animații fluide & efect video-like — fundal cu bule animate pe canvas și tranziții cromatice.
- 🥤 Selector de arome interactiv (Original, Zero, Cherry, Lime) cu schimbare dinamică de temă și accente.
- 🎨 Design 3D interactiv pe doză (efect de tilt la hover).
- ✨ Scroll reveal animations pentru o experiență cinematică și atractivă.
- 📱 Responsive & optimizat — se adaptează perfect pentru desktop și mobil.
- 🛠️ Cod curat și modular, ușor de integrat într-un CMS sau framework.
📌 Ideal pentru cei care vor să învețe cum se construiesc landing pages moderne, cu efecte vizuale captivante și interacțiuni user-friendly.
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PEPSI — Template Landing (Demo RTEC DESIGN)</title>
<meta name="description" content="Landing page demo în stil video, cu animații fluide, selector de arome și efect 3D pe doză. Creat de RTEC DESIGN."/>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800;900&display=swap" rel="stylesheet">
<style>
/* =====================================================
RTEC DESIGN — Template Pepsi (Single-file)
Notă: folosește doar culori/forme generice. Înlocuiește
placeholder-ele cu asset-urile tale oficiale.
===================================================== */
:root{
/* Paletă generală Pepsi-ish (dar generica) */
--bg:#05070e; --panel:#0b1020; --ink:#e9f1ff; --muted:#9ab0d1;
--accent:#005CB4; /* albastru */
--accent-2:#C8102E; /* roșu */
--ring:rgba(0,92,180,.3);
--glass:rgba(255,255,255,.06);
--border:rgba(255,255,255,.14);
--radius:20px;
/* Arome (teme) */
--t-original:#005CB4;
--t-zero:#111827;
--t-cherry:#a1122b;
--t-lime:#16a34a;
}
/* Teme dinamice pe <body data-flavor> */
body[data-flavor="original"]{ --accent:var(--t-original); --accent-2:#f52f2f; --ring:rgba(0,92,180,.35); }
body[data-flavor="zero"]{ --accent:var(--t-zero); --accent-2:#e5e7eb; --ring:rgba(229,231,235,.2); }
body[data-flavor="cherry"]{ --accent:var(--t-cherry); --accent-2:#ff6384; --ring:rgba(161,18,43,.35); }
body[data-flavor="lime"]{ --accent:var(--t-lime); --accent-2:#9ae6b4; --ring:rgba(22,163,74,.35); }
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font-family:Montserrat,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
color:var(--ink); background:
radial-gradient(1200px 800px at 120% -10%, var(--accent), transparent 60%),
radial-gradient(1000px 700px at -10% 110%, var(--accent-2), transparent 60%),
linear-gradient(180deg, #03050b, #05070e);
overflow-x:hidden; transition: background .6s ease;
}
/* Bule pe canvas pe fundal */
#bubbles{position:fixed; inset:0; z-index:0; display:block}
/* Nav */
.nav{position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.08)); border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px; margin:0 auto; padding:14px 18px; display:flex; align-items:center; gap:14px}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.06em}
.logo{width:36px; height:36px; border-radius:50%; background:conic-gradient(from 200deg, var(--accent), var(--accent) 40%, #fff 40% 60%, var(--accent-2) 60%);
box-shadow:0 8px 24px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.3)}
.nav a{color:var(--ink); text-decoration:none; opacity:.9}
.spacer{flex:1}
.pill{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; background:var(--glass);
border:1px solid var(--border); font-weight:600}
/* Hero */
.hero{position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:48px 18px 24px; display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center}
.stripe{height:3px; background:linear-gradient(90deg, var(--accent), #fff, var(--accent-2)); border-radius:3px; margin:8px 0 18px}
.h1{font-size:clamp(32px, 5vw, 64px); line-height:1.05; margin:0 0 10px; font-weight:900; letter-spacing:.02em}
.lead{color:var(--muted); margin:0 0 22px}
.cta{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-grid; place-items:center; padding:14px 18px; border-radius:14px; border:0; font-weight:800; cursor:pointer;
background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#071018; box-shadow:0 16px 36px rgba(0,0,0,.4)}
.btn.outline{background:transparent; color:var(--ink); border:1px solid var(--border)}
/* Can card */
.can-wrap{position:relative; display:grid; place-items:center}
.card{width:min(520px, 86%); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
border:1px solid var(--border); border-radius:var(--radius); padding:22px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
box-shadow:0 24px 60px rgba(0,0,0,.45); transform-style:preserve-3d; transition:transform .2s ease}
.card:hover{transform:perspective(900px) rotateX(2deg) rotateY(-4deg)}
/* SVG doză — generică, fără elemente de brand protejate */
svg{display:block; height:auto}
.can{width:100%}
.flavors{margin-top:16px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.flavor{padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--glass); cursor:pointer; font-weight:700}
.flavor[aria-pressed="true"]{outline:3px solid var(--ring)}
/* Secțiune promo */
.promo{position:relative; z-index:1; max-width:1200px; margin:28px auto; padding:0 18px}
.grid{display:grid; gap:18px; grid-template-columns:repeat(12,1fr)}
.tile{grid-column:span 6; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border);
border-radius:var(--radius); padding:18px; min-height:180px}
.tile h3{margin:6px 0 10px}
.tile p{color:var(--muted)}
/* Carusel produse */
.carousel{margin:26px 0; overflow:auto; display:flex; gap:16px; scroll-snap-type:x mandatory; padding-bottom:6px}
.prod{scroll-snap-align:start; min-width:260px; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid var(--border);
border-radius:16px; padding:16px}
/* Footer */
footer{position:relative; z-index:1; margin-top:36px; border-top:1px solid var(--border); background:rgba(0,0,0,.35)}
.foot{max-width:1200px; margin:0 auto; padding:22px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.copy{color:var(--muted)}
/* Responsive */
@media (max-width: 980px){
.hero{grid-template-columns:1fr; padding-top:28px}
.card{width:min(560px, 100%)}
}
/* ==== CHOP transition overlay ==== */
:root{ --chopA:#0b5db6; --chopB:#ef4444; }
.chop{ position:fixed; inset:0; z-index:12; pointer-events:none; display:grid; grid-template-rows:repeat(8,1fr); gap:6px; opacity:0; }
.chop .s{ background:linear-gradient(90deg, var(--chopA), var(--chopB)); transform:translateX(-110%); border-radius:6px; }
@media (prefers-reduced-motion: reduce){ .chop{ display:none; } }
.chop.on{ opacity:1; }
.chop.on .s{ animation: chopIn 320ms calc(var(--i)*40ms) cubic-bezier(.2,.8,.1,1) forwards, chopOut 320ms calc(var(--i)*40ms + 320ms) cubic-bezier(.2,.8,.1,1) forwards; }
.chop.on .s:nth-child(even){ animation-name: chopInR, chopOutR; }
@keyframes chopIn{ from{ transform:translateX(-110%);} to{ transform:translateX(0);} }
@keyframes chopOut{ from{ transform:translateX(0);} to{ transform:translateX(110%);} }
@keyframes chopInR{ from{ transform:translateX(110%);} to{ transform:translateX(0);} }
@keyframes chopOutR{ from{ transform:translateX(0);} to{ transform:translateX(-110%);} }
</style>
</head>
<body data-flavor="original">
<canvas id="bubbles" aria-hidden="true"></canvas>
<div class="chop" id="chop" aria-hidden="true">
<div class="s" style="--i:0"></div>
<div class="s" style="--i:1"></div>
<div class="s" style="--i:2"></div>
<div class="s" style="--i:3"></div>
<div class="s" style="--i:4"></div>
<div class="s" style="--i:5"></div>
<div class="s" style="--i:6"></div>
<div class="s" style="--i:7"></div>
</div>
<nav class="nav">
<div class="nav-inner">
<div class="brand"><div class="logo"></div><span>PEPSI</span></div>
<div class="spacer"></div>
<a class="pill" href="#arome">Arome</a>
<a class="pill" href="#produse">Produse</a>
<a class="pill" href="#cumpara">Cumpără</a>
</div>
</nav>
<header class="hero">
<div>
<div class="stripe" aria-hidden="true"></div>
<h1 class="h1">Răcorește-ți lumea.<br>Îndrăzneț. Crocant. Revigorant.</h1>
<p class="lead">Template inovator cu animații fluide, efect 3D pe doză și selector de aromă. Inspirat din trendurile video moderne — implementare full front‑end.</p>
<div class="cta">
<a href="#cumpara" class="btn">Cumpără acum</a>
<a href="#produse" class="btn outline">Vezi gama</a>
</div>
<div class="flavors" id="arome">
<button class="flavor" data-flavor="original" aria-pressed="true">Original</button>
<button class="flavor" data-flavor="zero" aria-pressed="false">Zero</button>
<button class="flavor" data-flavor="cherry" aria-pressed="false">Cherry</button>
<button class="flavor" data-flavor="lime" aria-pressed="false">Lime</button>
</div>
</div>
<div class="can-wrap">
<div class="card" id="tilt">
<!-- Doză SVG generică (schimbă gradientele prin JS per aromă) -->
<svg class="can" viewBox="0 0 420 820" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Doză băutură carbogazoasă">
<defs>
<linearGradient id="gBody" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#0f172a"/>
<stop offset="1" stop-color="#0b1224"/>
</linearGradient>
<linearGradient id="gCap" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#d1d5db"/>
<stop offset="1" stop-color="#9ca3af"/>
</linearGradient>
<filter id="shadow" x="-40%" y="-40%" width="180%" height="180%">
<feGaussianBlur stdDeviation="14"/>
</filter>
</defs>
<!-- Umbra sub doză -->
<ellipse cx="210" cy="790" rx="150" ry="22" fill="#000" opacity=".45" filter="url(#shadow)"/>
<!-- Corp doză -->
<rect x="60" y="90" width="300" height="620" rx="42" fill="url(#gBody)" stroke="rgba(255,255,255,.15)"/>
<!-- Capac -->
<rect x="80" y="50" width="260" height="52" rx="18" fill="url(#gCap)"/>
<!-- Bandă decorativă generică, NU logo – doar val cu culori din temă -->
<path id="band" d="M60 420 C 140 360, 280 520, 360 460 L 360 600 Q 280 640, 210 600 Q 140 560, 60 600 Z" fill="#1e3a8a" opacity=".9"/>
<path id="band2" d="M60 380 C 140 420, 280 300, 360 340 L 360 420 Q 280 460, 210 420 Q 140 380, 60 420 Z" fill="#ef4444" opacity=".9"/>
<!-- Titlu mare generic -->
<text x="210" y="360" text-anchor="middle" font-size="84" font-weight="900" fill="#fff" opacity=".95" letter-spacing="4">PEPSI</text>
<text x="210" y="690" text-anchor="middle" font-size="18" font-weight="700" fill="#dbeafe" opacity=".9">Refreshing Taste</text>
</svg>
</div>
</div>
</header>
<main class="promo" id="produse">
<div class="grid">
<div class="tile" style="grid-column:span 12">
<h3>Experiență „like-video”</h3>
<p>Parallax cu bule, panglici cromatice și „shine” subtil. Performanță optimizată (canvas & requestAnimationFrame), accesibil și responsiv.</p>
</div>
<div class="tile">
<h3>Flavor Engine</h3>
<p>Schimbă instant tema (culori & accente) pentru Original / Zero / Cherry / Lime. Toate elementele UI reacționează la temă.</p>
</div>
<div class="tile">
<h3>3D Tilt</h3>
<p>Efect ușor de tilt pe cardul dozei, cu reset smart la mouse leave.</p>
</div>
<div class="tile">
<h3>Scroll Reveal</h3>
<p>Animări fine la apariția în viewport (IntersectionObserver) pentru tile-uri & carduri.</p>
</div>
<div class="tile">
<h3>Carusel</h3>
<p>Secțiune de carduri cu scroll-snap. Pregătită pentru produse, bundle-uri și promoții sezoniere.</p>
</div>
<div class="tile">
<h3>Curat & Modular</h3>
<p>CSS cu variabile, JS organizat, ușor de integrat într-un CMS sau framework.</p>
</div>
</div>
<div class="carousel" aria-label="Produse în tendințe">
<div class="prod"><strong>Pepsi Original 330ml</strong><p class="copy">Gust clasic, efervescent, potrivit oricând.</p><a class="pill" href="#cumpara">Detalii</a></div>
<div class="prod"><strong>Pepsi Zero 500ml</strong><p class="copy">Zero zahăr. Zero compromis.</p><a class="pill" href="#cumpara">Detalii</a></div>
<div class="prod"><strong>Pepsi Cherry 330ml</strong><p class="copy">Note fructate pentru un twist dulce.</p><a class="pill" href="#cumpara">Detalii</a></div>
<div class="prod"><strong>Pepsi Lime 1L</strong><p class="copy">Prospețime citrică ce iese în evidență.</p><a class="pill" href="#cumpara">Detalii</a></div>
</div>
<section id="cumpara" class="tile" style="grid-column:1/-1">
<h3>Găsește-ți favorita</h3>
<p class="copy">Adaugă un „store locator” sau un buton către magazinele partenere. Acest template e gândit să se integreze ușor.</p>
<div class="cta" style="margin-top:10px">
<a class="btn" href="#">Cumpără de la parteneri</a>
<a class="btn outline" href="#">Vezi promoții</a>
</div>
</section>
</main>
<footer>
<div class="foot">
<div class="brand"><div class="logo"></div><span>PEPSI</span></div>
<span class="copy">© 2025. Template demo creat de RTEC DESIGN. Mărcile aparțin proprietarilor lor.</span>
</div>
</footer>
<script>
// ===== BULE CANVAS =====
const canvas = document.getElementById('bubbles');
const ctx = canvas.getContext('2d');
const DPR = Math.min(window.devicePixelRatio || 1, 2);
let W=0,H=0, P=[];
function resize(){
W = canvas.width = Math.floor(innerWidth*DPR);
H = canvas.height = Math.floor(innerHeight*DPR);
canvas.style.width = innerWidth + 'px';
canvas.style.height = innerHeight + 'px';
}
addEventListener('resize', resize); resize();
function rand(a,b){ return a + Math.random()*(b-a); }
function spawn(n=2){
for(let i=0;i<n;i++){
P.push({x:Math.random()*W, y:H+20, r:rand(6,22)*DPR, vy:rand(0.2,0.8)*DPR, drift:rand(-0.2,0.2)*DPR, a:rand(0.25,0.6)});
}
}
function tick(){
ctx.clearRect(0,0,W,H);
const grad = ctx.createRadialGradient(W*0.5,H*0.2,0, W*0.5,H*0.2, Math.max(W,H)*0.9);
grad.addColorStop(0,'rgba(255,255,255,0.04)');
grad.addColorStop(1,'rgba(0,0,0,0.18)');
ctx.fillStyle=grad; ctx.fillRect(0,0,W,H);
if(P.length<120) spawn(1);
for(let i=P.length-1;i>=0;i--){
const p=P[i];
p.y -= p.vy; p.x += p.drift;
ctx.globalAlpha = p.a;
const r=p.r, s=r*0.6;
const g = ctx.createRadialGradient(p.x-s*0.4,p.y-s*0.4, r*0.1, p.x, p.y, r);
g.addColorStop(0,'rgba(255,255,255,.9)');
g.addColorStop(1,'rgba(255,255,255,.08)');
ctx.fillStyle=g; ctx.beginPath(); ctx.arc(p.x,p.y,r,0,Math.PI*2); ctx.fill();
if(p.y < -40 || p.x<-40 || p.x>W+40){ P.splice(i,1); }
}
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
// ===== FLAVORS THEME ENGINE =====
const flavors = document.querySelectorAll('.flavor');
const band = document.getElementById('band');
const band2 = document.getElementById('band2');
const THEMES = {
original: { band:'#0b5db6', band2:'#ef4444', bodyTop:'#0f1c3b', bodyBot:'#0a1530' },
zero: { band:'#1f2937', band2:'#9ca3af', bodyTop:'#0b0f16', bodyBot:'#0a0e14' },
cherry: { band:'#8b1430', band2:'#ff6b8a', bodyTop:'#2a0d17', bodyBot:'#1b0a12' },
lime: { band:'#15803d', band2:'#9ae6b4', bodyTop:'#0d1a12', bodyBot:'#0b1610' }
};
function applyFlavor(key){
document.body.setAttribute('data-flavor', key);
const t = THEMES[key];
band.setAttribute('fill', t.band);
band2.setAttribute('fill', t.band2);
// update body gradient via CSS variables by replacing stops
const styleTag = document.getElementById('dynGrad') || (()=>{ const s=document.createElement('style'); s.id='dynGrad'; document.head.appendChild(s); return s; })();
styleTag.textContent = `#gBody stop[offset="0"]{stop-color:${t.bodyTop}} #gBody stop[offset="1"]{stop-color:${t.bodyBot}}`;
flavors.forEach(btn=> btn.setAttribute('aria-pressed', String(btn.dataset.flavor===key)));
}
// ===== CHOP TRANSITION =====
const chop = document.getElementById('chop');
function chopTransition(to){
const t = THEMES[to];
document.documentElement.style.setProperty('--chopA', t.band);
document.documentElement.style.setProperty('--chopB', t.band2);
chop.classList.remove('on'); void chop.offsetWidth; // restart
chop.classList.add('on');
setTimeout(()=> applyFlavor(to), 340);
setTimeout(()=> chop.classList.remove('on'), 700);
}
flavors.forEach(btn=> btn.addEventListener('click', ()=> chopTransition(btn.dataset.flavor)));
applyFlavor('original');
// ===== 3D TILT =====
const tilt = document.getElementById('tilt');
tilt.addEventListener('mousemove', (e)=>{
const r = tilt.getBoundingClientRect();
const x = (e.clientX - r.left)/r.width - .5;
const y = (e.clientY - r.top)/r.height - .5;
tilt.style.transform = `perspective(900px) rotateX(${(-y*6).toFixed(2)}deg) rotateY(${(x*8).toFixed(2)}deg)`;
});
tilt.addEventListener('mouseleave', ()=> tilt.style.transform='');
// ===== SCROLL REVEAL =====
const revealEls = document.querySelectorAll('.tile, .prod');
const io = new IntersectionObserver((entries)=>{
entries.forEach(en=>{
if(en.isIntersecting){ en.target.animate([
{opacity:0, transform:'translateY(12px)'}, {opacity:1, transform:'translateY(0)'}
], {duration:500, easing:'cubic-bezier(.2,.6,.2,1)', fill:'forwards'}); io.unobserve(en.target); }
})
}, {threshold:.2});
revealEls.forEach(el=> io.observe(el));
</script>
</body>
</html>
