Launch SaborFlow Da Nang website
Multi-page static site for Da Nang's Latin dance community. Pages: Home, Schedule, Connect, Studios, Classes, Festivals. Colors match the logo palette; fully responsive with mobile nav. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
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 |
205
classes.html
Normal file
205
classes.html
Normal file
@@ -0,0 +1,205 @@
|
|||||||
|
<!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-logo">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
|
||||||
|
</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">
|
||||||
|
<h1>Dance <span class="accent">Classes</span></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">
|
||||||
|
<strong>👨🏫</strong> Lucho Giraldes — 20+ years experience
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📍</strong> Various venues in Da Nang (see website for details)
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📅</strong> Check website for current schedule
|
||||||
|
</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>
|
||||||
|
</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">
|
||||||
|
<strong>👩🏫</strong> Daisy Nguyen — local instructor & social organizer
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📍</strong> Da Nang (venues change — follow for updates)
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📅</strong> Tuesday at Caliz Bar (Sensual Night) · Sunday at Corner Bar
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="card-link">📸 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">
|
||||||
|
<strong>👩🏫</strong> Luu Nhat Phuong, Phong & Shai
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📍</strong> 292 Vo Nguyen Giap, Ngu Hanh Son, Da Nang
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📅</strong> Every Monday — Workshop 8:30 PM · Social from 9:30 PM
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener" class="card-link">👥 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">
|
||||||
|
<strong>👨🏫</strong> Sean Kim — organizer of the Wednesday Bachata Kiz Night
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📍</strong> Ket Fai Bar, Da Nang
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📅</strong> Wednesday — Kizomba from 19:30 · Bachata from 21:00
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="connect.html" class="card-link">📩 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">
|
||||||
|
<strong>📍</strong> 36 Đ. Ng. Thi Si, Bac My An, Ngu Hanh Son, Da Nang
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📅</strong> Monday 9 PM — Kizomba & Zouk night
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📅</strong> Friday 9 PM — Latin Vibes (Salsa, Bachata, Kizomba)
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>💰</strong> ~$3 USD cover
|
||||||
|
</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(--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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
149
connect.html
Normal file
149
connect.html
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
<!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">
|
||||||
|
<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>
|
||||||
|
<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">
|
||||||
|
<h1>Connect with <span class="accent">SaborFlow</span></h1>
|
||||||
|
<p class="subtitle">Follow us 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">
|
||||||
|
📸 Open on Instagram
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Latest posts -->
|
||||||
|
<h2 class="section-title">Latest Posts</h2>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
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 will make them load automatically.
|
||||||
|
-->
|
||||||
|
<div class="ig-embeds">
|
||||||
|
|
||||||
|
<!-- Replace this block with a real Instagram embed code -->
|
||||||
|
<div class="ig-placeholder">
|
||||||
|
<div class="ig-icon">📸</div>
|
||||||
|
<p>Latest posts from the community</p>
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">View on Instagram →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Replace this block with a real Instagram embed code -->
|
||||||
|
<div class="ig-placeholder">
|
||||||
|
<div class="ig-icon">🎥</div>
|
||||||
|
<p>Videos, reels, and social dance moments</p>
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">View on Instagram →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Replace this block with a real Instagram embed code -->
|
||||||
|
<div class="ig-placeholder">
|
||||||
|
<div class="ig-icon">💃</div>
|
||||||
|
<p>Workshops, festivals, and special events</p>
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener">View on Instagram →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact -->
|
||||||
|
<div class="contact-box">
|
||||||
|
<h2>Get in <span class="accent">Touch</span></h2>
|
||||||
|
<p>
|
||||||
|
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 style="display:flex;flex-wrap:wrap;gap:1rem;justify-content:center">
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
|
||||||
|
📸 DM on Instagram
|
||||||
|
</a>
|
||||||
|
<a href="https://www.facebook.com/groups/sbkdanang/" target="_blank" rel="noopener" class="btn btn-ghost">
|
||||||
|
👥 Join the Facebook Group
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</html>
|
||||||
741
css/style.css
Normal file
741
css/style.css
Normal file
@@ -0,0 +1,741 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Dancing+Script:wght@600&display=swap');
|
||||||
|
|
||||||
|
/* ===== RESET & BASE ===== */
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #141414;
|
||||||
|
--card: #1e1e1e;
|
||||||
|
--border: #2a2a2a;
|
||||||
|
--orange: #e8572a;
|
||||||
|
--gold: #f5b800;
|
||||||
|
--teal: #1bbcbc;
|
||||||
|
--coral: #e05b7e;
|
||||||
|
--white: #ffffff;
|
||||||
|
--subtle: #aaaaaa;
|
||||||
|
--radius: 12px;
|
||||||
|
--tr: 0.25s ease;
|
||||||
|
--shadow: 0 4px 24px rgba(0,0,0,0.4);
|
||||||
|
--max-w: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
html { scroll-behavior: smooth; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--white);
|
||||||
|
font-family: 'Lato', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.6;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== TYPOGRAPHY ===== */
|
||||||
|
h1, h2, h3, h4 {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
|
||||||
|
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
|
||||||
|
h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
|
||||||
|
|
||||||
|
.accent { color: var(--gold); }
|
||||||
|
.accent-orange { color: var(--orange); }
|
||||||
|
.accent-teal { color: var(--teal); }
|
||||||
|
.script {
|
||||||
|
font-family: 'Dancing Script', cursive;
|
||||||
|
font-size: 1.15em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== NAVIGATION ===== */
|
||||||
|
.nav {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: rgba(20,20,20,0.96);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
-webkit-backdrop-filter: blur(12px);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-container {
|
||||||
|
max-width: var(--max-w);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
height: 70px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo img {
|
||||||
|
height: 48px;
|
||||||
|
width: 48px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--subtle);
|
||||||
|
transition: color var(--tr), background var(--tr);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a:hover { color: var(--white); background: var(--border); }
|
||||||
|
.nav-links a.active { color: var(--gold); background: rgba(245,184,0,0.1); }
|
||||||
|
|
||||||
|
.nav-hamburger {
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 5px;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-hamburger span {
|
||||||
|
display: block;
|
||||||
|
width: 24px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: var(--tr);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== BUTTONS ===== */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0.7rem 1.4rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: transform var(--tr), box-shadow var(--tr), background var(--tr), border-color var(--tr), color var(--tr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary { background: var(--orange); color: var(--white); }
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #d04a22;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 8px 24px rgba(232,87,42,0.35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary { background: transparent; border-color: var(--gold); color: var(--gold); }
|
||||||
|
.btn-secondary:hover { background: var(--gold); color: var(--bg); transform: translateY(-2px); }
|
||||||
|
|
||||||
|
.btn-ghost { background: transparent; border-color: var(--border); color: var(--subtle); }
|
||||||
|
.btn-ghost:hover { border-color: var(--white); color: var(--white); }
|
||||||
|
|
||||||
|
.btn-teal { background: transparent; border-color: var(--teal); color: var(--teal); }
|
||||||
|
.btn-teal:hover { background: var(--teal); color: var(--bg); transform: translateY(-2px); }
|
||||||
|
|
||||||
|
/* ===== SECTION COMMON ===== */
|
||||||
|
section { padding: 4rem 0; }
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--gold);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.section-title::after {
|
||||||
|
content: '';
|
||||||
|
flex: 1;
|
||||||
|
height: 1px;
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-header {
|
||||||
|
padding: 3.5rem 0 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.page-header h1 { margin-bottom: 0.5rem; }
|
||||||
|
.page-header .subtitle {
|
||||||
|
color: var(--subtle);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
max-width: 580px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== CARDS ===== */
|
||||||
|
.card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: transform var(--tr), border-color var(--tr), box-shadow var(--tr);
|
||||||
|
}
|
||||||
|
.card:hover {
|
||||||
|
border-color: var(--orange);
|
||||||
|
transform: translateY(-4px);
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.card-body { padding: 1.5rem; }
|
||||||
|
.card-title { font-family: 'Oswald', sans-serif; font-size: 1.2rem; font-weight: 600; margin-bottom: 0.4rem; }
|
||||||
|
.card-text { color: var(--subtle); font-size: 0.9rem; }
|
||||||
|
|
||||||
|
.card-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== TAG PILLS ===== */
|
||||||
|
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.75rem 0; }
|
||||||
|
.tag {
|
||||||
|
padding: 0.2rem 0.65rem;
|
||||||
|
border-radius: 100px;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.tag-salsa { background: rgba(232,87,42,0.18); color: var(--orange); }
|
||||||
|
.tag-bachata { background: rgba(224,91,126,0.18); color: var(--coral); }
|
||||||
|
.tag-kizomba { background: rgba(27,188,188,0.18); color: var(--teal); }
|
||||||
|
.tag-zouk { background: rgba(245,184,0,0.18); color: var(--gold); }
|
||||||
|
.tag-tango { background: rgba(170,170,170,0.12);color: var(--subtle); }
|
||||||
|
.tag-beginner { background: rgba(27,188,188,0.18); color: var(--teal); }
|
||||||
|
.tag-intermediate { background: rgba(245,184,0,0.18); color: var(--gold); }
|
||||||
|
.tag-advanced { background: rgba(232,87,42,0.18); color: var(--orange); }
|
||||||
|
|
||||||
|
/* ===== FILTER PILLS ===== */
|
||||||
|
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
|
||||||
|
|
||||||
|
.filter-pill {
|
||||||
|
padding: 0.45rem 1.1rem;
|
||||||
|
border-radius: 100px;
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
background: transparent;
|
||||||
|
color: var(--subtle);
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color var(--tr), color var(--tr), background var(--tr);
|
||||||
|
}
|
||||||
|
.filter-pill:hover { border-color: var(--orange); color: var(--white); }
|
||||||
|
.filter-pill.active { background: var(--orange); border-color: var(--orange); color: var(--white); }
|
||||||
|
|
||||||
|
/* ===== CARD LINKS (studios/classes) ===== */
|
||||||
|
.card-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
|
||||||
|
|
||||||
|
.card-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
padding: 0.3rem 0.7rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--subtle);
|
||||||
|
transition: border-color var(--tr), color var(--tr);
|
||||||
|
}
|
||||||
|
.card-link:hover { border-color: var(--orange); color: var(--orange); }
|
||||||
|
|
||||||
|
.card-info { color: var(--subtle); font-size: 0.875rem; margin-top: 0.5rem; line-height: 1.5; }
|
||||||
|
.card-info strong { color: var(--white); }
|
||||||
|
|
||||||
|
/* ===== HERO (index.html) ===== */
|
||||||
|
.hero {
|
||||||
|
min-height: calc(100vh - 70px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
background: linear-gradient(-45deg, #141414, #1e1e1e, #2d1a0e, #0d2626, #1a0d1a);
|
||||||
|
background-size: 400% 400%;
|
||||||
|
animation: gradientShift 18s ease infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes gradientShift {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
100% { background-position: 0% 50%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(ellipse at center, rgba(232,87,42,0.07) 0%, transparent 65%);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content { position: relative; z-index: 1; padding: 2rem 1.5rem; }
|
||||||
|
|
||||||
|
.hero-logo {
|
||||||
|
width: min(220px, 50vw);
|
||||||
|
height: min(220px, 50vw);
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
box-shadow: 0 0 60px rgba(232,87,42,0.25), 0 0 120px rgba(245,184,0,0.08);
|
||||||
|
border: 3px solid rgba(232,87,42,0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-tagline {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: clamp(1rem, 3vw, 1.75rem);
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--subtle);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-sub {
|
||||||
|
font-family: 'Dancing Script', cursive;
|
||||||
|
font-size: clamp(1rem, 2.5vw, 1.3rem);
|
||||||
|
color: var(--gold);
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
opacity: 0.85;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
|
||||||
|
|
||||||
|
/* ===== ABOUT (index.html) ===== */
|
||||||
|
.about-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 2rem 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
transition: border-color var(--tr), transform var(--tr);
|
||||||
|
}
|
||||||
|
.about-card:hover { border-color: var(--gold); transform: translateY(-4px); }
|
||||||
|
.about-card .icon { font-size: 2.5rem; margin-bottom: 1rem; }
|
||||||
|
.about-card h3 { font-size: 1.15rem; color: var(--gold); margin-bottom: 0.6rem; }
|
||||||
|
.about-card p { color: var(--subtle); font-size: 0.88rem; }
|
||||||
|
|
||||||
|
/* ===== TEASER CARDS (index.html) ===== */
|
||||||
|
.teaser-card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-left: 4px solid var(--orange);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1.2rem 1.4rem;
|
||||||
|
transition: background var(--tr), border-color var(--tr);
|
||||||
|
}
|
||||||
|
.teaser-card:hover {
|
||||||
|
background: rgba(232,87,42,0.05);
|
||||||
|
border-color: var(--orange);
|
||||||
|
}
|
||||||
|
.teaser-day {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
color: var(--orange);
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
.teaser-social { font-weight: 700; font-size: 1rem; margin-bottom: 0.2rem; }
|
||||||
|
.teaser-meta { font-size: 0.82rem; color: var(--subtle); }
|
||||||
|
|
||||||
|
/* ===== IG BANNER (index.html) ===== */
|
||||||
|
.ig-banner {
|
||||||
|
background: linear-gradient(135deg, rgba(232,87,42,0.1), rgba(245,184,0,0.06));
|
||||||
|
border: 1px solid rgba(232,87,42,0.25);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.ig-banner h2 { margin-bottom: 0.6rem; }
|
||||||
|
.ig-banner p { color: var(--subtle); margin-bottom: 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; }
|
||||||
|
|
||||||
|
/* ===== SCHEDULE TABLE ===== */
|
||||||
|
.schedule-note {
|
||||||
|
background: rgba(27,188,188,0.08);
|
||||||
|
border: 1px solid rgba(27,188,188,0.25);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
color: var(--teal);
|
||||||
|
font-size: 0.88rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 0.6rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-table-wrap {
|
||||||
|
overflow-x: auto;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.schedule-table thead th {
|
||||||
|
background: var(--card);
|
||||||
|
padding: 0.9rem 1.1rem;
|
||||||
|
text-align: left;
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.09em;
|
||||||
|
color: var(--gold);
|
||||||
|
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: rgba(255,255,255,0.02); }
|
||||||
|
|
||||||
|
.schedule-table td {
|
||||||
|
padding: 0.9rem 1.1rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.day-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.2rem 0.6rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.day-monday { background: rgba(232,87,42,0.18); color: var(--orange); }
|
||||||
|
.day-tuesday { background: rgba(245,184,0,0.18); color: var(--gold); }
|
||||||
|
.day-wednesday { background: rgba(27,188,188,0.18); color: var(--teal); }
|
||||||
|
.day-thursday { background: rgba(224,91,126,0.18); color: var(--coral); }
|
||||||
|
.day-friday { background: rgba(232,87,42,0.18); color: var(--orange); }
|
||||||
|
.day-saturday { background: rgba(245,184,0,0.18); color: var(--gold); }
|
||||||
|
.day-sunday { background: rgba(27,188,188,0.18); color: var(--teal); }
|
||||||
|
|
||||||
|
.social-name { font-weight: 700; }
|
||||||
|
.venue-name { color: var(--subtle); }
|
||||||
|
.music-text { color: var(--subtle); font-size: 0.82rem; }
|
||||||
|
.city-badge { font-size: 0.8rem; font-weight: 700; color: var(--teal); }
|
||||||
|
.organizer-text{ color: var(--subtle); font-size: 0.82rem; }
|
||||||
|
|
||||||
|
/* Mobile: table → cards */
|
||||||
|
@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(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-left: 4px 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.68rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--gold);
|
||||||
|
margin-bottom: 0.1rem;
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== CONNECT PAGE ===== */
|
||||||
|
.ig-profile-card {
|
||||||
|
background: linear-gradient(135deg, var(--card), rgba(232,87,42,0.04));
|
||||||
|
border: 1px solid rgba(232,87,42,0.25);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
.ig-avatar {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
margin: 0 auto 1rem;
|
||||||
|
border: 3px solid var(--orange);
|
||||||
|
}
|
||||||
|
.ig-handle {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
color: var(--gold);
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.ig-desc { color: var(--subtle); margin-bottom: 1.5rem; max-width: 460px; margin-left: auto; margin-right: auto; }
|
||||||
|
|
||||||
|
.ig-embeds {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||||
|
gap: 1.5rem;
|
||||||
|
align-items: start;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contact-box {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 2.5rem 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.contact-box h2 { margin-bottom: 0.75rem; }
|
||||||
|
.contact-box p { color: var(--subtle); margin-bottom: 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; }
|
||||||
|
|
||||||
|
/* ===== STUDIO / CLASS CARDS ===== */
|
||||||
|
.studio-card .card-stripe {
|
||||||
|
height: 6px;
|
||||||
|
background: linear-gradient(90deg, var(--orange), var(--gold));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== FESTIVAL CARDS ===== */
|
||||||
|
.festival-card {
|
||||||
|
background: var(--card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
transition: border-color var(--tr), box-shadow var(--tr);
|
||||||
|
}
|
||||||
|
.festival-card:hover { border-color: var(--orange); box-shadow: var(--shadow); }
|
||||||
|
|
||||||
|
.festival-poster {
|
||||||
|
height: 220px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.festival-poster::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
opacity: 0.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.festival-card-le .festival-poster {
|
||||||
|
background: linear-gradient(135deg, #1a0a20, #2d1040, #0d1a30);
|
||||||
|
}
|
||||||
|
.festival-card-le .festival-poster::before {
|
||||||
|
background: radial-gradient(ellipse at center, rgba(224,91,126,0.5), transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.festival-card-vlx .festival-poster {
|
||||||
|
background: linear-gradient(135deg, #0d1a0d, #1a2d0d, #0d1a2d);
|
||||||
|
}
|
||||||
|
.festival-card-vlx .festival-poster::before {
|
||||||
|
background: radial-gradient(ellipse at center, rgba(27,188,188,0.5), transparent 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.festival-poster-content { position: relative; z-index: 1; }
|
||||||
|
.festival-poster h2 {
|
||||||
|
font-size: clamp(1.4rem, 4vw, 2.2rem);
|
||||||
|
color: var(--white);
|
||||||
|
text-shadow: 0 2px 20px rgba(0,0,0,0.6);
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
.festival-dates {
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
color: var(--gold);
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.festival-body { padding: 2rem; }
|
||||||
|
|
||||||
|
.festival-meta {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1.25rem;
|
||||||
|
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.875rem;
|
||||||
|
color: var(--subtle);
|
||||||
|
}
|
||||||
|
.festival-meta-item strong { color: var(--white); }
|
||||||
|
|
||||||
|
.festival-desc { color: var(--subtle); margin-bottom: 1.5rem; line-height: 1.7; font-size: 0.92rem; }
|
||||||
|
|
||||||
|
.festival-links { display: flex; flex-wrap: wrap; gap: 0.75rem; }
|
||||||
|
|
||||||
|
/* ===== FOOTER ===== */
|
||||||
|
.footer {
|
||||||
|
margin-top: auto;
|
||||||
|
background: var(--card);
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
padding: 3rem 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-logo img {
|
||||||
|
height: 56px;
|
||||||
|
width: 56px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.2rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-nav a {
|
||||||
|
padding: 0.3rem 0.7rem;
|
||||||
|
color: var(--subtle);
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
border-radius: 6px;
|
||||||
|
transition: color var(--tr), background var(--tr);
|
||||||
|
}
|
||||||
|
.footer-nav a:hover { color: var(--white); background: var(--border); }
|
||||||
|
|
||||||
|
.footer-tagline { color: var(--subtle); font-size: 0.875rem; }
|
||||||
|
|
||||||
|
.footer-ig {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
color: var(--orange);
|
||||||
|
font-family: 'Oswald', sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
transition: color var(--tr);
|
||||||
|
}
|
||||||
|
.footer-ig:hover { color: var(--gold); }
|
||||||
|
|
||||||
|
/* ===== RESPONSIVE ===== */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-hamburger { display: flex; }
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 70px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: rgba(20,20,20,0.98);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
gap: 0.2rem;
|
||||||
|
}
|
||||||
|
.nav-links.open { display: flex; }
|
||||||
|
.nav-links li { width: 100%; }
|
||||||
|
.nav-links a { display: block; padding: 0.7rem 1rem; }
|
||||||
|
|
||||||
|
.hero-ctas { flex-direction: column; align-items: center; }
|
||||||
|
|
||||||
|
.ig-embeds { grid-template-columns: 1fr; }
|
||||||
|
|
||||||
|
.festival-meta { flex-direction: column; gap: 0.5rem; }
|
||||||
|
|
||||||
|
section { padding: 2.5rem 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.card-grid { grid-template-columns: 1fr; }
|
||||||
|
.about-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== UTILITY ===== */
|
||||||
|
.hidden { display: none !important; }
|
||||||
|
.text-center { text-align: center; }
|
||||||
|
.mt-1 { margin-top: 1rem; }
|
||||||
|
.mt-2 { margin-top: 1.5rem; }
|
||||||
|
.mt-3 { margin-top: 2rem; }
|
||||||
140
festivals.html
Normal file
140
festivals.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>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-logo">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
</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">
|
||||||
|
📅 <strong>May 15–17, 2026</strong>
|
||||||
|
</div>
|
||||||
|
<div class="festival-meta-item">
|
||||||
|
📍 Royal Lotus Hotel · <strong>My Khe Beach, Da Nang</strong>
|
||||||
|
</div>
|
||||||
|
<div class="festival-meta-item">
|
||||||
|
🎵 <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">👥 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>
|
||||||
|
</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">
|
||||||
|
📅 <strong>October 2–4, 2026</strong>
|
||||||
|
</div>
|
||||||
|
<div class="festival-meta-item">
|
||||||
|
📍 Da Nang Beach · <strong>Da Nang</strong>
|
||||||
|
</div>
|
||||||
|
<div class="festival-meta-item">
|
||||||
|
🎵 <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">🌐 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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
147
index.html
147
index.html
@@ -1,21 +1,146 @@
|
|||||||
<!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. Find 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-logo">
|
||||||
<p class="counter" id="counter"></p>
|
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
|
||||||
</div>
|
</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">
|
||||||
|
<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>
|
||||||
|
<div class="hero-ctas">
|
||||||
|
<a href="schedule.html" class="btn btn-primary">📅 Weekly Schedule</a>
|
||||||
|
<a href="studios.html" class="btn btn-secondary">🏫 Studios & Classes</a>
|
||||||
|
<a href="festivals.html" class="btn btn-ghost">🎉 Festivals</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ABOUT -->
|
||||||
|
<section>
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">What is SaborFlow?</h2>
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="about-card">
|
||||||
|
<div class="icon">💃</div>
|
||||||
|
<h3>Social Dancing</h3>
|
||||||
|
<p>Almost-daily gatherings at bars, clubs, and restaurants in Da Nang and Hoi An. Everyone is welcome — whether you’re a total beginner or a seasoned pro.</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>
|
||||||
|
</div>
|
||||||
|
<div class="about-card">
|
||||||
|
<div class="icon">🌴</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- COMING UP THIS WEEK -->
|
||||||
|
<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 →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- INSTAGRAM CTA -->
|
||||||
|
<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>
|
||||||
|
<a href="https://www.instagram.com/saborflowdanang/" target="_blank" rel="noopener" class="btn btn-primary">
|
||||||
|
📸 @saborflowdanang
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- 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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
108
js/main.js
Normal file
108
js/main.js
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
// ============================================================
|
||||||
|
// 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} <span style="font-weight:400;color:var(--subtle)">@ ${row.venue}</span></div>
|
||||||
|
<div class="teaser-meta">${row.music} · <span style="color:var(--teal)">${row.city}</span></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();
|
||||||
|
});
|
||||||
86
schedule.html
Normal file
86
schedule.html
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
<!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-logo">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
152
studios.html
Normal file
152
studios.html
Normal file
@@ -0,0 +1,152 @@
|
|||||||
|
<!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-logo">
|
||||||
|
<img src="assets/logo.jpg" alt="SaborFlow Da Nang">
|
||||||
|
</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">
|
||||||
|
<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>
|
||||||
|
</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">
|
||||||
|
<strong>📍</strong> 292 Vo Nguyen Giap, Bac My Phu, Ngu Hanh Son, Da Nang
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>🕘</strong> Monday workshops 8:30 PM · Social from 9:30 PM
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>👩🏫</strong> Luu Nhat Phuong, Phong & Shai
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="https://www.facebook.com/frog.goose/" target="_blank" rel="noopener" class="card-link">👥 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">
|
||||||
|
<strong>📍</strong> Da Nang (various venues — check website for current location)
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>👨🏫</strong> Lucho Giraldes — 20+ years experience, professional performer
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📚</strong> Beginner · Intermediate · Advanced
|
||||||
|
</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>
|
||||||
|
</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">
|
||||||
|
<strong>📍</strong> Da Nang
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>📞</strong> <a href="tel:+84855085903" style="color:var(--orange)">+84 85 508 5903</a>
|
||||||
|
</div>
|
||||||
|
<div class="card-info">
|
||||||
|
<strong>✉️</strong> <a href="mailto:LearnToDanceDANANG@gmail.com" style="color:var(--orange)">LearnToDanceDANANG@gmail.com</a>
|
||||||
|
</div>
|
||||||
|
<div class="card-links">
|
||||||
|
<a href="mailto:LearnToDanceDANANG@gmail.com" class="card-link">✉️ 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(--subtle);margin-bottom:1rem">Know a studio we’re missing? Let us know!</p>
|
||||||
|
<a href="connect.html" class="btn btn-secondary">📩 Contact Us</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>
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user