Compare commits
3 Commits
a8f33dc0ba
...
fbe417dcd4
| Author | SHA1 | Date | |
|---|---|---|---|
| fbe417dcd4 | |||
| 3ad3b0b497 | |||
| 704c6afcf9 |
7
.gitignore
vendored
Normal file
7
.gitignore
vendored
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
raw/
|
||||||
|
CLAUDE.md
|
||||||
|
.claude/
|
||||||
|
.DS_Store
|
||||||
|
node_modules/
|
||||||
|
*.log
|
||||||
|
Thumbs.db
|
||||||
13
README.txt
13
README.txt
@@ -0,0 +1,13 @@
|
|||||||
|
SaborFlow Da Nang
|
||||||
|
=================
|
||||||
|
Website for the Latin dance community in Da Nang, Vietnam.
|
||||||
|
|
||||||
|
A non-profit initiative supporting social dancers in Da Nang and Hoi An.
|
||||||
|
Salsa · Bachata · Kizomba · Zouk
|
||||||
|
|
||||||
|
Instagram: @saborflowdanang
|
||||||
|
https://www.instagram.com/saborflowdanang/
|
||||||
|
|
||||||
|
---
|
||||||
|
Tech: HTML + CSS + JS (no build tools required)
|
||||||
|
Deploy: commit to master branch
|
||||||
|
|||||||
BIN
assets/logo.jpg
Normal file
BIN
assets/logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
254
classes.html
Normal file
254
classes.html
Normal file
@@ -0,0 +1,254 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Dance Classes — SaborFlow Da Nang</title>
|
||||||
|
<meta name="description" content="Latin dance classes in Da Nang. Find Salsa, Bachata, Kizomba, and Zouk classes for all levels.">
|
||||||
|
<link rel="icon" type="image/jpeg" href="assets/logo.jpg">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-container">
|
||||||
|
<a href="index.html" class="nav-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="nav-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</button>
|
||||||
|
<ul class="nav-links" id="nav-links">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="schedule.html">Schedule</a></li>
|
||||||
|
<li><a href="connect.html">Connect</a></li>
|
||||||
|
<li><a href="studios.html">Studios</a></li>
|
||||||
|
<li><a href="classes.html" class="active">Classes</a></li>
|
||||||
|
<li><a href="festivals.html">Festivals</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="page-header">
|
||||||
|
<p class="section-label">Da Nang · Hoi An</p>
|
||||||
|
<h1>Dance Classes</h1>
|
||||||
|
<p class="subtitle">Whether you’re just starting out or looking to sharpen your moves — there’s a class for you.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-bar">
|
||||||
|
<button class="filter-pill active" data-filter="all">All</button>
|
||||||
|
<button class="filter-pill" data-filter="salsa">Salsa</button>
|
||||||
|
<button class="filter-pill" data-filter="bachata">Bachata</button>
|
||||||
|
<button class="filter-pill" data-filter="kizomba">Kizomba</button>
|
||||||
|
<button class="filter-pill" data-filter="zouk">Zouk</button>
|
||||||
|
<button class="filter-pill" data-filter="beginner">Beginner</button>
|
||||||
|
<button class="filter-pill" data-filter="advanced">Advanced</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-grid">
|
||||||
|
|
||||||
|
<!-- Lucho Giraldes — Salsa -->
|
||||||
|
<div class="card filterable-card" data-styles="salsa,beginner,intermediate,advanced">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-title">Lucho Giraldes — Salsa</div>
|
||||||
|
<div class="tags">
|
||||||
|
<span class="tag tag-salsa">Salsa On1</span>
|
||||||
|
<span class="tag tag-salsa">Salsa On2</span>
|
||||||
|
<span class="tag tag-beginner">Beginner</span>
|
||||||
|
<span class="tag tag-intermediate">Intermediate</span>
|
||||||
|
<span class="tag tag-advanced">Advanced</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||||||
|
<span>Lucho Giraldes — 20+ years experience</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||||
|
<span>Various venues in Da Nang (see website for details)</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<span>Check website for current schedule</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="https://salsadanang.com" target="_blank" rel="noopener" class="card-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||||
|
salsadanang.com
|
||||||
|
</a>
|
||||||
|
<a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener" class="card-link">
|
||||||
|
<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>
|
||||||
|
@salsadanang
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Daisy Nguyen -->
|
||||||
|
<div class="card filterable-card" data-styles="bachata,kizomba,intermediate">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-title">Daisy Nguyen</div>
|
||||||
|
<div class="tags">
|
||||||
|
<span class="tag tag-bachata">Bachata</span>
|
||||||
|
<span class="tag tag-kizomba">Kizomba</span>
|
||||||
|
<span class="tag tag-intermediate">Intermediate</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||||||
|
<span>Daisy Nguyen — local instructor & social organizer</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||||
|
<span>Da Nang (venues change — follow for updates)</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<span>Tuesday at Caliz Bar · Sunday at Corner Bar</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="card-link">
|
||||||
|
<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>
|
||||||
|
Check Instagram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Frog Goose — Bachata Workshop -->
|
||||||
|
<div class="card filterable-card" data-styles="bachata,beginner,intermediate">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-title">Frog Goose — Bachata Workshop</div>
|
||||||
|
<div class="tags">
|
||||||
|
<span class="tag tag-bachata">Bachata</span>
|
||||||
|
<span class="tag tag-beginner">Beginner</span>
|
||||||
|
<span class="tag tag-intermediate">Intermediate</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||||||
|
<span>Luu Nhat Phuong, Phong & Shai</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||||
|
<span>292 Vo Nguyen Giap, Ngu Hanh Son, Da Nang</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<span>Every Monday — Workshop 8:30 PM · Social from 9:30 PM</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener" class="card-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
Facebook
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sean Kim — Kizomba & Bachata -->
|
||||||
|
<div class="card filterable-card" data-styles="kizomba,bachata,intermediate">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-title">Sean Kim — Kizomba & Bachata</div>
|
||||||
|
<div class="tags">
|
||||||
|
<span class="tag tag-kizomba">Kizomba</span>
|
||||||
|
<span class="tag tag-bachata">Bachata</span>
|
||||||
|
<span class="tag tag-intermediate">Intermediate</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||||||
|
<span>Sean Kim — organizer of the Wednesday Bachata Kiz Night</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||||
|
<span>Ket Fai Bar, Da Nang</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<span>Wednesday — Kizomba from 19:30 · Bachata from 21:00</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="connect.html" class="card-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||||
|
Contact via SaborFlow
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 50 Decibels -->
|
||||||
|
<div class="card filterable-card" data-styles="kizomba,zouk,salsa,bachata,beginner">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-title">50 Decibels</div>
|
||||||
|
<div class="tags">
|
||||||
|
<span class="tag tag-kizomba">Kizomba</span>
|
||||||
|
<span class="tag tag-zouk">Zouk</span>
|
||||||
|
<span class="tag tag-salsa">Salsa</span>
|
||||||
|
<span class="tag tag-bachata">Bachata</span>
|
||||||
|
<span class="tag tag-beginner">Beginner-friendly</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||||
|
<span>36 Đ. Ng. Thi Si, Bac My An, Ngu Hanh Son, Da Nang</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<span>Monday 9 PM — Kizomba & Zouk night</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<span>Friday 9 PM — Latin Vibes (Salsa, Bachata, Kizomba)</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||||||
|
<span>~$3 USD cover</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3" style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center">
|
||||||
|
<p style="color:var(--muted);margin-bottom:1rem">Teaching in Da Nang and not listed here? Get in touch.</p>
|
||||||
|
<a href="connect.html" class="btn btn-ghost">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||||
|
<span>Contact Us</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer" style="margin-top:4rem">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-inner">
|
||||||
|
<div>
|
||||||
|
<a href="index.html" class="footer-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="footer-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-tagline">Da Nang's Latin dance community</p>
|
||||||
|
</div>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="schedule.html">Schedule</a>
|
||||||
|
<a href="connect.html">Connect</a>
|
||||||
|
<a href="studios.html">Studios</a>
|
||||||
|
<a href="classes.html">Classes</a>
|
||||||
|
<a href="festivals.html">Festivals</a>
|
||||||
|
</nav>
|
||||||
|
<div class="footer-social">
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<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>
|
||||||
|
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
Da Nang SBK Group
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
140
connect.html
Normal file
140
connect.html
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Connect — SaborFlow Da Nang</title>
|
||||||
|
<meta name="description" content="Follow SaborFlow Da Nang on Instagram and get in touch with the Latin dance community.">
|
||||||
|
<link rel="icon" type="image/jpeg" href="assets/logo.jpg">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-container">
|
||||||
|
<a href="index.html" class="nav-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="nav-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</button>
|
||||||
|
<ul class="nav-links" id="nav-links">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="schedule.html">Schedule</a></li>
|
||||||
|
<li><a href="connect.html" class="active">Connect</a></li>
|
||||||
|
<li><a href="studios.html">Studios</a></li>
|
||||||
|
<li><a href="classes.html">Classes</a></li>
|
||||||
|
<li><a href="festivals.html">Festivals</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="page-header">
|
||||||
|
<p class="section-label">Stay in the loop</p>
|
||||||
|
<h1>Connect</h1>
|
||||||
|
<p class="subtitle">Follow for the latest socials, photos, and community news.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Instagram profile card -->
|
||||||
|
<div class="ig-profile-card">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow Da Nang" class="ig-avatar">
|
||||||
|
<div class="ig-handle">@saborflowdanang</div>
|
||||||
|
<p class="ig-desc">Photos, videos, and announcements from Da Nang's Latin dance community. Social dances almost every day of the week.</p>
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
|
||||||
|
<svg width="14" height="14" 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>
|
||||||
|
<span>Open on Instagram</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Latest posts -->
|
||||||
|
<p class="section-label" style="margin-bottom:1.5rem">Latest posts</p>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
HOW TO ADD REAL INSTAGRAM EMBEDS:
|
||||||
|
1. Open instagram.com and go to any post from @saborflowdanang
|
||||||
|
2. Click the three dots on the post → "Embed"
|
||||||
|
3. Copy the embed code and paste it here, replacing one of the placeholders below.
|
||||||
|
The <script> tag at the bottom of the page loads them automatically.
|
||||||
|
-->
|
||||||
|
<div class="ig-embeds">
|
||||||
|
|
||||||
|
<div class="ig-placeholder">
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><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>
|
||||||
|
<p>Latest posts from the community</p>
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ig-placeholder">
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
|
||||||
|
<p>Videos, reels, and social dance moments</p>
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ig-placeholder">
|
||||||
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="color:var(--muted)"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||||
|
<p>Workshops, festivals, and special events</p>
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal);font-size:.75rem;letter-spacing:.1em;font-weight:600;text-transform:uppercase">View on Instagram</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<div class="contact-box">
|
||||||
|
<p class="section-label">Get in touch</p>
|
||||||
|
<h2 style="margin-bottom:1rem">Want to collaborate?</h2>
|
||||||
|
<p style="color:var(--muted);max-width:540px;margin:0 auto 2rem">
|
||||||
|
Want to host a social? Suggest a venue? Collaborate on an event? Or just say hi?
|
||||||
|
We’d love to hear from you — we don’t bite, we just dance.
|
||||||
|
</p>
|
||||||
|
<div class="contact-ctas">
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
|
||||||
|
<svg width="14" height="14" 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>
|
||||||
|
<span>DM on Instagram</span>
|
||||||
|
</a>
|
||||||
|
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="btn btn-ghost">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
<span>Join the Facebook Group</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer" style="margin-top:4rem">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-inner">
|
||||||
|
<div>
|
||||||
|
<a href="index.html" class="footer-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="footer-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-tagline">Da Nang's Latin dance community</p>
|
||||||
|
</div>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="schedule.html">Schedule</a>
|
||||||
|
<a href="connect.html">Connect</a>
|
||||||
|
<a href="studios.html">Studios</a>
|
||||||
|
<a href="classes.html">Classes</a>
|
||||||
|
<a href="festivals.html">Festivals</a>
|
||||||
|
</nav>
|
||||||
|
<div class="footer-social">
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<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>
|
||||||
|
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
Da Nang SBK Group
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script async src="//www.instagram.com/embed.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
734
css/style.css
Normal file
734
css/style.css
Normal file
@@ -0,0 +1,734 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700;800&family=Inter:wght@300;400;500;600&display=swap');
|
||||||
|
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #111111;
|
||||||
|
--surface: #181818;
|
||||||
|
--border: #222222;
|
||||||
|
--orange: #e8572a;
|
||||||
|
--gold: #f0a030;
|
||||||
|
--teal: #18b8b8;
|
||||||
|
--coral: #d05570;
|
||||||
|
--text: #ebebeb;
|
||||||
|
--muted: #666666;
|
||||||
|
--radius: 2px;
|
||||||
|
--tr: 0.2s ease;
|
||||||
|
--max-w: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.65;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
a { color: inherit; text-decoration: none; }
|
||||||
|
img { max-width: 100%; height: auto; display: block; }
|
||||||
|
ul { list-style: none; }
|
||||||
|
|
||||||
|
.container { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; }
|
||||||
|
|
||||||
|
/* ===== TYPE ===== */
|
||||||
|
h1, h2, h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; line-height: 1.1; color: var(--text); }
|
||||||
|
h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
|
||||||
|
h2 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
|
||||||
|
h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
|
||||||
|
|
||||||
|
.section-label {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.28em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--orange);
|
||||||
|
margin-bottom: 0.85rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
.section-label::before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 18px;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--orange);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== NAV ===== */
|
||||||
|
.nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: rgba(17,17,17,0.94);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
max-width: var(--max-w);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-brand { display: flex; align-items: center; gap: 0.65rem; }
|
||||||
|
.nav-brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
|
||||||
|
.nav-brand-name {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links { display: flex; align-items: center; }
|
||||||
|
.nav-links a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.3rem 0.85rem;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
position: relative;
|
||||||
|
transition: color var(--tr);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.nav-links a::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: -1px;
|
||||||
|
left: 0.85rem;
|
||||||
|
right: 0.85rem;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--orange);
|
||||||
|
transform: scaleX(0);
|
||||||
|
transition: transform var(--tr);
|
||||||
|
}
|
||||||
|
.nav-links a:hover { color: var(--text); }
|
||||||
|
.nav-links a:hover::after { transform: scaleX(1); }
|
||||||
|
.nav-links a.active { color: var(--text); }
|
||||||
|
.nav-links a.active::after { transform: scaleX(1); background: var(--gold); }
|
||||||
|
|
||||||
|
.nav-hamburger {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: var(--tr); }
|
||||||
|
|
||||||
|
/* ===== BUTTONS ===== */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
padding: 0.8rem 1.75rem;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: color var(--tr), box-shadow var(--tr);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.btn > span, .btn > svg { position: relative; z-index: 1; }
|
||||||
|
.btn::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
transform: translateX(-101%);
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.btn:hover::before { transform: translateX(0); }
|
||||||
|
|
||||||
|
.btn-primary { background: var(--orange); color: #fff; }
|
||||||
|
.btn-primary::before { background: #0f0f0f; }
|
||||||
|
.btn-primary:hover { color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
|
||||||
|
|
||||||
|
.btn-outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
|
||||||
|
.btn-outline::before { background: rgba(255,255,255,0.05); }
|
||||||
|
.btn-outline:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28); }
|
||||||
|
|
||||||
|
.btn-orange-outline { background: transparent; color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
|
||||||
|
.btn-orange-outline::before { background: var(--orange); }
|
||||||
|
.btn-orange-outline:hover { color: #fff; }
|
||||||
|
|
||||||
|
.btn-ghost { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border); }
|
||||||
|
.btn-ghost::before { background: var(--surface); }
|
||||||
|
.btn-ghost:hover { color: var(--text); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
|
||||||
|
|
||||||
|
/* Inline text CTA */
|
||||||
|
.cta-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.65rem;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text);
|
||||||
|
transition: color var(--tr), gap var(--tr);
|
||||||
|
}
|
||||||
|
.cta-link svg { transition: transform var(--tr); }
|
||||||
|
.cta-link:hover { color: var(--gold); gap: 1rem; }
|
||||||
|
.cta-link:hover svg { transform: translateX(3px); }
|
||||||
|
|
||||||
|
/* ===== SECTIONS ===== */
|
||||||
|
section { padding: 5rem 0; }
|
||||||
|
|
||||||
|
.page-header { padding: 4rem 0 3rem; }
|
||||||
|
.page-header h1 { margin-bottom: 0.65rem; }
|
||||||
|
.page-header .subtitle { color: var(--muted); font-size: 0.92rem; max-width: 500px; }
|
||||||
|
|
||||||
|
/* ===== CARDS ===== */
|
||||||
|
.card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: border-color var(--tr);
|
||||||
|
}
|
||||||
|
.card:hover { border-color: rgba(232,87,42,0.35); }
|
||||||
|
.card-body { padding: 1.5rem; }
|
||||||
|
.card-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.4rem; }
|
||||||
|
.card-text { color: var(--muted); font-size: 0.85rem; line-height: 1.65; }
|
||||||
|
|
||||||
|
/* Loose card grid (studios, classes) */
|
||||||
|
.card-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tight bordered grid (about, explore, teaser) */
|
||||||
|
.grid-tight {
|
||||||
|
display: grid;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.grid-tight > * {
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
transition: background var(--tr);
|
||||||
|
}
|
||||||
|
.grid-tight > *:hover { background: var(--surface); }
|
||||||
|
|
||||||
|
/* ===== TAGS ===== */
|
||||||
|
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.75rem 0; }
|
||||||
|
.tag {
|
||||||
|
padding: 0.15rem 0.55rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.tag-salsa { background: rgba(232,87,42,0.14); color: var(--orange); }
|
||||||
|
.tag-bachata { background: rgba(208,85,112,0.14); color: var(--coral); }
|
||||||
|
.tag-kizomba { background: rgba(24,184,184,0.14); color: var(--teal); }
|
||||||
|
.tag-zouk { background: rgba(240,160,48,0.14); color: var(--gold); }
|
||||||
|
.tag-tango { background: rgba(120,120,120,0.1); color: var(--muted); }
|
||||||
|
.tag-beginner { background: rgba(24,184,184,0.14); color: var(--teal); }
|
||||||
|
.tag-intermediate { background: rgba(240,160,48,0.14); color: var(--gold); }
|
||||||
|
.tag-advanced { background: rgba(232,87,42,0.14); color: var(--orange); }
|
||||||
|
|
||||||
|
/* ===== FILTERS ===== */
|
||||||
|
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2.5rem; }
|
||||||
|
.filter-pill {
|
||||||
|
padding: 0.45rem 1rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--muted);
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: background var(--tr), color var(--tr), border-color var(--tr);
|
||||||
|
}
|
||||||
|
.filter-pill:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
|
||||||
|
.filter-pill.active { background: var(--orange); border-color: var(--orange); color: #fff; }
|
||||||
|
|
||||||
|
/* ===== CARD INFO & LINKS ===== */
|
||||||
|
.card-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.5rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.83rem;
|
||||||
|
margin-top: 0.6rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.card-info svg { margin-top: 2px; flex-shrink: 0; color: var(--orange); opacity: 0.5; }
|
||||||
|
.card-info a { color: var(--text); }
|
||||||
|
.card-info a:hover { color: var(--orange); }
|
||||||
|
|
||||||
|
.card-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
|
||||||
|
.card-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
transition: color var(--tr);
|
||||||
|
}
|
||||||
|
.card-link:hover { color: var(--orange); }
|
||||||
|
|
||||||
|
/* ===== HERO ===== */
|
||||||
|
.hero {
|
||||||
|
min-height: calc(100vh - 60px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 70% 50% at 50% 100%, rgba(232,87,42,0.07) 0%, transparent 100%),
|
||||||
|
radial-gradient(ellipse 40% 30% at 75% 15%, rgba(240,160,48,0.04) 0%, transparent 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.hero::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 2rem;
|
||||||
|
top: 20%;
|
||||||
|
bottom: 20%;
|
||||||
|
width: 1px;
|
||||||
|
background: linear-gradient(to bottom, transparent, rgba(232,87,42,0.2), transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content { position: relative; z-index: 1; padding: 3rem 2rem; max-width: 720px; }
|
||||||
|
|
||||||
|
.hero-eyebrow {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.32em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.hero-eyebrow::before, .hero-eyebrow::after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 32px;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-logo {
|
||||||
|
width: 110px;
|
||||||
|
height: 110px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
margin: 0 auto 2.5rem;
|
||||||
|
border: 1px solid rgba(232,87,42,0.18);
|
||||||
|
box-shadow: 0 0 48px rgba(232,87,42,0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-title {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: clamp(4rem, 13vw, 9rem);
|
||||||
|
font-weight: 800;
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
line-height: 1;
|
||||||
|
color: var(--text);
|
||||||
|
margin-bottom: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-rule { width: 36px; height: 1px; background: var(--orange); margin: 1.5rem auto; }
|
||||||
|
|
||||||
|
.hero-subtitle {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.28em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 3.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-ctas { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem; }
|
||||||
|
.hero-divider { width: 1px; height: 14px; background: var(--border); }
|
||||||
|
|
||||||
|
/* ===== ABOUT GRID ===== */
|
||||||
|
.about-grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
.about-card { padding: 2.5rem 2rem; }
|
||||||
|
.about-card .card-icon { width: 28px; height: 28px; color: var(--orange); opacity: 0.7; margin-bottom: 1.25rem; display: block; }
|
||||||
|
.about-card h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.6rem; }
|
||||||
|
.about-card p { color: var(--muted); font-size: 0.83rem; line-height: 1.75; }
|
||||||
|
|
||||||
|
/* ===== TEASER ===== */
|
||||||
|
.teaser-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
|
||||||
|
.teaser-card { padding: 1.5rem; }
|
||||||
|
.teaser-day {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.58rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.22em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--orange);
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
.teaser-social { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--text); margin-bottom: 0.2rem; }
|
||||||
|
.teaser-venue { color: var(--muted); font-size: 0.78rem; }
|
||||||
|
.teaser-meta { color: var(--muted); font-size: 0.75rem; margin-top: 0.3rem; }
|
||||||
|
|
||||||
|
/* ===== IG BANNER ===== */
|
||||||
|
.ig-banner {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 4.5rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.ig-banner::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(232,87,42,0.06) 0%, transparent 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.ig-banner > * { position: relative; z-index: 1; }
|
||||||
|
.ig-banner h2 { margin-bottom: 0.65rem; }
|
||||||
|
.ig-banner p { color: var(--muted); margin-bottom: 2rem; font-size: 0.88rem; max-width: 420px; margin-left: auto; margin-right: auto; }
|
||||||
|
|
||||||
|
/* ===== EXPLORE GRID ===== */
|
||||||
|
.explore-grid { grid-template-columns: repeat(3, 1fr); }
|
||||||
|
.explore-card { padding: 2.5rem 2rem; display: block; }
|
||||||
|
.explore-card .card-icon { width: 24px; height: 24px; color: var(--muted); margin-bottom: 1.25rem; display: block; transition: color var(--tr); }
|
||||||
|
.explore-card:hover .card-icon { color: var(--orange); }
|
||||||
|
.explore-card .card-title { font-size: 0.9rem; margin-bottom: 0.45rem; }
|
||||||
|
.explore-card .card-text { font-size: 0.8rem; }
|
||||||
|
|
||||||
|
/* ===== SCHEDULE TABLE ===== */
|
||||||
|
.schedule-note {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-left: 2px solid var(--teal);
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.83rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.75rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
}
|
||||||
|
.schedule-note svg { flex-shrink: 0; margin-top: 2px; color: var(--teal); opacity: 0.6; }
|
||||||
|
|
||||||
|
.schedule-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
|
||||||
|
.schedule-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
|
||||||
|
.schedule-table thead th {
|
||||||
|
background: var(--surface);
|
||||||
|
padding: 0.8rem 1.25rem;
|
||||||
|
text-align: left;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.58rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
color: var(--muted);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.schedule-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--tr); }
|
||||||
|
.schedule-table tbody tr:last-child { border-bottom: none; }
|
||||||
|
.schedule-table tbody tr:hover { background: var(--surface); }
|
||||||
|
.schedule-table td { padding: 1rem 1.25rem; vertical-align: middle; }
|
||||||
|
|
||||||
|
.day-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.12rem 0.5rem;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.58rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.day-monday { background: rgba(232,87,42,0.12); color: var(--orange); }
|
||||||
|
.day-tuesday { background: rgba(240,160,48,0.12); color: var(--gold); }
|
||||||
|
.day-wednesday { background: rgba(24,184,184,0.12); color: var(--teal); }
|
||||||
|
.day-thursday { background: rgba(208,85,112,0.12); color: var(--coral); }
|
||||||
|
.day-friday { background: rgba(232,87,42,0.12); color: var(--orange); }
|
||||||
|
.day-saturday { background: rgba(240,160,48,0.12); color: var(--gold); }
|
||||||
|
.day-sunday { background: rgba(24,184,184,0.12); color: var(--teal); }
|
||||||
|
|
||||||
|
.social-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 0.83rem; color: var(--text); }
|
||||||
|
.venue-name { color: var(--muted); font-size: 0.8rem; }
|
||||||
|
.music-text { color: var(--muted); font-size: 0.78rem; }
|
||||||
|
.city-badge { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.7rem; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; }
|
||||||
|
.organizer-text { color: var(--muted); font-size: 0.78rem; }
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.schedule-table-wrap { border: none; overflow: visible; }
|
||||||
|
.schedule-table, .schedule-table thead, .schedule-table tbody,
|
||||||
|
.schedule-table tr, .schedule-table th, .schedule-table td { display: block; width: 100%; }
|
||||||
|
.schedule-table thead { display: none; }
|
||||||
|
.schedule-table tbody tr {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-left: 2px solid var(--orange);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.schedule-table td { padding: 0.3rem 0; border: none; }
|
||||||
|
.schedule-table td::before {
|
||||||
|
content: attr(data-label);
|
||||||
|
display: block;
|
||||||
|
font-size: 0.58rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== CONNECT ===== */
|
||||||
|
.ig-profile-card {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.ig-profile-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse 50% 60% at 50% 0%, rgba(232,87,42,0.05) 0%, transparent 100%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.ig-profile-card > * { position: relative; z-index: 1; }
|
||||||
|
.ig-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.25rem; border: 1px solid rgba(232,87,42,0.25); }
|
||||||
|
.ig-handle { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--text); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
|
||||||
|
.ig-desc { color: var(--muted); margin-bottom: 2rem; font-size: 0.875rem; max-width: 400px; margin-left: auto; margin-right: auto; }
|
||||||
|
|
||||||
|
.ig-embeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 3rem; }
|
||||||
|
.ig-placeholder {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
min-height: 280px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
gap: 1rem;
|
||||||
|
transition: border-color var(--tr), background var(--tr);
|
||||||
|
}
|
||||||
|
.ig-placeholder:hover { border-color: rgba(232,87,42,0.25); background: var(--surface); }
|
||||||
|
.ig-placeholder svg { color: var(--muted); opacity: 0.2; }
|
||||||
|
.ig-placeholder p { color: var(--muted); font-size: 0.82rem; }
|
||||||
|
.ig-placeholder a { color: var(--orange); font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
|
||||||
|
|
||||||
|
.contact-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 3.5rem 2rem; text-align: center; }
|
||||||
|
.contact-box h2 { margin-bottom: 0.75rem; }
|
||||||
|
.contact-box p { color: var(--muted); margin-bottom: 2rem; max-width: 420px; margin-left: auto; margin-right: auto; font-size: 0.875rem; }
|
||||||
|
.contact-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
|
||||||
|
|
||||||
|
/* ===== STUDIO CARDS ===== */
|
||||||
|
.studio-card { position: relative; }
|
||||||
|
.studio-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0; left: 0; right: 0;
|
||||||
|
height: 2px;
|
||||||
|
background: linear-gradient(90deg, var(--orange), var(--gold));
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity var(--tr);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.studio-card:hover::before { opacity: 1; }
|
||||||
|
|
||||||
|
/* ===== FESTIVAL CARDS ===== */
|
||||||
|
.festival-card {
|
||||||
|
background: var(--surface);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
transition: border-color var(--tr);
|
||||||
|
}
|
||||||
|
.festival-card:hover { border-color: rgba(232,87,42,0.35); }
|
||||||
|
|
||||||
|
.festival-poster {
|
||||||
|
height: 240px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding: 2rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.festival-card-le .festival-poster { background: linear-gradient(135deg, #0e0614 0%, #1a0830 60%, #070e1a 100%); }
|
||||||
|
.festival-card-le .festival-poster::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse 60% 80% at 40% 50%, rgba(208,85,112,0.3), transparent 70%);
|
||||||
|
}
|
||||||
|
.festival-card-vlx .festival-poster { background: linear-gradient(135deg, #060e06 0%, #0a1a0a 60%, #060e1a 100%); }
|
||||||
|
.festival-card-vlx .festival-poster::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse 60% 80% at 60% 50%, rgba(24,184,184,0.28), transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.festival-poster-content { position: relative; z-index: 1; }
|
||||||
|
.festival-poster h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1.05; margin-bottom: 0.3rem; letter-spacing: -0.02em; }
|
||||||
|
.festival-dates { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.62rem; font-weight: 700; color: rgba(255,255,255,0.45); letter-spacing: 0.22em; text-transform: uppercase; }
|
||||||
|
|
||||||
|
.festival-body { padding: 2rem; }
|
||||||
|
.festival-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
|
||||||
|
.festival-meta-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--muted); }
|
||||||
|
.festival-meta-item svg { color: var(--orange); opacity: 0.5; flex-shrink: 0; }
|
||||||
|
.festival-meta-item strong { color: var(--text); font-weight: 500; }
|
||||||
|
.festival-desc { color: var(--muted); margin-bottom: 1.75rem; line-height: 1.75; font-size: 0.875rem; }
|
||||||
|
.festival-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
|
||||||
|
|
||||||
|
/* ===== CALLOUT ===== */
|
||||||
|
.callout { border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; }
|
||||||
|
.callout p { color: var(--muted); margin-bottom: 1.25rem; font-size: 0.875rem; }
|
||||||
|
|
||||||
|
/* ===== FOOTER ===== */
|
||||||
|
.footer { margin-top: auto; border-top: 1px solid var(--border); padding: 3rem 0 2rem; }
|
||||||
|
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: start; }
|
||||||
|
|
||||||
|
.footer-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; }
|
||||||
|
.footer-brand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
|
||||||
|
.footer-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; color: var(--text); }
|
||||||
|
.footer-tagline { color: var(--muted); font-size: 0.72rem; }
|
||||||
|
|
||||||
|
.footer-nav { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
|
||||||
|
.footer-nav a {
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
transition: color var(--tr);
|
||||||
|
}
|
||||||
|
.footer-nav a:hover { color: var(--text); }
|
||||||
|
|
||||||
|
.footer-social { display: flex; flex-direction: column; gap: 0.65rem; align-items: flex-end; }
|
||||||
|
.footer-social-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--muted);
|
||||||
|
transition: color var(--tr);
|
||||||
|
}
|
||||||
|
.footer-social-link:hover { color: var(--orange); }
|
||||||
|
|
||||||
|
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); text-align: center; font-size: 0.68rem; color: var(--muted); opacity: 0.5; }
|
||||||
|
|
||||||
|
/* ===== RESPONSIVE ===== */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.about-grid, .explore-grid { grid-template-columns: 1fr; }
|
||||||
|
.footer-inner { grid-template-columns: 1fr; }
|
||||||
|
.footer-social { align-items: flex-start; }
|
||||||
|
.footer-nav { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-hamburger { display: flex; }
|
||||||
|
.nav-links {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(17,17,17,0.98);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.5rem 0;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.nav-links.open { display: flex; }
|
||||||
|
.nav-links li { width: 100%; }
|
||||||
|
.nav-links a { display: block; padding: 0.8rem 2rem; }
|
||||||
|
.nav-links a::after { display: none; }
|
||||||
|
|
||||||
|
.hero::after { display: none; }
|
||||||
|
.hero-ctas { flex-direction: column; align-items: center; }
|
||||||
|
.hero-divider { display: none; }
|
||||||
|
|
||||||
|
.teaser-grid { grid-template-columns: 1fr; }
|
||||||
|
.ig-embeds { grid-template-columns: 1fr; }
|
||||||
|
.festival-meta { flex-direction: column; gap: 0.5rem; }
|
||||||
|
|
||||||
|
section { padding: 3rem 0; }
|
||||||
|
.page-header { padding: 2.5rem 0 2rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.card-grid { grid-template-columns: 1fr; }
|
||||||
|
.container { padding: 0 1.25rem; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== UTILITY ===== */
|
||||||
|
.hidden { display: none !important; }
|
||||||
|
.mt-2 { margin-top: 1.5rem; }
|
||||||
|
.mt-3 { margin-top: 2.5rem; }
|
||||||
182
festivals.html
Normal file
182
festivals.html
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Festivals — SaborFlow Da Nang</title>
|
||||||
|
<meta name="description" content="Latin dance festivals in Da Nang, Vietnam. Multi-day events with international artists, workshops, and social dancing.">
|
||||||
|
<link rel="icon" type="image/jpeg" href="assets/logo.jpg">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-container">
|
||||||
|
<a href="index.html" class="nav-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="nav-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</button>
|
||||||
|
<ul class="nav-links" id="nav-links">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="schedule.html">Schedule</a></li>
|
||||||
|
<li><a href="connect.html">Connect</a></li>
|
||||||
|
<li><a href="studios.html">Studios</a></li>
|
||||||
|
<li><a href="classes.html">Classes</a></li>
|
||||||
|
<li><a href="festivals.html" class="active">Festivals</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="page-header">
|
||||||
|
<p class="section-label">Da Nang 2026</p>
|
||||||
|
<h1>Festivals</h1>
|
||||||
|
<p class="subtitle">Multi-day Latin dance events right here in Da Nang — workshops, performances, and non-stop social dancing.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Latin Escape Da Nang 2026 -->
|
||||||
|
<div class="festival-card festival-card-le">
|
||||||
|
<div class="festival-poster">
|
||||||
|
<div class="festival-poster-content">
|
||||||
|
<h2>Latin Escape Da Nang</h2>
|
||||||
|
<div class="festival-dates">May 15 – 17, 2026</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="festival-body">
|
||||||
|
<div class="festival-meta">
|
||||||
|
<div class="festival-meta-item">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<strong>May 15–17, 2026</strong>
|
||||||
|
</div>
|
||||||
|
<div class="festival-meta-item">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||||
|
Royal Lotus Hotel · <strong>My Khe Beach, Da Nang</strong>
|
||||||
|
</div>
|
||||||
|
<div class="festival-meta-item">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
||||||
|
<strong>Bachata · Kizomba</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tags" style="margin-bottom:1rem">
|
||||||
|
<span class="tag tag-bachata">Bachata</span>
|
||||||
|
<span class="tag tag-kizomba">Kizomba</span>
|
||||||
|
</div>
|
||||||
|
<p class="festival-desc">
|
||||||
|
A destination-style festival set against the backdrop of Da Nang’s stunning beach. Three days of workshops, social parties, and performances with international artists. The perfect excuse to combine dancing with a beach getaway.
|
||||||
|
</p>
|
||||||
|
<div class="festival-links">
|
||||||
|
<a href="https://www.facebook.com/latin.escape.danang/" target="_blank" rel="noopener" class="btn btn-ghost">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
Facebook
|
||||||
|
</a>
|
||||||
|
<a href="https://www.instagram.com/latin.escape.danang/" target="_blank" rel="noopener" class="btn btn-ghost">
|
||||||
|
<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>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
<a href="https://www.tickettailor.com/events/latinescapedanang" target="_blank" rel="noopener" class="btn btn-primary">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg>
|
||||||
|
Buy Tickets
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Vietnam Latin Xperience 2026 -->
|
||||||
|
<div class="festival-card festival-card-vlx">
|
||||||
|
<div class="festival-poster">
|
||||||
|
<div class="festival-poster-content">
|
||||||
|
<h2>Vietnam Latin Xperience</h2>
|
||||||
|
<div class="festival-dates">October 2 – 4, 2026</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="festival-body">
|
||||||
|
<div class="festival-meta">
|
||||||
|
<div class="festival-meta-item">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
|
||||||
|
<strong>October 2–4, 2026</strong>
|
||||||
|
</div>
|
||||||
|
<div class="festival-meta-item">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||||
|
Da Nang Beach · <strong>Da Nang</strong>
|
||||||
|
</div>
|
||||||
|
<div class="festival-meta-item">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
||||||
|
<strong>Salsa · Bachata · Kizomba · Zouk & more</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tags" style="margin-bottom:1rem">
|
||||||
|
<span class="tag tag-salsa">Salsa</span>
|
||||||
|
<span class="tag tag-bachata">Bachata</span>
|
||||||
|
<span class="tag tag-kizomba">Kizomba</span>
|
||||||
|
<span class="tag tag-zouk">Zouk</span>
|
||||||
|
<span class="tag tag-tango">Urban Kiz</span>
|
||||||
|
<span class="tag tag-tango">Konpa</span>
|
||||||
|
</div>
|
||||||
|
<p class="festival-desc">
|
||||||
|
Now in its 7th edition and recently moved to Da Nang, the Vietnam Latin Xperience (VLX) is one of Southeast Asia’s most beloved Latin festivals. Three days of workshops, bootcamps, and social parties with a warm, family-like community vibe. International artists, beautiful beach setting, unforgettable nights.
|
||||||
|
</p>
|
||||||
|
<div class="festival-links">
|
||||||
|
<a href="https://vietnamlatinxperience.com" target="_blank" rel="noopener" class="btn btn-ghost">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||||
|
Website
|
||||||
|
</a>
|
||||||
|
<a href="https://www.facebook.com/VietnamLatinXperience/" target="_blank" rel="noopener" class="btn btn-ghost">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
Facebook
|
||||||
|
</a>
|
||||||
|
<a href="https://www.tickettailor.com" target="_blank" rel="noopener" class="btn btn-primary">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z"/></svg>
|
||||||
|
Buy Tickets
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center">
|
||||||
|
<p style="color:var(--muted);margin-bottom:1rem">Know of a festival we should add? Or organizing one yourself?</p>
|
||||||
|
<a href="connect.html" class="btn btn-ghost">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||||
|
<span>Tell Us About It</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer" style="margin-top:4rem">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-inner">
|
||||||
|
<div>
|
||||||
|
<a href="index.html" class="footer-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="footer-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-tagline">Da Nang's Latin dance community</p>
|
||||||
|
</div>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="schedule.html">Schedule</a>
|
||||||
|
<a href="connect.html">Connect</a>
|
||||||
|
<a href="studios.html">Studios</a>
|
||||||
|
<a href="classes.html">Classes</a>
|
||||||
|
<a href="festivals.html">Festivals</a>
|
||||||
|
</nav>
|
||||||
|
<div class="footer-social">
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<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>
|
||||||
|
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
Da Nang SBK Group
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
176
index.html
176
index.html
@@ -1,21 +1,175 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="es">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Hola Mundo</title>
|
<title>SaborFlow Da Nang — Latin Dance Community</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<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="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="particles"></canvas>
|
|
||||||
<div class="scanline"></div>
|
|
||||||
|
|
||||||
<div class="container">
|
<nav class="nav">
|
||||||
<h1 class="glitch" data-text="Hola Mundo">Hola Mundo 2</h1>
|
<div class="nav-container">
|
||||||
<p class="subtitle"><span id="typed"></span></p>
|
<a href="index.html" class="nav-brand">
|
||||||
<p class="counter" id="counter"></p>
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
</div>
|
<span class="nav-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</button>
|
||||||
|
<ul class="nav-links" id="nav-links">
|
||||||
|
<li><a href="index.html" class="active">Home</a></li>
|
||||||
|
<li><a href="schedule.html">Schedule</a></li>
|
||||||
|
<li><a href="connect.html">Connect</a></li>
|
||||||
|
<li><a href="studios.html">Studios</a></li>
|
||||||
|
<li><a href="classes.html">Classes</a></li>
|
||||||
|
<li><a href="festivals.html">Festivals</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<script src="main.js"></script>
|
<!-- HERO -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-content">
|
||||||
|
<p class="hero-eyebrow">Da Nang · Vietnam</p>
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow Da Nang" class="hero-logo">
|
||||||
|
<h1 class="hero-title">SaborFlow</h1>
|
||||||
|
<div class="hero-rule"></div>
|
||||||
|
<p class="hero-subtitle">Latin Dance Community</p>
|
||||||
|
<div class="hero-ctas">
|
||||||
|
<a href="schedule.html" class="btn btn-primary">
|
||||||
|
<span>Weekly Schedule</span>
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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 class="hero-divider"></div>
|
||||||
|
<a href="studios.html" class="cta-link">
|
||||||
|
Studios
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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 class="hero-divider"></div>
|
||||||
|
<a href="festivals.html" class="cta-link">
|
||||||
|
Festivals
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ABOUT -->
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-label">What We Are</p>
|
||||||
|
<h2 style="margin-bottom:2.5rem">Community. Music. Dance.</h2>
|
||||||
|
<div class="grid-tight about-grid">
|
||||||
|
<div class="about-card">
|
||||||
|
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
|
||||||
|
<h3>Social Dancing</h3>
|
||||||
|
<p>Almost-daily gatherings at bars, clubs, and restaurants in Da Nang and Hoi An. Everyone is welcome — beginner or seasoned pro, no judgment.</p>
|
||||||
|
</div>
|
||||||
|
<div class="about-card">
|
||||||
|
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
|
||||||
|
<h3>Salsa · Bachata · Kizomba</h3>
|
||||||
|
<p>The best Latin rhythms all week long. Salsa, Bachata, Kizomba, and the fast-growing Zouk. Great music, warm people, genuine connection.</p>
|
||||||
|
</div>
|
||||||
|
<div class="about-card">
|
||||||
|
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
|
||||||
|
<h3>Community 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>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- COMING UP -->
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-label">This Week</p>
|
||||||
|
<h2 style="margin-bottom:2.5rem">Coming Up</h2>
|
||||||
|
<div class="grid-tight teaser-grid" id="schedule-teaser"></div>
|
||||||
|
<div class="mt-3">
|
||||||
|
<a href="schedule.html" class="cta-link">
|
||||||
|
View full schedule
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- INSTAGRAM -->
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<div class="ig-banner">
|
||||||
|
<p class="section-label" style="justify-content:center">Stay Connected</p>
|
||||||
|
<h2 style="margin-bottom:0.65rem">Follow the Community</h2>
|
||||||
|
<p>Catch the latest social dance photos, videos, and event announcements.</p>
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
|
||||||
|
<svg width="14" height="14" 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>
|
||||||
|
<span>@saborflowdanang</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- EXPLORE -->
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<p class="section-label">Explore</p>
|
||||||
|
<h2 style="margin-bottom:2.5rem">Find Your Scene</h2>
|
||||||
|
<div class="grid-tight explore-grid">
|
||||||
|
<a href="studios.html" class="explore-card">
|
||||||
|
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2"/><path d="M9 22v-4h6v4"/><path d="M8 6h.01M16 6h.01M8 10h.01M16 10h.01"/></svg>
|
||||||
|
<div class="card-title">Dance Studios</div>
|
||||||
|
<p class="card-text">Dedicated schools offering Salsa, Bachata, Kizomba and more in Da Nang.</p>
|
||||||
|
</a>
|
||||||
|
<a href="classes.html" class="explore-card">
|
||||||
|
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||||
|
<div class="card-title">Dance Classes</div>
|
||||||
|
<p class="card-text">From total beginner to advanced — find the right class for your level.</p>
|
||||||
|
</a>
|
||||||
|
<a href="festivals.html" class="explore-card">
|
||||||
|
<svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
|
||||||
|
<div class="card-title">Festivals</div>
|
||||||
|
<p class="card-text">Multi-day events with international artists, workshops, and socials.</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-inner">
|
||||||
|
<div>
|
||||||
|
<a href="index.html" class="footer-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="footer-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-tagline">Da Nang's Latin dance community</p>
|
||||||
|
</div>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="schedule.html">Schedule</a>
|
||||||
|
<a href="connect.html">Connect</a>
|
||||||
|
<a href="studios.html">Studios</a>
|
||||||
|
<a href="classes.html">Classes</a>
|
||||||
|
<a href="festivals.html">Festivals</a>
|
||||||
|
</nav>
|
||||||
|
<div class="footer-social">
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<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>
|
||||||
|
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
Da Nang SBK Group
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
109
js/main.js
Normal file
109
js/main.js
Normal file
@@ -0,0 +1,109 @@
|
|||||||
|
// ============================================================
|
||||||
|
// SaborFlow Da Nang — main.js
|
||||||
|
// Update SCHEDULE array monthly when the weekly program changes.
|
||||||
|
// ============================================================
|
||||||
|
|
||||||
|
const SCHEDULE = [
|
||||||
|
{ day: 'Monday', venue: 'Webe Coffee', social: 'BOM', music: '8 Bachata · 1 Salsa · 1 Kizomba', city: 'Da Nang', organizer: 'Luu Phuong & Shai' },
|
||||||
|
{ day: 'Tuesday', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares' },
|
||||||
|
{ day: 'Tuesday', venue: 'Caliz Bar', social: 'Sensual Night', music: '3 Bachata · 2 Salsa · 2 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen' },
|
||||||
|
{ day: 'Wednesday', venue: 'Ket Fai Bar', social: 'Bachata Kiz Night', music: 'Kizomba 19:30 · Bachata 21:00', city: 'Da Nang', organizer: 'Sean Kim' },
|
||||||
|
{ day: 'Thursday', venue: 'Malibu', social: 'Salsa Nights', music: '2 Salsa · 2 Bachata', city: 'Da Nang', organizer: 'Lucho Giraldes' },
|
||||||
|
{ day: 'Friday', venue: 'An Thuong By Night', social: 'Dance Unity Party', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Da Nang', organizer: 'Nadiya Yagfarova' },
|
||||||
|
{ day: 'Saturday', venue: 'La Riva', social: 'Latino Dancing', music: '2 Salsa · 2 Bachata · 2 Kizomba', city: 'Hoi An', organizer: 'David Tavares' },
|
||||||
|
{ day: 'Saturday', venue: 'An Thuong By Night', social: 'Bachata Party', music: 'Only Bachata', city: 'Da Nang', organizer: 'Vaclav & Kseniya' },
|
||||||
|
{ day: 'Sunday', venue: 'Last Call', social: 'Latin Dance Social', music: '3 Bachata · 2 Salsa', city: 'Da Nang', organizer: 'Vaclav & Kseniya' },
|
||||||
|
{ day: 'Sunday', venue: 'Corner Bar', social: 'Sunday Latin', music: '3 Bachata · 2 Salsa · 3 Kizomba', city: 'Da Nang', organizer: 'Daisy Nguyen' },
|
||||||
|
];
|
||||||
|
|
||||||
|
// ---- Navigation ----
|
||||||
|
function initNav() {
|
||||||
|
const hamburger = document.getElementById('hamburger');
|
||||||
|
const navLinks = document.getElementById('nav-links');
|
||||||
|
if (!hamburger || !navLinks) return;
|
||||||
|
|
||||||
|
hamburger.addEventListener('click', () => {
|
||||||
|
const isOpen = navLinks.classList.toggle('open');
|
||||||
|
hamburger.setAttribute('aria-expanded', String(isOpen));
|
||||||
|
});
|
||||||
|
|
||||||
|
navLinks.querySelectorAll('a').forEach(link => {
|
||||||
|
link.addEventListener('click', () => navLinks.classList.remove('open'));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- Schedule: full table ----
|
||||||
|
function renderScheduleTable() {
|
||||||
|
const tbody = document.getElementById('schedule-tbody');
|
||||||
|
if (!tbody) return;
|
||||||
|
|
||||||
|
tbody.innerHTML = SCHEDULE.map(row => `
|
||||||
|
<tr>
|
||||||
|
<td data-label="Day">
|
||||||
|
<span class="day-badge day-${row.day.toLowerCase()}">${row.day}</span>
|
||||||
|
</td>
|
||||||
|
<td data-label="Venue" class="venue-name">${row.venue}</td>
|
||||||
|
<td data-label="Social" class="social-name">${row.social}</td>
|
||||||
|
<td data-label="Music" class="music-text">${row.music}</td>
|
||||||
|
<td data-label="City"><span class="city-badge">${row.city}</span></td>
|
||||||
|
<td data-label="Organizer" class="organizer-text">${row.organizer}</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- Home: "Coming up this week" teaser (3 events starting from today) ----
|
||||||
|
function renderScheduleTeaser() {
|
||||||
|
const container = document.getElementById('schedule-teaser');
|
||||||
|
if (!container) return;
|
||||||
|
|
||||||
|
const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||||
|
const today = DAYS[new Date().getDay()];
|
||||||
|
const startIdx = DAYS.indexOf(today);
|
||||||
|
const order = [...DAYS.slice(startIdx), ...DAYS.slice(0, startIdx)];
|
||||||
|
|
||||||
|
const sorted = [...SCHEDULE].sort(
|
||||||
|
(a, b) => order.indexOf(a.day) - order.indexOf(b.day)
|
||||||
|
);
|
||||||
|
|
||||||
|
container.innerHTML = sorted.slice(0, 3).map(row => `
|
||||||
|
<div class="teaser-card">
|
||||||
|
<div class="teaser-day">${row.day}</div>
|
||||||
|
<div class="teaser-social">${row.social}</div>
|
||||||
|
<div class="teaser-venue">@ ${row.venue}</div>
|
||||||
|
<div class="teaser-meta">${row.music} · ${row.city}</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- Filter pills (studios.html / classes.html) ----
|
||||||
|
function initFilters() {
|
||||||
|
const pills = document.querySelectorAll('.filter-pill');
|
||||||
|
if (!pills.length) return;
|
||||||
|
|
||||||
|
pills.forEach(pill => {
|
||||||
|
pill.addEventListener('click', () => {
|
||||||
|
pills.forEach(p => p.classList.remove('active'));
|
||||||
|
pill.classList.add('active');
|
||||||
|
|
||||||
|
const filter = pill.dataset.filter;
|
||||||
|
document.querySelectorAll('.filterable-card').forEach(card => {
|
||||||
|
if (filter === 'all') {
|
||||||
|
card.classList.remove('hidden');
|
||||||
|
} else {
|
||||||
|
const styles = (card.dataset.styles || '')
|
||||||
|
.split(',')
|
||||||
|
.map(s => s.trim().toLowerCase());
|
||||||
|
card.classList.toggle('hidden', !styles.includes(filter));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---- Init ----
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
initNav();
|
||||||
|
renderScheduleTable();
|
||||||
|
renderScheduleTeaser();
|
||||||
|
initFilters();
|
||||||
|
});
|
||||||
99
schedule.html
Normal file
99
schedule.html
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Weekly Schedule — SaborFlow Da Nang</title>
|
||||||
|
<meta name="description" content="The weekly Latin social dance schedule in Da Nang and Hoi An. Salsa, Bachata, Kizomba, Zouk — every day of the week.">
|
||||||
|
<link rel="icon" type="image/jpeg" href="assets/logo.jpg">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-container">
|
||||||
|
<a href="index.html" class="nav-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="nav-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</button>
|
||||||
|
<ul class="nav-links" id="nav-links">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="schedule.html" class="active">Schedule</a></li>
|
||||||
|
<li><a href="connect.html">Connect</a></li>
|
||||||
|
<li><a href="studios.html">Studios</a></li>
|
||||||
|
<li><a href="classes.html">Classes</a></li>
|
||||||
|
<li><a href="festivals.html">Festivals</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="page-header">
|
||||||
|
<p class="section-label">Da Nang · Hoi An</p>
|
||||||
|
<h1>Weekly Schedule</h1>
|
||||||
|
<p class="subtitle">Your guide to social dancing — every single week.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="schedule-note">
|
||||||
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||||
|
<span>Music ratios (e.g. <strong style="color:var(--text)">2 Salsa · 2 Bachata · 2 Kizomba</strong>) show approximate songs per style per rotation. Schedules may change — follow <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:var(--teal)">@saborflowdanang</a> and the <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" style="color:var(--teal)">Da Nang SBK group</a> for real-time updates. Pop-up parties for <strong style="color:var(--text)">Zouk</strong> and <strong style="color:var(--text)">Tango</strong> are announced there too.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="schedule-table-wrap">
|
||||||
|
<table class="schedule-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Day</th>
|
||||||
|
<th>Venue</th>
|
||||||
|
<th>Social</th>
|
||||||
|
<th>Music</th>
|
||||||
|
<th>City</th>
|
||||||
|
<th>Organizer</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="schedule-tbody"></tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="mt-3" style="color:var(--muted);font-size:.78rem">Schedule updated monthly — last update: <strong style="color:var(--text);font-weight:500">April 2026</strong></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer" style="margin-top:4rem">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-inner">
|
||||||
|
<div>
|
||||||
|
<a href="index.html" class="footer-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="footer-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-tagline">Da Nang's Latin dance community</p>
|
||||||
|
</div>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="schedule.html">Schedule</a>
|
||||||
|
<a href="connect.html">Connect</a>
|
||||||
|
<a href="studios.html">Studios</a>
|
||||||
|
<a href="classes.html">Classes</a>
|
||||||
|
<a href="festivals.html">Festivals</a>
|
||||||
|
</nav>
|
||||||
|
<div class="footer-social">
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<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>
|
||||||
|
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
Da Nang SBK Group
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
191
studios.html
Normal file
191
studios.html
Normal file
@@ -0,0 +1,191 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Dance Studios — SaborFlow Da Nang</title>
|
||||||
|
<meta name="description" content="Latin dance studios in Da Nang, Vietnam. Find schools teaching Salsa, Bachata, Kizomba, and Zouk.">
|
||||||
|
<link rel="icon" type="image/jpeg" href="assets/logo.jpg">
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-container">
|
||||||
|
<a href="index.html" class="nav-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="nav-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
|
||||||
|
<span></span><span></span><span></span>
|
||||||
|
</button>
|
||||||
|
<ul class="nav-links" id="nav-links">
|
||||||
|
<li><a href="index.html">Home</a></li>
|
||||||
|
<li><a href="schedule.html">Schedule</a></li>
|
||||||
|
<li><a href="connect.html">Connect</a></li>
|
||||||
|
<li><a href="studios.html" class="active">Studios</a></li>
|
||||||
|
<li><a href="classes.html">Classes</a></li>
|
||||||
|
<li><a href="festivals.html">Festivals</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="page-header">
|
||||||
|
<p class="section-label">Da Nang</p>
|
||||||
|
<h1>Dance Studios</h1>
|
||||||
|
<p class="subtitle">Dedicated schools and venues where you can take Latin dance lessons.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-bar">
|
||||||
|
<button class="filter-pill active" data-filter="all">All</button>
|
||||||
|
<button class="filter-pill" data-filter="salsa">Salsa</button>
|
||||||
|
<button class="filter-pill" data-filter="bachata">Bachata</button>
|
||||||
|
<button class="filter-pill" data-filter="kizomba">Kizomba</button>
|
||||||
|
<button class="filter-pill" data-filter="zouk">Zouk</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-grid">
|
||||||
|
|
||||||
|
<!-- Frog Goose Bachata School -->
|
||||||
|
<div class="card studio-card filterable-card" data-styles="bachata">
|
||||||
|
<div class="card-stripe"></div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-title">Frog Goose Bachata School</div>
|
||||||
|
<div class="tags">
|
||||||
|
<span class="tag tag-bachata">Bachata</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||||
|
<span>292 Vo Nguyen Giap, Bac My Phu, Ngu Hanh Son, Da Nang</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
|
||||||
|
<span>Monday workshops 8:30 PM · Social from 9:30 PM</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||||||
|
<span>Luu Nhat Phuong, Phong & Shai</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener" class="card-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
Facebook
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Salsa Da Nang -->
|
||||||
|
<div class="card studio-card filterable-card" data-styles="salsa">
|
||||||
|
<div class="card-stripe"></div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-title">Salsa Da Nang</div>
|
||||||
|
<div class="tags">
|
||||||
|
<span class="tag tag-salsa">Salsa On1</span>
|
||||||
|
<span class="tag tag-salsa">Salsa On2</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||||
|
<span>Da Nang (various venues — check website for current location)</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
|
||||||
|
<span>Lucho Giraldes — 20+ years experience, professional performer</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>
|
||||||
|
<span>Beginner · Intermediate · Advanced</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="https://salsadanang.com" target="_blank" rel="noopener" class="card-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
||||||
|
Website
|
||||||
|
</a>
|
||||||
|
<a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener" class="card-link">
|
||||||
|
<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>
|
||||||
|
Instagram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- LearnToDanceDANANG -->
|
||||||
|
<div class="card studio-card filterable-card" data-styles="salsa,bachata,kizomba,zouk">
|
||||||
|
<div class="card-stripe"></div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-title">LearnToDance Da Nang</div>
|
||||||
|
<div class="tags">
|
||||||
|
<span class="tag tag-salsa">Salsa</span>
|
||||||
|
<span class="tag tag-bachata">Bachata</span>
|
||||||
|
<span class="tag tag-kizomba">Kizomba</span>
|
||||||
|
<span class="tag tag-zouk">Zouk</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
|
||||||
|
<span>Da Nang</span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.7 13a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.61 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.09 6.09l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||||||
|
<span><a href="tel:+84855085903" style="color:var(--orange)">+84 85 508 5903</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||||
|
<span><a href="mailto:LearnToDanceDANANG@gmail.com" style="color:var(--orange)">LearnToDanceDANANG@gmail.com</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="mailto:LearnToDanceDANANG@gmail.com" class="card-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||||
|
Email
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-3" style="background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;text-align:center">
|
||||||
|
<p style="color:var(--muted);margin-bottom:1rem">Know a studio we’re missing? Let us know.</p>
|
||||||
|
<a href="connect.html" class="btn btn-ghost">
|
||||||
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||||
|
<span>Contact Us</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer" style="margin-top:4rem">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-inner">
|
||||||
|
<div>
|
||||||
|
<a href="index.html" class="footer-brand">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow">
|
||||||
|
<span class="footer-brand-name">SABORFLOW</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-tagline">Da Nang's Latin dance community</p>
|
||||||
|
</div>
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="schedule.html">Schedule</a>
|
||||||
|
<a href="connect.html">Connect</a>
|
||||||
|
<a href="studios.html">Studios</a>
|
||||||
|
<a href="classes.html">Classes</a>
|
||||||
|
<a href="festivals.html">Festivals</a>
|
||||||
|
</nav>
|
||||||
|
<div class="footer-social">
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<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>
|
||||||
|
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="footer-social-link">
|
||||||
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
|
||||||
|
Da Nang SBK Group
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">Made with love for the Da Nang dance community</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user