sbc-web3district / index.html
web3district's picture
undefined - Initial Deployment
e9270f3 verified
Raw
History Blame Contribute Delete
30.9 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SBC & Web3District Partnership</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4F46E5',
secondary: '#8B5CF6',
accent: '#06D6A0',
dark: '#0F172A',
light: '#F8FAFC'
}
}
}
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f8fafc;
}
h1, h2, h3, h4, h5 {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
}
.gradient-bg {
background: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 50%, #06D6A0 100%);
}
.card {
transition: all 0.3s ease;
box-shadow: 0 10px 30px -10px rgba(31, 41, 55, 0.1);
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px -10px rgba(31, 41, 55, 0.2);
}
.section-divider {
position: relative;
height: 100px;
overflow: hidden;
}
.section-divider::after {
content: "";
position: absolute;
top: 0;
left: -10%;
width: 120%;
height: 100%;
background: linear-gradient(135deg, #4F46E5 0%, #8B5CF6 50%, #06D6A0 100%);
border-radius: 0 0 50% 50%;
z-index: -1;
}
.stat-card {
border-left: 4px solid #4F46E5;
}
.timeline-item {
position: relative;
padding-left: 40px;
margin-bottom: 40px;
}
.timeline-item::before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #06D6A0;
border: 4px solid #4F46E5;
z-index: 10;
}
.timeline-item::after {
content: "";
position: absolute;
left: 10px;
top: 30px;
height: calc(100% + 20px);
width: 2px;
background: #4F46E5;
}
.timeline-item:last-child::after {
height: 0;
}
.media-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 20px;
}
</style>
</head>
<body class="bg-light text-dark">
<!-- Hero Section -->
<section class="gradient-bg text-white relative overflow-hidden">
<div class="absolute inset-0 bg-black bg-opacity-30"></div>
<div class="absolute top-0 right-0 bottom-0 left-0">
<div class="absolute -top-80 -left-80 w-[800px] h-[800px] rounded-full bg-gradient-to-br from-primary/30 via-secondary/20 to-accent/30 blur-3xl"></div>
<div class="absolute -bottom-96 -right-96 w-[800px] h-[800px] rounded-full bg-gradient-to-br from-primary/20 via-accent/30 to-secondary/20 blur-3xl"></div>
</div>
<div class="container mx-auto px-4 py-24 relative z-10">
<div class="max-w-5xl mx-auto text-center">
<div class="flex justify-center mb-6">
<div class="bg-white/10 backdrop-blur-lg rounded-xl py-2 px-6 flex items-center">
<span class="text-sm font-medium">Strategic Partnership</span>
</div>
</div>
<h1 class="text-4xl md:text-6xl font-bold mb-6">SBC & Web3District</h1>
<p class="text-xl md:text-2xl font-medium mb-8 leading-relaxed">Revolutionizing the Future of Web3 & Gaming at SBC Summit 2025</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<div class="bg-white/10 backdrop-blur-sm rounded-lg py-4 px-6 flex items-center justify-center">
<div>
<div class="text-3xl font-bold">16-18</div>
<div class="text-sm">September 2025</div>
</div>
</div>
<div class="bg-white/10 backdrop-blur-sm rounded-lg py-4 px-6 flex items-center justify-center">
<div>
<div class="text-3xl font-bold">Lisbon</div>
<div class="text-sm">Portugal</div>
</div>
</div>
<div class="bg-white/10 backdrop-blur-sm rounded-lg py-4 px-6 flex items-center justify-center">
<div>
<div class="text-3xl font-bold">100k+</div>
<div class="text-sm">Potential Reach</div>
</div>
</div>
</div>
</div>
</div>
<!-- Wave divider -->
<div class="absolute bottom-0 inset-x-0 h-24 bg-light transform translate-y-px rounded-t-[50%]"></div>
</section>
<!-- Partnership Overview -->
<section class="py-20 bg-light relative">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center mb-20">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Strategic Alliance</h2>
<p class="text-lg text-gray-700 mb-8">This partnership combines SBC's leadership in the gaming and betting industry with Web3District's expertise in blockchain and digital communities to create a groundbreaking event experience.</p>
<div class="flex justify-center gap-6 flex-wrap">
<div class="stat-card bg-white p-5 rounded-lg text-left w-full md:w-1/3 min-w-[250px]">
<div class="text-3xl text-primary font-bold mb-2">€35K+</div>
<div class="text-gray-600">Total Marketing Value</div>
</div>
<div class="stat-card bg-white p-5 rounded-lg text-left w-full md:w-1/3 min-w-[250px]">
<div class="text-3xl text-primary font-bold mb-2">1M+</div>
<div class="text-gray-600">Community Members Engaged</div>
</div>
<div class="stat-card bg-white p-5 rounded-lg text-left w-full md:w-1/3 min-w-[250px]">
<div class="text-3xl text-primary font-bold mb-2">15+</div>
<div class="text-gray-600">Media Outlets</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-5xl mx-auto">
<div class="bg-white card p-8 rounded-2xl">
<div class="w-16 h-16 rounded-lg bg-primary/10 text-primary flex items-center justify-center mb-6">
<i class="fab fa-discord text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">Web3District Commitments</h3>
<ul class="space-y-4">
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>360° Social Media Campaign (€5K value)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>Top-Tier Media Placement (15 outlets)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>VIP Lisbon Office Space & Event Booth</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>Ticket & VIP Pass Distribution</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>KOL Speaker Curation & Outreach</span>
</li>
</ul>
</div>
<div class="bg-white card p-8 rounded-2xl">
<div class="w-16 h-16 rounded-lg bg-secondary/10 text-secondary flex items-center justify-center mb-6">
<i class="fas fa-star text-2xl"></i>
</div>
<h3 class="text-2xl font-bold mb-4">SBC Commitments</h3>
<ul class="space-y-4">
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>Brand Visibility & Onsite Signage</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>Discount & VIP Codes</span>
</li>
<li class="fas fa-check-circle text-accent mt-1 mr-3">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>Co-branded Content Track</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>Complimentary Booth Space</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-accent mt-1 mr-3"></i>
<span>Commission Structure (€10k cap)</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Timeline -->
<section class="py-20 bg-gradient-to-b from-light to-gray-100">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Campaign Timeline</h2>
<p class="text-lg text-gray-700">Strategic actions taking place between May-October 2025</p>
</div>
<div class="relative max-w-3xl mx-auto">
<div class="absolute left-10 top-0 bottom-0 w-1 bg-gradient-to-b from-primary via-secondary to-accent rounded-full"></div>
<div class="timeline-item pl-12 sm:pl-0">
<div class="bg-white p-6 rounded-xl shadow-lg">
<div class="text-sm font-semibold text-accent mb-2">MAY</div>
<h3 class="text-xl font-bold mb-3">Initial Activation</h3>
<p>Our TON FEST quest with the SBC brand crushed it—putting SBC in front of 29k+ verified users worldwide (exposed to 29k verified users), adding 700+ fresh members to the SBC Summit Telegram channel, and pumping SBC Gaming's X (Twitter) followership by 10%.</p>
<div class="mt-4 flex flex-wrap gap-2 mb-4">
<span class="bg-primary/10 text-primary text-xs font-medium px-3 py-1 rounded-full">Telegram 700+</span>
<span class="bg-secondary/10 text-secondary text-xs font-medium px-3 py-1 rounded-full">Twitter +10%</span>
<span class="bg-accent/10 text-accent text-xs font-medium px-3 py-1 rounded-full">Exposed to 29k Verified Users</span>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm">
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 p-2 rounded-lg">
<img src="https://drive.google.com/thumbnail?id=1PMmkbc5gGBGd_hSlV-EuGfJn6oAzdgl9&sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">
</div>
<div class="bg-gray-50 p-2 rounded-lg">
<img src="https://drive.google.com/thumbnail?id=1UtRHiou6MiI7Ty5GFPKrS1S0KG5wCap2&sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">
</div>
<div class="bg-gray-50 p-2 rounded-lg">
<img src="https://drive.google.com/thumbnail?id=1Dofmf0Xgh3NAXfKa44mMaN-dEc1qZnSa&sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">
</div>
<div class="bg-gray-50 p-2 rounded-lg">
<img src="https://drive.google.com/thumbnail?id=1bd2Gbb09zGjEMb5jmGRiTdfjwpSJKgNX&sz=w1000" alt="TON FEST Activation" class="rounded-lg w-full h-auto">
</div>
</div>
</div>
</div>
</div>
<div class="timeline-item pl-12 sm:pl-0">
<div class="bg-white p-6 rounded-xl shadow-lg">
<div class="text-sm font-semibold text-accent mb-2">MAY</div>
<h3 class="text-xl font-bold mb-3">Web3/Ai Portugal Activation</h3>
<p>The kickoff TON activation got an extra boost—our event post was shared across Portugal's top-tier Web3 Telegram groups, reaching 8 000+ highly engaged members.</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-primary/10 text-primary text-xs font-medium px-3 py-1 rounded-full">Exposed to 8K Web3/AI Portuguese</span>
</div>
<div class="bg-white p-4 rounded-xl shadow-sm mt-4 w-1/2">
<div class="bg-gray-50 p-2 rounded-lg">
<img src="https://drive.google.com/thumbnail?id=1qoNoY_hNEqRgqwrYJgBeHpD4ha4UpZrL&sz=w1000" alt="Planning Strategy" class="rounded-lg w-full h-auto">
</div>
</div>
</div>
</div>
<div class="timeline-item pl-12 sm:pl-0">
<div class="bg-white p-6 rounded-xl shadow-lg">
<div class="text-sm font-semibold text-accent mb-2">JUNE</div>
<h3 class="text-xl font-bold mb-3">Campaign Kickoff</h3>
<p>Launch of social media campaigns, first media placements, and distribution of discount/VIP codes</p>
<ul class="mt-3 space-y-1">
<li class="flex items-center"><i class="fas fa-arrow-right text-xs text-primary mr-2"></i>Social campaign starts June 9</li>
<li class="flex items-center"><i class="fas fa-arrow-right text-xs text-primary mr-2"></i>First Quantum Post interview</li>
<li class="flex items-center"><i class="fas fa-arrow-right text-xs text-primary mr-2"></i>VIP office becomes available</li>
</ul>
</div>
</div>
<div class="timeline-item pl-12 sm:pl-0">
<div class="bg-white p-6 rounded-xl shadow-lg">
<div class="text-sm font-semibold text-accent mb-2">JULY</div>
<h3 class="text-xl font-bold mb-3">Build Momentum</h3>
<p>Continued media placements, social engagement, and ticket sales activities</p>
</div>
</div>
<div class="timeline-item pl-12 sm:pl-0">
<div class="bg-white p-6 rounded-xl shadow-lg">
<div class="text-sm font-semibold text-accent mb-2">AUGUST</div>
<h3 class="text-xl font-bold mb-3">Speaker Finalization</h3>
<p>KOL speaker curation completed before agenda cutoff, media placements peak</p>
</div>
</div>
<div class="timeline-item pl-12 sm:pl-0">
<div class="bg-white p-6 rounded-xl shadow-lg">
<div class="text-sm font-semibold text-accent mb-2">SEPTEMBER</div>
<h3 class="text-xl font-bold mb-3">Event Execution</h3>
<p>SBC Summit 2025 takes place with co-branded content track and Web3District booth activation</p>
<div class="mt-4 flex flex-wrap gap-2">
<span class="bg-primary/10 text-primary text-xs font-medium px-3 py-1 rounded-full">Sep 16-18</span>
<span class="bg-secondary/10 text-secondary text-xs font-medium px-3 py-1 rounded-full">Co-Branded Tracks</span>
<span class="bg-accent/10 text-accent text-xs font-medium px-3 py-1 rounded-full">Booth Staffing</span>
</div>
</div>
</div>
<div class="timeline-item pl-12 sm:pl-0">
<div class="bg-white p-6 rounded-xl shadow-lg">
<div class="text-sm font-semibold text-accent mb-2">OCTOBER</div>
<h3 class="text-xl font-bold mb-3">Post-Event Activities</h3>
<p>Final media placements, campaign reporting, and post-event engagement</p>
</div>
</div>
</div>
</div>
</section>
<!-- Media Highlights -->
<section class="py-20 bg-light">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Media & Audience Reach</h2>
<p class="text-lg text-gray-700">Monthly publications across top-tier Web3/AI PR media outlets driving engagement throughout the campaign</p>
</div>
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<div class="bg-white card p-8 rounded-2xl">
<div class="text-5xl font-bold text-primary mb-4">€12K</div>
<h3 class="text-xl font-bold mb-4">Media Publication Value</h3>
<p>Across 15 top-tier Web3/AI outlets during 5 months (Jun-Oct)</p>
</div>
<div class="bg-white card p-8 rounded-2xl">
<div class="text-5xl font-bold text-secondary mb-4">3M+</div>
<h3 class="text-xl font-bold mb-4">Total Audience Reach</h3>
<p>Cumulative monthly audience of featured publications</p>
</div>
<div class="bg-white card p-8 rounded-2xl">
<div class="text-5xl font-bold text-accent mb-4">5</div>
<h3 class="text-xl font-bold mb-4">Video Interviews</h3>
<p>Monthly SBC guest interviews at The Quantum Post</p>
</div>
</div>
<div class="bg-white rounded-2xl overflow-hidden">
<div class="p-8">
<h3 class="text-2xl font-bold mb-6">Featured Media Outlets</h3>
<div class="media-grid">
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-lg font-semibold text-gray-800">CoinMarketCap</div>
<div class="text-sm text-gray-600">210.2M visits</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-lg font-semibold text-gray-800">Cointelegraph</div>
<div class="text-sm text-gray-600">14.2M visits</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-lg font-semibold text-gray-800">BeInCrypto</div>
<div class="text-sm text-gray-600">11.5M page views</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-lg font-semibold text-gray-800">Binance</div>
<div class="text-sm text-gray-600">134.76M visits</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-lg font-semibold text-gray-800">Benzinga</div>
<div class="text-sm text-gray-600">14M unique visitors</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-lg font-semibold text-gray-800">Business Insider</div>
<div class="text-sm text-gray-600">100M unique visitors</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-lg font-semibold text-gray-800">CoinRepublic</div>
<div class="text-sm text-gray-600">50K readers</div>
</div>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="text-lg font-semibold text-gray-800">BlockTides</div>
<div class="text-sm text-gray-600">2.5M+ views</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Social Proof -->
<section class="py-20 bg-gradient-to-t from-primary/5 to-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-6">Proven Results</h2>
<p class="text-lg text-gray-700">Web3District demonstrated measurable impact during the TON FEST activation</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<div class="bg-white card rounded-xl p-8 flex flex-col items-center text-center">
<div class="text-5xl font-bold text-primary mb-2">20%</div>
<h3 class="text-xl font-bold mb-3">Twitter Growth</h3>
<p class="text-gray-600">Increased SBC Gaming followers from 6.5K to 7.2K during 7-day activation</p>
</div>
<div class="bg-white card rounded-xl p-8 flex flex-col items-center text-center">
<div class="text-5xl font-bold text-secondary mb-2">700+</div>
<h3 class="text-xl font-bold mb-3">Engaged Community</h3>
<p class="text-gray-600">Created Telegram channel with 700 subscribers ready to engage</p>
</div>
<div class="bg-white card rounded-xl p-8 flex flex-col items-center text-center">
<div class="text-5xl font-bold text-accent mb-2">8K+</div>
<h3 class="text-xl font-bold mb-3">Local Engagement</h3>
<p class="text-gray-600">Exposed SBC brand to all 8K Web3/community members in Portugal</p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<section class="py-20 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-primary/5 via-secondary/5 to-accent/5"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-4xl mx-auto bg-white card rounded-2xl shadow-xl overflow-hidden">
<div class="md:flex">
<div class="md:w-2/3 p-12">
<h2 class="text-3xl font-bold mb-4">Ready to Leverage This Partnership?</h2>
<p class="text-gray-700 mb-8">Join us at SBC Summit 2025 to experience the convergence of gaming, betting and Web3 innovation in Lisbon.</p>
<div class="flex flex-col sm:flex-row gap-4">
<a href="#" class="bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-8 rounded-lg transition-all duration-300 flex items-center">
<i class="fas fa-ticket-alt mr-3"></i> Get Tickets
</a>
<a href="#" class="bg-dark hover:bg-dark/90 text-white font-semibold py-3 px-8 rounded-lg transition-all duration-300 flex items-center">
<i class="fas fa-file-alt mr-3"></i> Request Partnership Details
</a>
</div>
</div>
<div class="md:w-1/3 hidden md:block relative">
<div class="absolute inset-0 bg-gradient-to-br from-primary via-secondary to-accent flex items-center justify-center">
<div class="text-white text-center px-6">
<div class="text-4xl font-bold mb-2">30%</div>
<div class="text-xl font-medium">Discount Available</div>
<div class="mt-2 text-sm">Use our partner code</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-dark text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div>
<h4 class="text-xl font-bold mb-4">Partnership</h4>
<p class="text-gray-300">A strategic collaboration between industry leaders in gaming and Web3 innovation.</p>
</div>
<div>
<h4 class="text-xl font-bold mb-4">Event Details</h4>
<p class="text-gray-300">
SBC Summit 2025<br>
16-18 September<br>
Lisbon, Portugal
</p>
</div>
<div>
<h4 class="text-xl font-bold mb-4">Connect</h4>
<div class="flex space-x-4">
<a href="#" class="text-gray-300 hover:text-white">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white">
<i class="fab fa-linkedin text-xl"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white">
<i class="fab fa-telegram text-xl"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white">
<i class="fab fa-discord text-xl"></i>
</a>
</div>
</div>
<div>
<h4 class="text-xl font-bold mb-4">Contact</h4>
<p class="text-gray-300">partnerships@web3district.com</p>
<p class="text-gray-300">partnerships@sbc.com</p>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
<p>© 2025 SBC & Web3District Partnership. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Animation for timeline items on scroll
document.addEventListener('DOMContentLoaded', function() {
const timelineItems = document.querySelectorAll('.timeline-item');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, 150);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
timelineItems.forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateY(30px)';
item.style.transition = 'all 0.6s ease';
observer.observe(item);
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=web3district/sbc-web3district" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>