253 lines
14 KiB
HTML
253 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>The Bunker Operations</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<link rel="stylesheet" href="css/responsive.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<link rel="icon" type="image/svg+xml" href="img/bunker-logo.svg">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div class="logo">
|
|
<a href="index.html">BNKops</a>
|
|
</div>
|
|
<div class="menu-toggle" id="mobile-menu">
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
</div>
|
|
<ul class="nav-menu">
|
|
<li><a href="index.html" class="active">Home</a></li>
|
|
<li><a href="#services">Services</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
<li><a href="sitemap.html">Sitemap</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<h1>The Bunker Operations</h1>
|
|
<p>Community Strategy, Tactics, and Technology</p>
|
|
|
|
<div class="mt-12 flex-container flex flex-wrap justify-center gap-6" style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 40px;">
|
|
<!-- Polaroid-style logo moved to be in the same row -->
|
|
<div class="polaroid" style="margin: 0; max-width: 250px;">
|
|
<div class="polaroid-inner">
|
|
<img src="img/bnkops-logo-purple.png" alt="BNKops Logo" class="polaroid-img">
|
|
</div>
|
|
<div class="polaroid-caption">
|
|
<p>Building community power</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="post-it post-it-pink tilt-left-sm" style="width: 300px; padding: 20px; max-width: 90%;">
|
|
<span style="font-size: 2rem; margin-bottom: 10px; display: block;">🌱 💪</span>
|
|
<p style="color: #333; font-weight: 500;">A co-operative network full of care, knowledge, and skill on how to build local community capacity in current times.</p>
|
|
</div>
|
|
<div class="post-it post-it-blue tilt-right-sm" style="width: 300px; padding: 20px; max-width: 90%;">
|
|
<span style="font-size: 2rem; margin-bottom: 10px; display: block;">🔓 ⚡</span>
|
|
<p style="color: #333; font-weight: 500;">Open-source, self-hosted, low-cost, and corporation-free technology for community focused organizations.</p>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 40px; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
|
|
<a href="#contact" class="btn btn-primary">Work with us</a>
|
|
<a href="#services" class="btn btn-secondary">Learn more</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Emoji stickers will be added by JavaScript -->
|
|
</section>
|
|
|
|
<section id="services" class="services">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Our Solutions</h2>
|
|
<p>Tools and infrastructure built for community organizations</p>
|
|
</div>
|
|
<div class="services-grid">
|
|
<div class="service-card post-it post-it-blue">
|
|
<i class="fas fa-book"></i>
|
|
<h3>Strategy & Tactics</h3>
|
|
<p>We provide consulting with a focus on community building, ethical technology, scalable campaigns, and grassroots fundraising.</p>
|
|
<ul style="margin-top: 15px; text-align: left;">
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--trans-pink); margin-right: 8px;">→</span>Community organizing strategy</li>
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--trans-pink); margin-right: 8px;">→</span>Tech infrastructure planning</li>
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--trans-pink); margin-right: 8px;">→</span>Campaign development</li>
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--trans-pink); margin-right: 8px;">→</span>Ethics-first approach</li>
|
|
</ul>
|
|
<div style="margin-top: 20px; text-align: left;">
|
|
<a href="#contact" style="display: inline-block;">Work with us →</a>
|
|
</div>
|
|
</div>
|
|
<div class="service-card post-it post-it-pink">
|
|
<i class="fas fa-database"></i>
|
|
<h3>BNKops Repository</h3>
|
|
<p>A peer-to-peer generated knowledge base. Like MySpace meets social work, our repository grows organically through community contributions.</p>
|
|
<ul style="margin-top: 15px; text-align: left;">
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Open-source documentation</li>
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Community-driven content</li>
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Experience-based knowledge</li>
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Corporation-free infrastructure</li>
|
|
</ul>
|
|
<div style="margin-top: 20px; text-align: left;">
|
|
<a href="https://docs.bnkops.com/" style="display: inline-block;">View Project →</a>
|
|
</div>
|
|
</div>
|
|
<div class="service-card post-it post-it-white">
|
|
<i class="fas fa-globe"></i>
|
|
<h3>Change Maker</h3>
|
|
<p>Professional-grade documentation tools with revolutionary simplicity. Build and manage your digital political campaign or community website.</p>
|
|
<ul style="margin-top: 15px; text-align: left;">
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Local build control</li>
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Remote accessibility</li>
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Built-in security</li>
|
|
<li style="margin-bottom: 8px;"><span style="color: var(--primary-color); margin-right: 8px;">→</span>Save thousands in yearly bills</li>
|
|
</ul>
|
|
<div style="margin-top: 20px; text-align: left;">
|
|
<a href="https://docs.bnkops.com/cm/" style="display: inline-block;">View Project →</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="position: relative; margin-top: 40px; text-align: center;">
|
|
<div class="post-it post-it-purple" style="display: inline-block; padding: 15px 20px; transform: rotate(-3deg); max-width: 300px; margin: 0 auto;">
|
|
<p style="font-weight: bold;">Build your power, don't pay for it ✊</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about" class="about">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Who We Are</h2>
|
|
<p>The Bunker Operations</p>
|
|
</div>
|
|
<div class="about-content">
|
|
<div class="about-text">
|
|
<!-- Replace the direct paragraphs with a card structure -->
|
|
<div class="post-it post-it-purple">
|
|
<p>BNKops is a collective with a central administrative team. We operate as a co-operative of skilled individuals passionate about building community capacity through ethical technology and organizing strategies.</p>
|
|
<p>Our group comprises trusted collaborators, comrades, and co-conspirators sharing goals in community growth. Based in amiskwaciy-waskahikan (Edmonton), we are grateful for the land's provisions and strive to honor it through our work.</p>
|
|
</div>
|
|
</div>
|
|
<div class="about-stats">
|
|
<div class="stat-item post-it post-it-blue tilt-right-sm">
|
|
<i class="fas fa-globe"></i>
|
|
<h3>Co-operative Based</h3>
|
|
<p>Creating resources that are open-source, low-cost, easy to operate, and corporation-free.</p>
|
|
</div>
|
|
<div class="stat-item post-it post-it-pink tilt-left-sm">
|
|
<i class="fas fa-users"></i>
|
|
<h3>Community Focused</h3>
|
|
<p>Our group comprises trusted collaborators, comrades, and co-conspirators sharing goals in community growth.</p>
|
|
</div>
|
|
<div class="stat-item post-it post-it-white tilt-right-sm">
|
|
<i class="fas fa-code-branch"></i>
|
|
<h3>Open Source</h3>
|
|
<p>All our tools and resources are open-source, ensuring accessibility and transparency.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 40px; text-align: center;">
|
|
<a href="https://docs.bnkops.com/" class="btn btn-primary">Visit our repository</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact" class="contact">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Work With Us</h2>
|
|
<p>Looking to collaborate? Reach out, let's chat.</p>
|
|
</div>
|
|
<div class="contact-content">
|
|
<div class="post-it post-it-purple tilt-left-sm" style="padding: 30px;">
|
|
<h3 style="font-size: 1.5rem; margin-bottom: 20px;">Contact Us</h3>
|
|
<div style="display: flex; flex-direction: column; gap: 15px;">
|
|
<a href="mailto:admin@bnkops.ca" style="display: flex; align-items: center; gap: 10px;">
|
|
<i class="fas fa-envelope"></i>
|
|
admin@bnkops.ca
|
|
</a>
|
|
<a href="https://changemaker.bnkops.com/" style="display: flex; align-items: center; gap: 10px;">
|
|
<i class="fas fa-globe"></i>
|
|
changemaker.bnkops.com
|
|
</a>
|
|
<a href="https://docs.bnkops.com/" style="display: flex; align-items: center; gap: 10px;">
|
|
<i class="fas fa-book"></i>
|
|
docs.bnkops.com
|
|
</a>
|
|
</div>
|
|
|
|
<div style="margin-top: 30px;">
|
|
<h3 style="font-size: 1.2rem; margin-bottom: 15px;">Administration</h3>
|
|
<div style="margin-bottom: 15px;">
|
|
<h4 style="font-weight: bold;">Reed Larsen 💅</h4>
|
|
<p style="font-size: 0.9rem; margin: 5px 0;">The Bunker Admin</p>
|
|
<a href="mailto:reed@bnkops.ca">reed@bnkops.ca</a>
|
|
</div>
|
|
<div>
|
|
<h4 style="font-weight: bold;">Shayla Breen 🤔</h4>
|
|
<p style="font-size: 0.9rem; margin: 5px 0;">The Bunker Strategist</p>
|
|
<a href="mailto:shayla@bnkops.ca">shayla@bnkops.ca</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="post-it post-it-pink tilt-right-sm" style="padding: 20px; margin-top: 30px;">
|
|
<h3 style="margin-bottom: 15px;">Stay Updated</h3>
|
|
<p style="margin-bottom: 20px;">Subscribe to our newsletter to get weekly updates on our latest projects and community initiatives.</p>
|
|
<a href="https://listmonk.bnkops.com/subscription/form" class="btn btn-secondary" target="_blank">
|
|
<i class="fas fa-envelope-open-text" style="margin-right: 8px;"></i>Subscribe to Newsletter
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-logo">
|
|
<h2>BNKops</h2>
|
|
<p>Community Strategy, Tactics, and Technology</p>
|
|
</div>
|
|
<div class="footer-links">
|
|
<h3>Quick Links</h3>
|
|
<ul>
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="#services">Services</a></li>
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#contact">Contact</a></li>
|
|
<li><a href="sitemap.html">Sitemap</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-social">
|
|
<h3>Connect With Us</h3>
|
|
<div class="social-icons">
|
|
<a href="#"><i class="fab fa-mastodon"></i></a>
|
|
<a href="#"><i class="fab fa-github"></i></a>
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a>
|
|
<a href="#"><i class="fab fa-discord"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2025 The Bunker Operations. All Rights Reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|