Content is user-generated and unverified.
2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vexona Studio — Lyrics Edition</title> <style> @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap'); :root{ --bg: #0E0B10; --bg-alt: #150F17; --panel: #1C1520; --gold: #E8B94B; --magenta: #C4478C; --text: #F2EDE4; --muted: #9C90A3; --line: rgba(242,237,228,0.12); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--text); font-family:'Manrope',sans-serif; line-height:1.6; overflow-x:hidden; } h1,h2,h3{ font-family:'Fraunces',serif; font-weight:600; line-height:1.1; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; } /* ---------- NAV ---------- */ header{ position:fixed; top:0;left:0;right:0; z-index:50; backdrop-filter:blur(10px); background:rgba(14,11,16,0.72); border-bottom:1px solid var(--line); } nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:1120px; margin:0 auto; } .logo{ display:flex; flex-direction:column; line-height:1; } .logo .name{ font-family:'Fraunces',serif; font-size:1.15rem; font-weight:600; letter-spacing:0.01em; } .logo .tag{ font-size:0.68rem; color:var(--gold); margin-top:3px; letter-spacing:0.08em; } .nav-links{ display:none; gap:32px; font-size:0.92rem; color:var(--muted); } .nav-links a:hover{color:var(--text);} .nav-cta{ font-size:0.85rem; font-weight:600; padding:10px 20px; border:1px solid var(--gold); border-radius:100px; color:var(--gold); white-space:nowrap; } .nav-cta:hover{background:var(--gold);color:#1a1310;} @media(min-width:760px){ .nav-links{display:flex;} } /* ---------- HERO ---------- */ .hero{ position:relative; padding:150px 0 90px; overflow:hidden; } .hero-eyebrow{ color:var(--muted); font-size:0.9rem; margin-bottom:22px; } .hero-eyebrow span{color:var(--magenta);} .karaoke{ position:relative; font-size:clamp(2.3rem,7vw,4.4rem); max-width:820px; margin-bottom:28px; } .karaoke .base, .karaoke .fill{ grid-area:1/1; } .karaoke-grid{ display:grid; } .karaoke .base{color:var(--muted);} .karaoke .fill{ color:var(--gold); clip-path:inset(0 100% 0 0); animation:reveal 2.6s 0.4s cubic-bezier(.65,.05,.36,1) forwards; } @keyframes reveal{ to{clip-path:inset(0 0 0 0);} } @media (prefers-reduced-motion: reduce){ .karaoke .fill{animation:none;clip-path:inset(0 0 0 0);} } .hero p.sub{ color:var(--muted); font-size:1.05rem; max-width:520px; margin-bottom:36px; } .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; } .btn-primary, .btn-ghost{ padding:14px 28px; border-radius:100px; font-weight:700; font-size:0.95rem; display:inline-block; } .btn-primary{ background:var(--gold); color:#1a1310; } .btn-primary:hover{background:#f2c968;} .btn-ghost{ border:1px solid var(--line); color:var(--text); } .btn-ghost:hover{border-color:var(--muted);} /* waveform */ .waveform{ display:flex; align-items:flex-end; gap:3px; height:60px; margin-top:64px; opacity:0.55; } .waveform span{ flex:1; background:linear-gradient(180deg,var(--magenta),var(--gold)); border-radius:2px; min-width:2px; } /* ---------- SERVICES (tracklist) ---------- */ .services{ padding:100px 0; border-top:1px solid var(--line); } .section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:56px; flex-wrap:wrap; } .section-head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); max-width:480px; } .section-head p{ color:var(--muted); max-width:340px; font-size:0.95rem; } .track{ display:grid; grid-template-columns:70px 1fr; gap:20px; align-items:start; padding:26px 0; border-top:1px solid var(--line); } .track:last-child{border-bottom:1px solid var(--line);} .track .time{ font-family:'Fraunces',serif; color:var(--magenta); font-size:0.95rem; padding-top:4px; } .track h3{ font-size:1.25rem; font-weight:600; margin-bottom:6px; } .track h3 .en{ color:var(--muted); font-family:'Manrope',sans-serif; font-weight:500; font-size:0.85rem; margin-left:10px; } .track p{ color:var(--muted); font-size:0.92rem; max-width:560px; } @media(min-width:760px){ .track{grid-template-columns:100px 1fr;} } /* ---------- SHOWCASE ---------- */ .showcase{ padding:100px 0; background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .frames{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:48px; } .frame{ aspect-ratio:9/13; border-radius:10px; position:relative; overflow:hidden; border:1px solid var(--line); } .frame::before{ content:''; position:absolute;inset:0; } .frame:nth-child(1)::before{background:linear-gradient(160deg,#3a1930,#0E0B10 70%);} .frame:nth-child(2)::before{background:linear-gradient(160deg,#4a2c14,#0E0B10 70%);} .frame:nth-child(3)::before{background:linear-gradient(160deg,#1c2e3a,#0E0B10 70%);} .frame:nth-child(4)::before{background:linear-gradient(160deg,#2d1c3a,#0E0B10 70%);} .frame .cap{ position:absolute; bottom:16px;left:16px;right:16px; font-size:0.78rem; color:var(--text); opacity:0.9; } .frame .line{ position:absolute; bottom:38px;left:16px;right:16px; height:2px; background:linear-gradient(90deg,var(--gold),transparent 70%); } /* ---------- PROCESS ---------- */ .process{padding:100px 0;} .steps{ display:grid; gap:0; margin-top:48px; } .step{ display:grid; grid-template-columns:56px 1fr; gap:20px; padding:30px 0; border-top:1px solid var(--line); } .step:last-child{border-bottom:1px solid var(--line);} .step .num{ font-family:'Fraunces',serif; font-size:1.6rem; color:var(--gold); } .step h3{font-size:1.15rem;margin-bottom:6px;} .step p{color:var(--muted);font-size:0.92rem;max-width:520px;} @media(min-width:760px){ .steps{grid-template-columns:repeat(3,1fr);} .step{border-top:1px solid var(--line);border-left:1px solid var(--line);padding:0 28px 0 0;grid-template-columns:1fr;} .step:first-child{border-left:none;} .step .num{margin-bottom:14px;} } /* ---------- CTA / FOOTER ---------- */ .cta{ padding:110px 0; text-align:center; border-top:1px solid var(--line); } .cta h2{ font-size:clamp(1.9rem,4.6vw,3rem); max-width:640px; margin:0 auto 20px; } .cta p{ color:var(--muted); max-width:440px; margin:0 auto 36px; } .cta .hero-actions{justify-content:center;} footer{ padding:40px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:16px; color:var(--muted); font-size:0.85rem; } footer .row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; align-items:center; } footer a:hover{color:var(--text);} </style> </head> <body> <header> <nav> <div class="logo"> <span class="name">Vexona Studio</span> <span class="tag">LYRICS EDITION</span> </div> <div class="nav-links"> <a href="#services">Services</a> <a href="#showcase">Showcase</a> <a href="#process">Process</a> </div> <a href="#contact" class="nav-cta">Send Project</a> </nav> </header> <section class="hero"> <div class="wrap"> <p class="hero-eyebrow">Vexona Studio <span>/</span> Lyrics Edition</p> <div class="karaoke karaoke-grid"> <span class="base">Bringing every line of your song to life on screen</span> <span class="fill">Bringing every line of your song to life on screen</span> </div> <p class="sub">From lyrics editing to the final music cut — every scene, every transition, every word woven together.</p> <div class="hero-actions"> <a href="#contact" class="btn-primary">Send Your Track</a> <a href="#showcase" class="btn-ghost">See Our Work</a> </div> <div class="waveform" id="waveform"></div> </div> </section> <section class="services" id="services"> <div class="wrap"> <div class="section-head"> <h2>Our Services, Tracklisted</h2> <p>Every service on its own timecode — pick where your project starts.</p> </div> <div class="track"> <span class="time">00:01</span> <div> <h3>Lyrics Editing</h3> <p>Every line placed on screen at the right timing, in the right font and style — never a frame off the beat.</p> </div> </div> <div class="track"> <span class="time">00:14</span> <div> <h3>Smooth Transitions</h3> <p>Flow between scenes and lines that never jars the eye — it just feels right.</p> </div> </div> <div class="track"> <span class="time">00:27</span> <div> <h3>Photo Transition</h3> <p>Adding movement to still photos for a cinematic feel in your lyrics video — every photo speaks like a frame.</p> </div> </div> <div class="track"> <span class="time">00:41</span> <div> <h3>Video Clip Editing</h3> <p>Trimming, color-grading and pacing raw footage into a clean, release-ready video.</p> </div> </div> <div class="track"> <span class="time">00:55</span> <div> <h3>Music Editing</h3> <p>Balancing track length, loops and levels to match the video, so sound and visuals move together.</p> </div> </div> <div class="track"> <span class="time">01:08</span> <div> <h3>Song Lyrics Video</h3> <p>Start to finish — the whole lyrics video, from title to outro, done in one studio.</p> </div> </div> </div> </section> <section class="showcase" id="showcase"> <div class="wrap"> <div class="section-head"> <h2>A Glimpse of the Transitions</h2> <p>From photo to video, with the lyrics moving in step with every frame.</p> </div> <div class="frames"> <div class="frame"><div class="line"></div><span class="cap">Intro Title</span></div> <div class="frame"><div class="line"></div><span class="cap">Verse Lyrics</span></div> <div class="frame"><div class="line"></div><span class="cap">Photo Transition</span></div> <div class="frame"><div class="line"></div><span class="cap">Outro Cut</span></div> </div> </div> </section> <section class="process" id="process"> <div class="wrap"> <div class="section-head"> <h2>How to Start a Project</h2> <p>Your track, ready in three simple steps.</p> </div> <div class="steps"> <div class="step"> <span class="num">01</span> <h3>Send Raw Files & Lyrics</h3> <p>Send us your audio track, video/photo clips and lyrics sheet.</p> </div> <div class="step"> <span class="num">02</span> <h3>Edit & Sync</h3> <p>We sync the lyrics to the timing and finalize transitions, color and sound.</p> </div> <div class="step"> <span class="num">03</span> <h3>Review & Delivery</h3> <p>After your review on the draft, we deliver the final high-quality file.</p> </div> </div> </div> </section> <section class="cta" id="contact"> <div class="wrap"> <h2>Let's Make Your Next Lyrics Video</h2> <p>Send us your track, lyrics and clips — we'll take it from there.</p> <div class="hero-actions"> <a href="mailto:[email protected]" class="btn-primary">Send an Email</a> <a href="https://wa.me/910000000000" class="btn-ghost">Chat on WhatsApp</a> </div> </div> </section> <footer> <div class="wrap row"> <span>© 2026 Vexona Studio — Lyrics Edition</span> <span> <a href="mailto:[email protected]">Email</a> · <a href="https://wa.me/910000000000">WhatsApp</a> · <a href="#services">Services</a> </span> </div> </footer> <script> // waveform bars const wf = document.getElementById('waveform'); const bars = 60; for(let i=0;i<bars;i++){ const b = document.createElement('span'); const h = 10 + Math.round(Math.sin(i*0.4)*20 + Math.random()*22); b.style.height = h+'px'; wf.appendChild(b); } </script> </body> </html>
Cookie settings
We use cookies to deliver and improve our services, analyze site usage, and if you agree, to customize or personalize your experience and market our services to you. You can read our Cookie Policy here.