<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>xvStudios | MalyWorld</title>
<link rel="preconnect" href__="https://fonts.googleapis.com" />
<link rel="preconnect" href__="https://fonts.gstatic.com" crossorigin />
<link href__="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #050505;
--bg2: #0f0f0f;
--card: #111111;
--border: #1f1f1f;
--text: #ffffff;
--muted: #888888;
--volt: #D1FF00;
--volt-dim: rgba(209,255,0,0.1);
--radius: 2px;
--font: 'Inter', sans-serif;
}
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 18px;
line-height: 1.6;
min-height: 100vh;
}
/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
/* ── UTILITY ── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.eyebrow {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--volt);
margin-bottom: 1rem;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
.divider { height: 1px; background: var(--border); }
/* ── BUTTONS ── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font);
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
padding: 1rem 2rem;
min-height: 44px;
border: none;
cursor: pointer;
transition: all 0.2s;
border-radius: var(--radius);
}
.btn-primary {
background: var(--volt);
color: #050505;
}
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 0 20px rgba(209,255,0,0.3); }
.btn-outline {
background: transparent;
color: var(--text);
border: 1px solid var(--border);
}
.btn-outline:hover { background: var(--card); }
.btn-volt-outline {
background: transparent;
color: var(--volt);
border: 1px solid rgba(209,255,0,0.3);
}
.btn-volt-outline:hover { background: var(--volt-dim); }
/* Focus visible */
:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
/* ── NAVBAR ── */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
transition: background 0.4s, border-color 0.4s;
border-bottom: 1px solid transparent;
}
.site-header.scrolled {
background: rgba(5,5,5,0.92);
backdrop-filter: blur(20px);
border-color: var(--border);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}
.brand {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 900;
font-size: 1.1rem;
letter-spacing: -0.02em;
}
.brand-logo {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 4px;
}
.site-nav {
display: flex;
align-items: center;
gap: 2rem;
}
.site-nav a {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
transition: color 0.2s;
}
.site-nav a:hover { color: var(--text); }
.site-nav a.accent { color: var(--volt); }
.site-nav a.accent:hover { color: #fff; text-shadow: 0 0 8px var(--volt); }
/* Hamburger */
.nav-toggle {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--text);
transition: all 0.3s;
border-radius: 1px;
}
/* Mobile nav */
.mobile-nav {
display: none;
flex-direction: column;
gap: 1.25rem;
padding: 1.5rem 2rem;
background: rgba(5,5,5,0.97);
backdrop-filter: blur(20px);
border-top: 1px solid var(--border);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
transition: color 0.2s;
}
.mobile-nav a:hover { color: var(--text); }
.mobile-nav a.accent { color: var(--volt); }
/* ── HERO ── */
#home {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
overflow: hidden;
padding-top: 64px;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-bg img {
width: 100%; height: 100%;
object-fit: cover;
opacity: 0.15;
}
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, var(--bg) 0%, rgba(5,5,5,0.5) 50%, var(--bg) 100%);
}
.hero-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
padding: 6rem 0;
}
.hero-title {
font-size: clamp(2.2rem, 5vw, 3.8rem);
font-weight: 900;
line-height: 1.05;
letter-spacing: -0.03em;
margin-bottom: 1.5rem;
}
.hero-title span { color: var(--volt); }
.hero-sub {
color: var(--muted);
font-size: 1.05rem;
line-height: 1.7;
max-width: 520px;
margin-bottom: 1rem;
}
.hero-note {
color: var(--muted);
font-size: 0.95rem;
margin-bottom: 2.5rem;
max-width: 520px;
}
.hero-note a { color: var(--text); font-weight: 600; transition: color 0.2s; }
.hero-note a:hover { color: var(--volt); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
/* Flyer */
.hero-flyer {
display: flex;
justify-content: center;
position: relative;
}
.hero-flyer::before {
content: '';
position: absolute;
inset: -2rem;
background: radial-gradient(circle, rgba(209,255,0,0.06) 0%, transparent 70%);
border-radius: 50%;
}
.hero-flyer img {
max-width: 420px;
width: 100%;
border-radius: 4px;
box-shadow: 0 0 60px rgba(209,255,0,0.08), 0 30px 80px rgba(0,0,0,0.8);
border: 1px solid var(--border);
}
/* ── SECTION BASE ── */
.section { padding: 7rem 0; border-top: 1px solid var(--border); }
.section-header { margin-bottom: 4rem; }
.section-title {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.1;
max-width: 560px;
}
/* ── SERVICES ── */
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--border);
}
.service-card {
padding: 2.5rem;
border-right: 1px solid var(--border);
transition: background 0.2s;
}
.service-card:last-child { border-right: none; }
.service-card:hover { background: var(--card); }
.service-icon {
width: 36px; height: 36px;
color: var(--volt);
margin-bottom: 1.5rem;
}
.service-card h3 {
font-size: 1rem;
font-weight: 800;
letter-spacing: -0.01em;
margin-bottom: 0.75rem;
}
.service-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.65; }
/* ── ABOUT ── */
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: start;
}
.about-text p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin-top: 1rem; }
.about-stats { margin-top: 0; }
.stat-row {
padding: 1.5rem 0;
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.stat-row:first-child { border-top: 1px solid var(--border); }
.stat-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--volt);
}
.stat-value { font-size: 1rem; font-weight: 500; color: var(--text); }
/* ── CLOTHING MARQUEE ── */
.clothing-section { overflow: hidden; }
.clothing-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 2.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.marquee-wrap { overflow: hidden; }
.marquee-track {
display: flex;
gap: 1rem;
width: max-content;
animation: marquee 30s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
.marquee-item {
flex-shrink: 0;
width: 280px;
position: relative;
overflow: hidden;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.marquee-item img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
transition: transform 0.5s;
}
.marquee-item:hover img { transform: scale(1.05); }
.marquee-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(5,5,5,0.85), transparent);
opacity: 0;
transition: opacity 0.3s;
display: flex;
align-items: flex-end;
padding: 1.25rem;
}
.marquee-item:hover .marquee-overlay { opacity: 1; }
.marquee-overlay span {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ── REVIEWS ── */
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border: 1px solid var(--border);
}
.review-card {
padding: 2.5rem;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
}
.review-card:last-child { border-right: none; }
.quote-icon {
font-size: 3rem;
color: var(--volt);
opacity: 0.3;
line-height: 1;
margin-bottom: 1rem;
font-family: Georgia, serif;
}
.review-card p {
color: var(--text);
font-size: 0.95rem;
line-height: 1.7;
flex: 1;
margin-bottom: 1.5rem;
}
.review-author { font-weight: 700; font-size: 0.85rem; }
.review-role {
font-size: 0.7rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--muted);
margin-top: 0.2rem;
}
/* ── CONTACT ── */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
}
.contact-details p { color: var(--muted); font-size: 1rem; line-height: 1.7; margin-top: 1rem; margin-bottom: 2.5rem; }
.contact-meta { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-item strong {
display: block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--volt);
margin-bottom: 0.3rem;
}
.contact-item a, .contact-item span {
font-size: 0.95rem;
font-weight: 500;
color: var(--text);
transition: color 0.2s;
}
.contact-item a:hover { color: var(--volt); }
.contact-form {
background: rgba(17,17,17,0.6);
border: 1px solid var(--border);
padding: 2.5rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
border-radius: var(--radius);
}
.contact-form label {
display: flex;
flex-direction: column;
gap: 0.5rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
}
.contact-form input,
.contact-form textarea {
background: var(--bg);
border: 1px solid var(--border);
color: var(--text);
font-family: var(--font);
font-size: 0.95rem;
padding: 0.85rem 1rem;
border-radius: var(--radius);
transition: border-color 0.2s;
width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: var(--volt);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
/* ── FOOTER ── */
.site-footer {
border-top: 1px solid var(--border);
padding: 3rem 0;
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.5rem;
}
.footer-inner p { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.25rem; }
.footer-nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-nav a {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--muted);
transition: color 0.2s;
}
.footer-nav a:hover { color: var(--text); }
.footer-nav a.accent { color: var(--volt); }
/* ── GLINT EFFECT ── */
@keyframes glint {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.glint:hover {
background: linear-gradient(90deg, var(--volt) 0%, #fff 50%, var(--volt) 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: glint 1.5s linear infinite;
}
/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
.services-grid { grid-template-columns: repeat(2, 1fr); }
.service-card:nth-child(2) { border-right: none; }
.service-card:nth-child(3) { border-top: 1px solid var(--border); }
.service-card:nth-child(4) { border-top: 1px solid var(--border); border-right: none; }
}
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; gap: 3rem; }
.hero-flyer { order: -1; }
.hero-flyer img { max-width: 320px; }
.about-grid, .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
.reviews-grid { grid-template-columns: 1fr; }
.review-card { border-right: none; border-bottom: 1px solid var(--border); }
.review-card:last-child { border-bottom: none; }
}
@media (max-width: 768px) {
body { font-size: 16px; }
.section { padding: 4rem 0; }
.site-nav { display: none; }
.nav-toggle { display: flex; }
.services-grid { grid-template-columns: 1fr; }
.service-card { border-right: none; border-bottom: 1px solid var(--border); }
.service-card:last-child { border-bottom: none; }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
.glint:hover { animation: none; }
}
</style>
</head>
<body>
<!-- ═══ HEADER ═══ -->
<header class="site-header" id="site-header">
<div class="container header-inner">
<a class="brand" href__="#home">
<img class="brand-logo"
src="https://media.base44.com/images/public/6a1b27d83ce9b63d928ff8ca/a6fdc969b_xvlogotemp.png"
alt="xvStudios logo" />
<span>xvStudios</span>
</a>
<button class="nav-toggle" id="nav-toggle" aria-label="Toggle navigation">
<span></span><span></span><span></span>
</button>
<nav class="site-nav">
<a href__="#home">Home</a>
<a href__="#services">What We Do</a>
<a href__="#about">About</a>
<a href__="#reviews">Reviews</a>
<a href__="#contact">Book</a>
<a href__="clothing.html" class="accent glint">Shop</a>
</nav>
</div>
<nav class="mobile-nav" id="mobile-nav">
<a href__="#home">Home</a>
<a href__="#services">What We Do</a>
<a href__="#about">About</a>
<a href__="#reviews">Reviews</a>
<a href__="#contact">Book</a>
<a href__="clothing.html" class="accent">Shop Collection</a>
</nav>
</header>
<main>
<!-- ═══ HERO ═══ -->
<section id="home">
<div class="hero-bg">
<img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?w=1600&q=80" alt="" />
</div>
<div class="container">
<div class="hero-inner">
<div>
<p class="eyebrow">MalyWorld Audio / Visual Studio</p>
<h1 class="hero-title">
Create studio-grade audio & video that makes your story <span>exceptional.</span>
</h1>
<p class="hero-sub">
A MalyWorld company, xvStudios is built for music recording, photography/filmmaking,
and livestream production with studio-ready microphones, vocal booths, and pro broadcast support.
</p>
<p class="hero-note">
Call <a href__="tel:+16187998158">618-799-8158</a> or visit 1835 E Charleston Blvd, Las Vegas NV.
</p>
<div class="hero-actions">
<a class="btn btn-primary" href__="#contact">Book Studio →</a>
<a class="btn btn-outline" href__="#services">See Spaces</a>
<a class="btn btn-volt-outline" href__="clothing.html">€Shopping Shop Collection</a>
</div>
</div>
<div class="hero-flyer">
<!-- REPLACE src with your actual flyer image -->
<img
src="https://media.base44.com/images/public/6a1b27d83ce9b63d928ff8ca/8a0b5e4ef_MalyWorldstudioslogo1.jpg"
alt="xvStudios flyer" />
</div>
</div>
</div>
</section>
<!-- ═══ SERVICES ═══ -->
<section id="services" class="section">
<div class="container">
<div class="section-header">
<p class="eyebrow">Our Services</p>
<h2 class="section-title">What we can do for you</h2>
</div>
<div class="services-grid">
<article class="service-card">
<svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
</svg>
<h3>Studio Recording</h3>
<p>Professional audio and video capture with dedicated rooms for music, podcasting, and voice-over work.</p>
</article>
<article class="service-card">
<svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.375 19.5h17.25m-17.25 0a1.125 1.125 0 01-1.125-1.125M3.375 19.5h1.5C5.496 19.5 6 18.996 6 18.375m-3.75.125v-6.75a1.5 1.5 0 011.5-1.5h15a1.5 1.5 0 011.5 1.5v6.75" />
</svg>
<h3>Post Production</h3>
<p>Mixing, editing, and mastering services to deliver polished final content that resonates.</p>
</article>
<article class="service-card">
<svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5l4.72-4.72a.75.75 0 011.28.53v11.38a.75.75 0 01-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25h-9A2.25 2.25 0 002.25 7.5v9a2.25 2.25 0 002.25 2.25z" />
</svg>
<h3>Content Creation</h3>
<p>Creative support for branded videos, promotional reels, livestream setups, and visual storytelling.</p>
</article>
<article class="service-card">
<svg class="service-icon" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z" />
</svg>
<h3>Live Streaming</h3>
<p>End-to-end streaming production with broadcast-grade microphones, camera switching, and platform support.</p>
</article>
</div>
</div>
</section>
<!-- ═══ ABOUT ═══ -->
<section id="about" class="section">
<div class="container">
<div class="about-grid">
<div class="about-text">
<p class="eyebrow">About xvStudios</p>
<h2 class="section-title">MalyWorld's premier audio/visual recording studio.</h2>
<p>As the audio/visual division of MalyWorld, xvStudios brings together music recording, photography, filmmaking, and live streaming under one creative roof.</p>
<p>With over 10 years of experience recording music and video, xvStudios combines creative vision with technical expertise. Our team of dedicated engineers and photographers supports every session from capture through final delivery.</p>
</div>
<div class="about-stats">
<div class="stat-row">
<span class="stat-label">Equipment</span>
<span class="stat-value">Pro-grade audio and camera rigs</span>
</div>
<div class="stat-row">
<span class="stat-label">Experience</span>
<span class="stat-value">10+ years producing music, podcasts, film, and live streams</span>
</div>
<div class="stat-row">
<span class="stat-label">Team</span>
<span class="stat-value">Dedicated engineers, photographers, and streaming specialists</span>
</div>
</div>
</div>
</div>
</section>
<!-- ═══ CLOTHING MARQUEE ═══ -->
<section class="section clothing-section">
<div class="container">
<div class="clothing-header">
<div>
<p class="eyebrow">MalyWorld Apparel</p>
<h2 class="section-title">Shop the Collection</h2>
</div>
<a class="btn btn-volt-outline glint" href__="clothing.html">View All →</a>
</div>
</div>
<div class="marquee-wrap">
<div class="marquee-track" id="marquee">
<!-- Items duplicated for infinite loop -->
<a class="marquee-item" href__="clothing.html">
<img src="https://media.base44.com/images/public/6a1b27d83ce9b63d928ff8ca/88b3e9c0f_generated_image.png" alt="Obsidian Hoodie" />
<div class="marquee-overlay"><span>Obsidian Hoodie</span></div>
</a>
<a class="marquee-item" href__="clothing.html">
<img src="https://media.base44.com/images/public/6a1b27d83ce9b63d928ff8ca/ef32beeba_generated_image.png" alt="MalyWorld Tee" />
<div class="marquee-overlay"><span>MalyWorld Tee</span></div>
</a>
<a class="marquee-item" href__="clothing.html">
<img src="https://media.base44.com/images/public/6a1b27d83ce9b63d928ff8ca/f649083c6_generated_image.png" alt="Studio Snapback" />
<div class="marquee-overlay"><span>Studio Snapback</span></div>
</a>
<a class="marquee-item" href__="clothing.html">
<img src="https://media.base44.com/images/public/6a1b27d83ce9b63d928ff8ca/e5fc51ff5_generated_image.png" alt="Stealth Joggers" />
<div class="marquee-overlay"><span>Stealth Joggers</span></div>
</a>
<!-- Duplicate for seamless loop -->
<a class="marquee-item" href__="clothing.html">
<img src="https://media.base44.com/images/public/6a1b27d83ce9b63d928ff8ca/88b3e9c0f_generated_image.png" alt="Obsidian Hoodie" />
<div class="marquee-overlay"><span>Obsidian Hoodie</span></div>
</a>
<a class="marquee-item" href__="clothing.html">
<img src="https://media.base44.com/images/public/6a1b27d83ce9b63d928ff8ca/ef32beeba_generated_image.png" alt="MalyWorld Tee" />
<div class="marquee-overlay"><span>MalyWorld Tee</span></div>
</a>
<a class="marquee-item" href__="clothing.html">
<img src="https://media.base44.com/images/public/6a1b27d83ce9b63d928ff8ca/f649083c6_generated_image.png" alt="Studio Snapback" />
<div class="marquee-overlay"><span>Studio Snapback</span></div>
</a>
<a class="marquee-item" href__="clothing.html">
<img src="https://media.base44.com/images/public/6a1b27d83ce9b63d928ff8ca/e5fc51ff5_generated_image.png" alt="Stealth Joggers" />
<div class="marquee-overlay"><span>Stealth Joggers</span></div>
</a>
</div>
</div>
</section>
<!-- ═══ REVIEWS ═══ -->
<section id="reviews" class="section">
<div class="container">
<div class="section-header">
<p class="eyebrow">What Clients Say</p>
<h2 class="section-title">Trusted by creators for studio-quality results.</h2>
</div>
<div class="reviews-grid">
<article class="review-card">
<div class="quote-icon">"</div>
<p>xvStudios helped take our podcast to the next level. The team made the entire process easy and the final audio sounded amazing.</p>
<div>
<div class="review-author">Jordan L.</div>
<div class="review-role">Podcaster</div>
</div>
</article>
<article class="review-card">
<div class="quote-icon">"</div>
<p>Their studio delivers crisp sound and a comfortable environment. We recorded our music video here and the support was first-class.</p>
<div>
<div class="review-author">K. Rivera</div>
<div class="review-role">Music Producer</div>
</div>
</article>
<article class="review-card">
<div class="quote-icon">"</div>
<p>Professional, fast, and creative. The engineers and photographers at xvStudios know how to bring a project to life.</p>
<div>
<div class="review-author">S. Quinn</div>
<div class="review-role">Content Creator</div>
</div>
</article>
</div>
</div>
</section>
<!-- ═══ CONTACT ═══ -->
<section id="contact" class="section">
<div class="container">
<div class="contact-grid">
<div class="contact-details">
<p class="eyebrow">Book a Session</p>
<h2 class="section-title">Reserve your studio time at xvStudios.</h2>
<p>Share your project details, and we'll help you book the right room and support package.</p>
<div class="contact-meta">
<div class="contact-item">
<strong>Phone</strong>
<a href__="tel:+16187998158">618-799-8158</a>
</div>
<div class="contact-item">
<strong>Location</strong>
<span>1835 E Charleston Blvd, Las Vegas, NV</span>
</div>
<div class="contact-item">
<strong>Instagram</strong>
<a href__="https://instagram.com/xvmalyy" target="_blank" rel="noreferrer">@xvmalyy</a>
</div>
<div class="contact-item">
<strong>Twitch / YouTube</strong>
<a href__="https://twitch.tv/xvMaly" target="_blank" rel="noreferrer">xvMaly</a>
</div>
</div>
</div>
<form class="contact-form" onsubmit="handleSubmit(event)">
<label>Name<input type="text" placeholder="Your name" required /></label>
<label>Email<input type="email" placeholder="you@example.com" required /></label>
<label>Project Type<input type="text" placeholder="Podcast, music, video, livestream..." required /></label>
<label>Message<textarea placeholder="Tell us what you need and your preferred schedule" required></textarea></label>
<button type="submit" class="btn btn-primary" id="submit-btn">Request Booking →</button>
</form>
</div>
</div>
</section>
</main>
<!-- ═══ FOOTER ═══ -->
<footer class="site-footer">
<div class="container footer-inner">
<div>
<p>© 2026 xvStudios by MalyWorld.</p>
<p>1835 E Charleston Blvd · 618-799-8158</p>
</div>
<nav class="footer-nav">
<a href__="#home">Home</a>
<a href__="#services">What We Do</a>
<a href__="#reviews">Reviews</a>
<a href__="#contact">Book</a>
<a href__="clothing.html" class="accent">Shop</a>
</nav>
</div>
</footer>
<script>
// Sticky header
const header = document.getElementById('site-header');
window.addEventListener('scroll', () => {
header.classList.toggle('scrolled', window.scrollY > 40);
});
// Mobile nav toggle
const toggle = document.getElementById('nav-toggle');
const mobileNav = document.getElementById('mobile-nav');
toggle.addEventListener('click', () => {
mobileNav.classList.toggle('open');
});
// Close mobile nav on link click
mobileNav.querySelectorAll('a').forEach(a => {
a.addEventListener('click', () => mobileNav.classList.remove('open'));
});
// Form submit
function handleSubmit(e) {
e.preventDefault();
const btn = document.getElementById('submit-btn');
btn.textContent = 'Sent! We\'ll be in touch.';
btn.style.background = '#333';
btn.style.color = '#fff';
btn.disabled = true;
e.target.reset();
}
</script>
</body>
</html>