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

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>