283 lines
10 KiB
HTML
283 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sabor Flow Da Nang — Dance community</title>
|
|
<meta name="description"
|
|
content="Da Nang's Latin dance community. Weekly socials, studios, classes, and festivals for Salsa, Bachata, Kizomba, and Zouk.">
|
|
<link rel="icon" type="image/jpeg" href="assets/logo.jpg">
|
|
<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=Bricolage+Grotesque:opsz,wght@12..60,700;12..60,800&family=Caveat+Brush&family=JetBrains+Mono:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="css/style.css?v=ba34a4ab">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Background blobs -->
|
|
<div class="sfB-bg" aria-hidden="true">
|
|
<span></span><span></span><span></span><span></span><span></span>
|
|
<div class="sfB-palms">
|
|
<img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt=""
|
|
style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
|
|
<img class="sfB-palm corner-tr" src="assets/palm-fronds-right.png" alt=""
|
|
style="--sway:3deg;animation-duration:9s;animation-delay:-2s">
|
|
<img class="sfB-palm corner-bl" src="assets/palm-fronds-left.png" alt=""
|
|
style="--sway:2.8deg;animation-duration:10s;animation-delay:-4s;--flip:scaleY(-1)">
|
|
<img class="sfB-palm corner-br" src="assets/palm-fronds-right.png" alt=""
|
|
style="--sway:2.2deg;animation-duration:11s;animation-delay:-1.5s;--flip:scaleY(-1)">
|
|
<img class="sfB-palm corner-ml" src="assets/palm-fronds-left.png" alt=""
|
|
style="--sway:3.2deg;animation-duration:9.5s;animation-delay:-3s">
|
|
<img class="sfB-palm corner-ml2" src="assets/palm-fronds-left.png" alt=""
|
|
style="--sway:2.6deg;animation-duration:10.5s;animation-delay:-6s;--flip:scaleY(-1)">
|
|
<img class="sfB-palm corner-mr" src="assets/palm-fronds-right.png" alt=""
|
|
style="--sway:2.4deg;animation-duration:11.5s;animation-delay:-1s">
|
|
<img class="sfB-palm corner-mr2" src="assets/palm-fronds-right.png" alt=""
|
|
style="--sway:3.4deg;animation-duration:8.5s;animation-delay:-7s;--flip:scaleY(-1)">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile nav overlay -->
|
|
<nav class="sfB-mobile-nav" id="sfB-mobile-nav" aria-label="Mobile navigation">
|
|
<button class="mnav-close" id="sfB-mobile-nav-close" aria-label="Close menu">✕</button>
|
|
<a href="/" class="active">Home</a>
|
|
<a href="/schedule">Schedule</a>
|
|
<a href="/connect">Connect</a>
|
|
<a href="/studios">Studios</a>
|
|
<a href="/classes">Classes</a>
|
|
<a href="/festivals">Festivals</a>
|
|
</nav>
|
|
|
|
<!-- Topbar -->
|
|
<header class="sfB-topbar">
|
|
<a href="/" class="logo">
|
|
<div class="mark"><img src="assets/logo.jpg" alt="Sabor Flow Da Nang"></div>
|
|
<div class="name">
|
|
Sabor Flow
|
|
<span class="city">Da Nang</span>
|
|
</div>
|
|
</a>
|
|
|
|
<nav class="sfB-nav" aria-label="Main navigation">
|
|
<a href="/" class="active">Home</a>
|
|
<a href="/schedule">Schedule</a>
|
|
<a href="/connect">Connect</a>
|
|
<a href="/studios">Studios</a>
|
|
<a href="/classes">Classes</a>
|
|
<a href="/festivals">Festivals</a>
|
|
</nav>
|
|
|
|
<div class="topbar-right">
|
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="sfB-ig">
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
|
|
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
|
</svg>
|
|
@saborflowdanang
|
|
</a>
|
|
<button class="sfB-hamburger" id="sfB-hamburger" aria-label="Open menu">
|
|
<span></span><span></span><span></span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero -->
|
|
<section class="sfB-hero">
|
|
<div class="left">
|
|
<div class="kicker">
|
|
<span class="dot"></span>
|
|
Dance Community · Da Nang · Hoi An
|
|
</div>
|
|
|
|
<h1>
|
|
<em class="glow">Sabor Flow</em>
|
|
<span class="vn"><span>DA NANG</span></span>
|
|
</h1>
|
|
|
|
<p class="lead">
|
|
Latin social dance almost every night of the week. Salsa, Bachata, Kizomba, Zouk — at bars and restaurants
|
|
across Da Nang and Hoi An. Everyone welcome, no partner needed.
|
|
</p>
|
|
|
|
<div class="ctas">
|
|
<a href="/schedule" class="sfB-btn primary">
|
|
Weekly Schedule
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
<polyline points="12 5 19 12 12 19" />
|
|
</svg>
|
|
</a>
|
|
<a href="/festivals" class="sfB-btn ghost">Upcoming Festivals</a>
|
|
</div>
|
|
|
|
<div class="meta-row">
|
|
<div class="item">
|
|
<div class="v">10+</div>
|
|
<div class="l">Socials/week</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="v">4</div>
|
|
<div class="l">Dance styles</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="v">2</div>
|
|
<div class="l">Cities</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="v">∞</div>
|
|
<div class="l">Good vibes</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card stack (decorative) -->
|
|
<div class="hero-right" aria-hidden="true">
|
|
<div class="sfB-stack-card c1">
|
|
<div class="ph"></div>
|
|
<span class="tag">Bachata</span>
|
|
</div>
|
|
<div class="sfB-stack-card c2">
|
|
<div class="ph"></div>
|
|
<span class="tag">Kizomba</span>
|
|
</div>
|
|
<div class="sfB-stack-card c3">
|
|
<div class="ph"></div>
|
|
<span class="tag">Salsa</span>
|
|
</div>
|
|
<div class="badge">
|
|
<div class="ic">🎶</div>
|
|
<div>
|
|
<div class="t">Socials almost every night</div>
|
|
<div class="s">Da Nang · Hoi An</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Marquee -->
|
|
<div class="sfB-marquee" aria-hidden="true">
|
|
<div class="track">
|
|
<span>Salsa</span>
|
|
<span>Bachata</span>
|
|
<span>Kizomba</span>
|
|
<span>Zouk</span>
|
|
<span>Da Nang</span>
|
|
<span>Hoi An</span>
|
|
<span>Salsa</span>
|
|
<span>Bachata</span>
|
|
<span>Kizomba</span>
|
|
<span>Zouk</span>
|
|
<span>Da Nang</span>
|
|
<span>Hoi An</span>
|
|
<span>Salsa</span>
|
|
<span>Bachata</span>
|
|
<span>Kizomba</span>
|
|
<span>Zouk</span>
|
|
<span>Da Nang</span>
|
|
<span>Hoi An</span>
|
|
<span>Salsa</span>
|
|
<span>Bachata</span>
|
|
<span>Kizomba</span>
|
|
<span>Zouk</span>
|
|
<span>Da Nang</span>
|
|
<span>Hoi An</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pillars -->
|
|
<section class="sfB-pillars">
|
|
<div class="head">
|
|
<h2>What we <em>do</em></h2>
|
|
<span class="num">— 01 / 03</span>
|
|
</div>
|
|
<div class="sfB-grid3">
|
|
<div class="sfB-pcard c1">
|
|
<span class="num">01</span>
|
|
<div class="arr">→</div>
|
|
<h3>Social <em>Dancing</em></h3>
|
|
<p>Almost-daily gatherings at bars, clubs, and restaurants. Small cover charge, great music, warm people.
|
|
Beginner or pro — everyone is welcome.</p>
|
|
</div>
|
|
<div class="sfB-pcard c2">
|
|
<span class="num">02</span>
|
|
<div class="arr">→</div>
|
|
<h3>Multiple <em>Styles</em></h3>
|
|
<p>Salsa, Bachata, Kizomba, and the fast-growing Zouk. Each night has its own vibe and music ratio — find the
|
|
scene that moves you.</p>
|
|
</div>
|
|
<div class="sfB-pcard c3">
|
|
<span class="num">03</span>
|
|
<div class="arr">→</div>
|
|
<h3><em>Community</em> First</h3>
|
|
<p>A free, non-profit initiative by two Vietnamese women passionate about dance. Here to support and grow Da
|
|
Nang's Latin dance scene.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Coming up teaser -->
|
|
<section class="sfB-coming">
|
|
<div class="head">
|
|
<h2>Coming up <em>this week</em></h2>
|
|
<a href="/schedule">
|
|
Full schedule
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="5" y1="12" x2="19" y2="12" />
|
|
<polyline points="12 5 19 12 12 19" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div class="sfB-coming-row" id="sfB-coming-row"></div>
|
|
</section>
|
|
|
|
<!-- CTA block -->
|
|
<div class="sfB-cta">
|
|
<div>
|
|
<div class="quote">
|
|
Dance is how we <em>connect</em> — no language needed.
|
|
</div>
|
|
<div class="who">Sabor Flow Da Nang</div>
|
|
</div>
|
|
<div class="cta-right">
|
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">
|
|
Follow on Instagram
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
|
|
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
|
|
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="sfB-foot">
|
|
<div>
|
|
<strong>Sabor Flow</strong> Da Nang — Latin dance community © <span id="footer-year">2025</span>
|
|
</div>
|
|
<nav class="foot-links">
|
|
<a href="/">Home</a>
|
|
<a href="/schedule">Schedule</a>
|
|
<a href="/connect">Connect</a>
|
|
<a href="/studios">Studios</a>
|
|
<a href="/classes">Classes</a>
|
|
<a href="/festivals">Festivals</a>
|
|
</nav>
|
|
<div class="foot-social">
|
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">Instagram</a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/main.js?v=ba34a4ab"></script>
|
|
</body>
|
|
|
|
</html> |