283 lines
12 KiB
HTML
283 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BBE - Join the Community (Compact)</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--bg-color: #09090b;
|
|
--card-bg: #18181b;
|
|
--card-border: #27272a;
|
|
--bitcoin-orange: #F7931A;
|
|
--text-main: #ffffff;
|
|
--text-muted: #a1a1aa;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-main);
|
|
background-image: radial-gradient(circle at 50% 0%, #1a1a1c 0%, var(--bg-color) 70%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem 1rem; /* Added padding for preview */
|
|
}
|
|
|
|
.community-section {
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 2rem; /* Reduced from 4rem */
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 2.25rem; /* Reduced from 3rem */
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.section-header h2 span {
|
|
color: var(--bitcoin-orange);
|
|
}
|
|
|
|
.section-header p {
|
|
color: var(--text-muted);
|
|
font-size: 0.95rem; /* Reduced from 1.125rem */
|
|
max-width: 550px;
|
|
margin: 0 auto;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.community-grid {
|
|
display: grid;
|
|
/* Reduced min-width from 320px to 280px for tighter columns */
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 1rem; /* Reduced from 1.5rem */
|
|
}
|
|
|
|
.card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 0.75rem; /* Tighter border radius */
|
|
padding: 1.25rem; /* Reduced from 2rem */
|
|
text-decoration: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: radial-gradient(circle at top right, rgba(247, 147, 26, 0.08), transparent 60%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: translateY(-3px);
|
|
border-color: rgba(247, 147, 26, 0.4);
|
|
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between; /* Pushes arrow to the right */
|
|
margin-bottom: 0.75rem; /* Reduced from 1.25rem */
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon-wrapper {
|
|
width: 36px; /* Reduced from 48px */
|
|
height: 36px;
|
|
background-color: #000000;
|
|
border: 1px solid var(--card-border);
|
|
border-radius: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--bitcoin-orange);
|
|
margin-right: 0.75rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover .icon-wrapper {
|
|
background-color: var(--bitcoin-orange);
|
|
color: #000000;
|
|
transform: scale(1.05) rotate(-5deg);
|
|
border-color: var(--bitcoin-orange);
|
|
}
|
|
|
|
.icon-wrapper svg {
|
|
width: 18px; /* Reduced from 24px */
|
|
height: 18px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.card h3 {
|
|
color: var(--text-main);
|
|
font-size: 1.05rem; /* Reduced from 1.25rem */
|
|
font-weight: 700;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.card:hover h3 {
|
|
color: var(--bitcoin-orange);
|
|
}
|
|
|
|
.arrow-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
color: #52525b;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.card:hover .arrow-icon {
|
|
color: var(--bitcoin-orange);
|
|
transform: translate(3px, -3px);
|
|
}
|
|
|
|
.card p {
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem; /* Reduced from 0.95rem */
|
|
line-height: 1.5;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 600px) {
|
|
.section-header h2 { font-size: 1.75rem; }
|
|
.community-grid { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<section class="community-section">
|
|
|
|
<div class="section-header">
|
|
<h2>Join the <span>Embassy</span></h2>
|
|
<p>Connect with local Belgian Bitcoiners, builders, and educators.</p>
|
|
</div>
|
|
|
|
<div class="community-grid">
|
|
|
|
<!-- Telegram -->
|
|
<a href="#" class="card">
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<div class="icon-wrapper">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
|
|
</div>
|
|
<h3>Telegram</h3>
|
|
</div>
|
|
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg>
|
|
</div>
|
|
<p>Join the main Belgian chat group for daily discussion and local coordination.</p>
|
|
</a>
|
|
|
|
<!-- Nostr -->
|
|
<a href="#" class="card">
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<div class="icon-wrapper">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
</div>
|
|
<h3>Nostr</h3>
|
|
</div>
|
|
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg>
|
|
</div>
|
|
<p>Follow the BBE on the censorship-resistant social protocol for true signal.</p>
|
|
</a>
|
|
|
|
<!-- X / Twitter -->
|
|
<a href="#" class="card">
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<div class="icon-wrapper">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
|
</div>
|
|
<h3>X</h3>
|
|
</div>
|
|
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg>
|
|
</div>
|
|
<p>Stay updated with our latest local announcements and event drops.</p>
|
|
</a>
|
|
|
|
<!-- YouTube -->
|
|
<a href="#" class="card">
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<div class="icon-wrapper">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 00-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 00-1.94 2A29 29 0 001 11.75a29 29 0 00.46 5.33 2.78 2.78 0 001.94 2c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 001.94-2 29 29 0 00.46-5.33 29 29 0 00-.46-5.33z"/><path d="M9.75 15.02l5.75-3.27-5.75-3.27v6.54z"/></svg>
|
|
</div>
|
|
<h3>YouTube</h3>
|
|
</div>
|
|
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg>
|
|
</div>
|
|
<p>Watch past talks, educational content, and high-quality BBE meetup recordings.</p>
|
|
</a>
|
|
|
|
<!-- Discord -->
|
|
<a href="#" class="card">
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<div class="icon-wrapper">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
|
|
</div>
|
|
<h3>Discord</h3>
|
|
</div>
|
|
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg>
|
|
</div>
|
|
<p>Deep dive into technical discussions, node running, and project collaboration.</p>
|
|
</a>
|
|
|
|
<!-- LinkedIn -->
|
|
<a href="#" class="card">
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<div class="icon-wrapper">
|
|
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zM7.119 20.452H3.554V9h3.565v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
|
|
</div>
|
|
<h3>LinkedIn</h3>
|
|
</div>
|
|
<svg class="arrow-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17l9.2-9.2M17 17V7H7"/></svg>
|
|
</div>
|
|
<p>Connect with the Belgian Bitcoin professional network and industry leaders.</p>
|
|
</a>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</body>
|
|
</html> |