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>