Javi/saborflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign all pages: modern typography, SVG icons, no emojis

Browse Source 
- Replace all emoji with inline SVG icons across all pages
- New font stack: Syne (800) for headings/UI + Inter for body
- Editorial hero with clamp() type, slide-fill buttons, tight grid system
- Consistent nav-brand + 3-col footer-inner across all 6 pages
- Add btn-ghost style to CSS
- Remove amateur decorations; professional, impactful visual result

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Javier Blanco
2026-04-30 22:07:28 +07:00
parent 704c6afcf9
commit 3ad3b0b497
8 changed files with 867 additions and 710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
classes.html
View File

@@ -12,8 +12,9 @@
<nav class="nav">
<div class="nav-container">
<a href="index.html" class="nav-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
<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>
@@ -31,8 +32,9 @@
<div class="container">
<div class="page-header">
<h1>Dance <span class="accent">Classes</span></h1>
<p class="subtitle">Whether you&rsquo;re just starting out or looking to sharpen your moves — there&rsquo;s a class for you.</p>
<p class="section-label">Da Nang &middot; Hoi An</p>
<h1>Dance Classes</h1>
<p class="subtitle">Whether you&rsquo;re just starting out or looking to sharpen your moves &mdash; there&rsquo;s a class for you.</p>
</div>
<div class="filter-bar">
@@ -59,17 +61,26 @@
<span class="tag tag-advanced">Advanced</span>
</div>
<div class="card-info">
<strong>👨‍🏫</strong> Lucho Giraldes — 20+ years experience
<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 &mdash; 20+ years experience</span>
</div>
<div class="card-info">
<strong>📍</strong> Various venues in Da Nang (see website for details)
<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">
<strong>📅</strong> Check website for current schedule
<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">🌐 salsadanang.com</a>
<a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener" class="card-link">📸 @salsadanang</a>
<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>
@@ -84,16 +95,22 @@
<span class="tag tag-intermediate">Intermediate</span>
</div>
<div class="card-info">
<strong>👩‍🏫</strong> Daisy Nguyen — local instructor &amp; social organizer
<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 &mdash; local instructor &amp; social organizer</span>
</div>
<div class="card-info">
<strong>📍</strong> Da Nang (venues change — follow for updates)
<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 &mdash; follow for updates)</span>
</div>
<div class="card-info">
<strong>📅</strong> Tuesday at Caliz Bar (Sensual Night) · Sunday at Corner Bar
<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 &middot; Sunday at Corner Bar</span>
</div>
<div class="card-links">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="card-link">📸 Check Instagram</a>
<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>
@@ -108,16 +125,22 @@
<span class="tag tag-intermediate">Intermediate</span>
</div>
<div class="card-info">
<strong>👩‍🏫</strong> Luu Nhat Phuong, Phong &amp; Shai
<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 &amp; Shai</span>
</div>
<div class="card-info">
<strong>📍</strong> 292 Vo Nguyen Giap, Ngu Hanh Son, Da Nang
<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">
<strong>📅</strong> Every Monday — Workshop 8:30 PM · Social from 9:30 PM
<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 &mdash; Workshop 8:30 PM &middot; 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">👥 Facebook</a>
<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>
@@ -132,16 +155,22 @@
<span class="tag tag-intermediate">Intermediate</span>
</div>
<div class="card-info">
<strong>👨‍🏫</strong> Sean Kim — organizer of the Wednesday Bachata Kiz Night
<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 &mdash; organizer of the Wednesday Bachata Kiz Night</span>
</div>
<div class="card-info">
<strong>📍</strong> Ket Fai Bar, Da Nang
<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">
<strong>📅</strong> Wednesday — Kizomba from 19:30 · Bachata from 21:00
<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 &mdash; Kizomba from 19:30 &middot; Bachata from 21:00</span>
</div>
<div class="card-links">
<a href="connect.html" class="card-link">📩 Contact via SaborFlow</a>
<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>
@@ -158,16 +187,20 @@
<span class="tag tag-beginner">Beginner-friendly</span>
</div>
<div class="card-info">
<strong>📍</strong> 36 Đ. Ng. Thi Si, Bac My An, Ngu Hanh Son, Da Nang
<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">
<strong>📅</strong> Monday 9 PM — Kizomba &amp; Zouk night
<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 &mdash; Kizomba &amp; Zouk night</span>
</div>
<div class="card-info">
<strong>📅</strong> Friday 9 PM — Latin Vibes (Salsa, Bachata, Kizomba)
<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 &mdash; Latin Vibes (Salsa, Bachata, Kizomba)</span>
</div>
<div class="card-info">
<strong>💰</strong> ~$3 USD cover
<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>
@@ -175,17 +208,24 @@
</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(--subtle);margin-bottom:1rem">Teaching in Da Nang and not listed here? Get in touch!</p>
<a href="connect.html" class="btn btn-secondary">📩 Contact Us</a>
<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-content">
<a href="index.html" class="footer-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
</a>
<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>
@@ -194,9 +234,18 @@
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<p class="footer-tagline">Made with love for the Da Nang dance community 💃🕺</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-ig">📸 @saborflowdanang</a>
<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>

101
connect.html
View File

@@ -7,37 +7,14 @@
<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">
<style>
.ig-placeholder {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
min-height: 360px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
gap: 1rem;
color: var(--subtle);
font-size: .875rem;
}
.ig-placeholder .ig-icon { font-size: 3rem; }
.ig-placeholder a {
color: var(--orange);
font-family: 'Oswald', sans-serif;
font-weight: 600;
letter-spacing: .05em;
}
</style>
</head>
<body>
<nav class="nav">
<div class="nav-container">
<a href="index.html" class="nav-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
<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>
@@ -55,68 +32,70 @@
<div class="container">
<div class="page-header">
<h1>Connect with <span class="accent">SaborFlow</span></h1>
<p class="subtitle">Follow us for the latest socials, photos, and community news.</p>
<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>
<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">
📸 Open on Instagram
<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 -->
<h2 class="section-title">Latest Posts</h2>
<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"
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 will make them load automatically.
The <script> tag at the bottom of the page loads them automatically.
-->
<div class="ig-embeds">
<!-- Replace this block with a real Instagram embed code -->
<div class="ig-placeholder">
<div class="ig-icon">📸</div>
<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">View on Instagram →</a>
<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>
<!-- Replace this block with a real Instagram embed code -->
<div class="ig-placeholder">
<div class="ig-icon">🎥</div>
<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">View on Instagram →</a>
<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>
<!-- Replace this block with a real Instagram embed code -->
<div class="ig-placeholder">
<div class="ig-icon">💃</div>
<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">View on Instagram →</a>
<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">
<h2>Get in <span class="accent">Touch</span></h2>
<p>
<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&rsquo;d love to hear from you — we don&rsquo;t bite, we just dance! 🕺
We&rsquo;d love to hear from you &mdash; we don&rsquo;t bite, we just dance.
</p>
<div style="display:flex;flex-wrap:wrap;gap:1rem;justify-content:center">
<div class="contact-ctas">
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
📸 DM on Instagram
<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">
👥 Join the Facebook Group
<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>
@@ -124,10 +103,14 @@
<footer class="footer" style="margin-top:4rem">
<div class="container">
<div class="footer-content">
<a href="index.html" class="footer-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
</a>
<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>
@@ -136,13 +119,21 @@
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<p class="footer-tagline">Made with love for the Da Nang dance community 💃🕺</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-ig">📸 @saborflowdanang</a>
<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>
<!-- Instagram embed script — loads any <blockquote class="instagram-media"> blocks -->
<script async src="//www.instagram.com/embed.js"></script>
<script src="js/main.js"></script>
</body>

993
css/style.css
View File

File diff suppressed because it is too large Load Diff

96
festivals.html
View File

@@ -12,8 +12,9 @@
<nav class="nav">
<div class="nav-container">
<a href="index.html" class="nav-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
<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>
@@ -31,8 +32,9 @@
<div class="container">
<div class="page-header">
<h1>Upcoming <span class="accent">Festivals</span></h1>
<p class="subtitle">Multi-day Latin dance events right here in Da Nang — workshops, performances, and non-stop social dancing.</p>
<p class="section-label">Da Nang 2026</p>
<h1>Festivals</h1>
<p class="subtitle">Multi-day Latin dance events right here in Da Nang &mdash; workshops, performances, and non-stop social dancing.</p>
</div>
<!-- Latin Escape Da Nang 2026 -->
@@ -40,19 +42,22 @@
<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 class="festival-dates">May 15 &ndash; 17, 2026</div>
</div>
</div>
<div class="festival-body">
<div class="festival-meta">
<div class="festival-meta-item">
📅 <strong>May 15–17, 2026</strong>
<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&ndash;17, 2026</strong>
</div>
<div class="festival-meta-item">
📍 Royal Lotus Hotel &middot; <strong>My Khe Beach, Da Nang</strong>
<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 &middot; <strong>My Khe Beach, Da Nang</strong>
</div>
<div class="festival-meta-item">
🎵 <strong>Bachata · Kizomba</strong>
<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 &middot; Kizomba</strong>
</div>
</div>
<div class="tags" style="margin-bottom:1rem">
@@ -60,12 +65,21 @@
<span class="tag tag-kizomba">Kizomba</span>
</div>
<p class="festival-desc">
A destination-style festival set against the backdrop of Da Nang&rsquo;s stunning beach. Three days of workshops, social parties, and performances with international artists. The perfect excuse to combine dancing with a beach getaway!
A destination-style festival set against the backdrop of Da Nang&rsquo;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">👥 Facebook</a>
<a href="https://www.instagram.com/latin.escape.danang/" target="_blank" rel="noopener" class="btn btn-ghost">📸 Instagram</a>
<a href="https://www.tickettailor.com/events/latinescapedanang" target="_blank" rel="noopener" class="btn btn-primary">🎟️ Buy Tickets</a>
<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>
@@ -75,19 +89,22 @@
<div class="festival-poster">
<div class="festival-poster-content">
<h2>Vietnam Latin Xperience</h2>
<div class="festival-dates">October 2 – 4, 2026</div>
<div class="festival-dates">October 2 &ndash; 4, 2026</div>
</div>
</div>
<div class="festival-body">
<div class="festival-meta">
<div class="festival-meta-item">
📅 <strong>October 2–4, 2026</strong>
<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&ndash;4, 2026</strong>
</div>
<div class="festival-meta-item">
📍 Da Nang Beach &middot; <strong>Da Nang</strong>
<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 &middot; <strong>Da Nang</strong>
</div>
<div class="festival-meta-item">
🎵 <strong>Salsa · Bachata · Kizomba · Zouk &amp; more</strong>
<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 &middot; Bachata &middot; Kizomba &middot; Zouk &amp; more</strong>
</div>
</div>
<div class="tags" style="margin-bottom:1rem">
@@ -102,25 +119,41 @@
Now in its 7th edition and recently moved to Da Nang, the Vietnam Latin Xperience (VLX) is one of Southeast Asia&rsquo;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">🌐 Website</a>
<a href="https://www.facebook.com/VietnamLatinXperience/" target="_blank" rel="noopener" class="btn btn-ghost">👥 Facebook</a>
<a href="https://www.tickettailor.com" target="_blank" rel="noopener" class="btn btn-primary">🎟️ Buy Tickets</a>
<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(--subtle);margin-bottom:1rem">Know of a festival we should add? Or organizing one yourself?</p>
<a href="connect.html" class="btn btn-secondary">📩 Tell Us About It</a>
<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-content">
<a href="index.html" class="footer-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
</a>
<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>
@@ -129,9 +162,18 @@
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<p class="footer-tagline">Made with love for the Da Nang dance community 💃🕺</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-ig">📸 @saborflowdanang</a>
<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>

135
index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SaborFlow Da Nang — Latin Dance Community</title>
<meta name="description" content="Da Nang's Latin dance community. Find weekly socials, studios, classes, and festivals for Salsa, Bachata, Kizomba, and Zouk.">
<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>
@@ -12,14 +12,15 @@
<nav class="nav">
<div class="nav-container">
<a href="index.html" class="nav-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
<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" class="active">Home</a></li>
<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>
@@ -32,13 +33,26 @@
<!-- HERO -->
<section class="hero">
<div class="hero-content">
<p class="hero-eyebrow">Da Nang &middot; Vietnam</p>
<img src="assets/logo.jpg" alt="SaborFlow Da Nang" class="hero-logo">
<p class="hero-tagline">Da Nang's Latin Dance Community</p>
<p class="hero-sub">where the music never stops</p>
<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">📅 Weekly Schedule</a>
<a href="studios.html" class="btn btn-secondary">🏫 Studios &amp; Classes</a>
<a href="festivals.html" class="btn btn-ghost">🎉 Festivals</a>
<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>
@@ -46,46 +60,53 @@
<!-- ABOUT -->
<section>
<div class="container">
<h2 class="section-title">What is SaborFlow?</h2>
<div class="about-grid">
<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">
<div class="icon">💃</div>
<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 — whether you&rsquo;re a total beginner or a seasoned pro.</p>
<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">
<div class="icon">🎵</div>
<h3>Salsa · Bachata · Kizomba</h3>
<p>We dance to the best Latin rhythms. Salsa, Bachata, Kizomba, and the fast-growing Zouk. Good music, great vibes, amazing people.</p>
<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 &middot; Bachata &middot; 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">
<div class="icon">🌴</div>
<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>SaborFlow is a free, non-profit initiative created to support and grow the Da Nang Latin dance scene. No drama, just dancing.</p>
<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 THIS WEEK -->
<!-- COMING UP -->
<section>
<div class="container">
<h2 class="section-title">Coming Up This Week</h2>
<div class="card-grid" id="schedule-teaser"></div>
<div class="mt-3 text-center">
<a href="schedule.html" class="btn btn-secondary">View Full Schedule &rarr;</a>
<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 CTA -->
<!-- INSTAGRAM -->
<section>
<div class="container">
<div class="ig-banner">
<h2>Follow us on <span class="accent">Instagram</span></h2>
<p>Catch the latest social dance photos, videos, and event announcements from the community.</p>
<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">
📸 @saborflowdanang
<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>
@@ -94,28 +115,23 @@
<!-- EXPLORE -->
<section>
<div class="container">
<h2 class="section-title">Explore</h2>
<div class="card-grid">
<a href="studios.html" class="card">
<div class="card-body">
<div class="icon" style="font-size:2rem;margin-bottom:.5rem">🏫</div>
<div class="card-title">Dance Studios</div>
<p class="card-text">Dedicated schools offering Salsa, Bachata, Kizomba and more in Da Nang.</p>
</div>
<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="card">
<div class="card-body">
<div class="icon" style="font-size:2rem;margin-bottom:.5rem">📚</div>
<div class="card-title">Dance Classes</div>
<p class="card-text">From total beginner to advanced — find the right class for your level.</p>
</div>
<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="card">
<div class="card-body">
<div class="icon" style="font-size:2rem;margin-bottom:.5rem">🎊</div>
<div class="card-title">Festivals</div>
<p class="card-text">Multi-day Latin dance festivals with international artists, workshops, and socials.</p>
</div>
<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>
@@ -123,10 +139,14 @@
<footer class="footer">
<div class="container">
<div class="footer-content">
<a href="index.html" class="footer-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
</a>
<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>
@@ -135,9 +155,18 @@
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<p class="footer-tagline">Made with love for the Da Nang dance community 💃🕺</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-ig">📸 @saborflowdanang</a>
<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>

5
js/main.js
View File

@@ -68,8 +68,9 @@ function renderScheduleTeaser() {
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} <span style="font-weight:400;color:var(--subtle)">@ ${row.venue}</span></div>
<div class="teaser-meta">${row.music} &middot; <span style="color:var(--teal)">${row.city}</span></div>
<div class="teaser-social">${row.social}</div>
<div class="teaser-venue">@ ${row.venue}</div>
<div class="teaser-meta">${row.music} &middot; ${row.city}</div>
</div>
`).join('');
}

43
schedule.html
View File

@@ -12,8 +12,9 @@
<nav class="nav">
<div class="nav-container">
<a href="index.html" class="nav-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
<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>
@@ -31,13 +32,14 @@
<div class="container">
<div class="page-header">
<h1>Weekly <span class="accent">Schedule</span></h1>
<p class="subtitle">Your guide to social dancing in Da Nang and Hoi An — every single week.</p>
<p class="section-label">Da Nang &middot; Hoi An</p>
<h1>Weekly Schedule</h1>
<p class="subtitle">Your guide to social dancing — every single week.</p>
</div>
<div class="schedule-note">
<span>🎵</span>
<span>The music ratio (e.g. <strong>2 Salsa · 2 Bachata · 2 Kizomba</strong>) shows the approximate number of songs played per style in each rotation. Schedules may change — follow <a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline">@saborflowdanang</a> and the <a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline">Da Nang SBK group</a> for real-time updates. Pop-up parties for <strong>Zouk</strong> and <strong>Tango</strong> are announced there too!</span>
<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">
@@ -56,17 +58,19 @@
</table>
</div>
<div class="mt-3" style="text-align:center;color:var(--subtle);font-size:.875rem">
Schedule updated monthly. Last update: <strong style="color:var(--white)">April 2026</strong>
</div>
<p class="mt-3" style="color:var(--muted);font-size:.78rem">Schedule updated monthly &mdash; 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-content">
<a href="index.html" class="footer-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
</a>
<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>
@@ -75,9 +79,18 @@
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<p class="footer-tagline">Made with love for the Da Nang dance community 💃🕺</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-ig">📸 @saborflowdanang</a>
<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>

89
studios.html
View File

@@ -12,8 +12,9 @@
<nav class="nav">
<div class="nav-container">
<a href="index.html" class="nav-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
<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>
@@ -31,8 +32,9 @@
<div class="container">
<div class="page-header">
<h1>Dance <span class="accent">Studios</span></h1>
<p class="subtitle">Dedicated schools and venues where you can take Latin dance lessons in Da Nang.</p>
<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">
@@ -54,16 +56,22 @@
<span class="tag tag-bachata">Bachata</span>
</div>
<div class="card-info">
<strong>📍</strong> 292 Vo Nguyen Giap, Bac My Phu, Ngu Hanh Son, Da Nang
<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">
<strong>🕘</strong> Monday workshops 8:30 PM · Social from 9:30 PM
<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 &middot; Social from 9:30 PM</span>
</div>
<div class="card-info">
<strong>👩‍🏫</strong> Luu Nhat Phuong, Phong &amp; Shai
<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 &amp; Shai</span>
</div>
<div class="card-links">
<a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener" class="card-link">👥 Facebook</a>
<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>
@@ -78,17 +86,26 @@
<span class="tag tag-salsa">Salsa On2</span>
</div>
<div class="card-info">
<strong>📍</strong> Da Nang (various venues — check website for current location)
<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 &mdash; check website for current location)</span>
</div>
<div class="card-info">
<strong>👨‍🏫</strong> Lucho Giraldes — 20+ years experience, professional performer
<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 &mdash; 20+ years experience, professional performer</span>
</div>
<div class="card-info">
<strong>📚</strong> Beginner · Intermediate · Advanced
<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 &middot; Intermediate &middot; Advanced</span>
</div>
<div class="card-links">
<a href="https://salsadanang.com" target="_blank" rel="noopener" class="card-link">🌐 Website</a>
<a href="https://www.instagram.com/salsadanang/" target="_blank" rel="noopener" class="card-link">📸 Instagram</a>
<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>
@@ -105,16 +122,22 @@
<span class="tag tag-zouk">Zouk</span>
</div>
<div class="card-info">
<strong>📍</strong> Da Nang
<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">
<strong>📞</strong> <a href="tel:+84855085903" style="color:var(--orange)">+84 85 508 5903</a>
<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">
<strong>✉️</strong> <a href="mailto:LearnToDanceDANANG@gmail.com" style="color:var(--orange)">LearnToDanceDANANG@gmail.com</a>
<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">✉️ Email</a>
<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>
@@ -122,17 +145,24 @@
</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(--subtle);margin-bottom:1rem">Know a studio we&rsquo;re missing? Let us know!</p>
<a href="connect.html" class="btn btn-secondary">📩 Contact Us</a>
<p style="color:var(--muted);margin-bottom:1rem">Know a studio we&rsquo;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-content">
<a href="index.html" class="footer-logo">
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
</a>
<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>
@@ -141,9 +171,18 @@
<a href="classes.html">Classes</a>
<a href="festivals.html">Festivals</a>
</nav>
<p class="footer-tagline">Made with love for the Da Nang dance community 💃🕺</p>
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="footer-ig">📸 @saborflowdanang</a>
<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>