Skip to content

Instantly share code, notes, and snippets.

@mewmix

mewmix/bees-static.markdown

Created July 1, 2025 01:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mewmix/1688c142dfa067895dd0a5d36ab980d2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mewmix/1688c142dfa067895dd0a5d36ab980d2 to your computer and use it in GitHub Desktop.
Download ZIP
Bees static
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Beez Needs | Humane Bee Relocation</title>
<meta name="description" content="Humane bee relocation services in South Orange County — zero pesticides.">
<!-- Fonts & Icons -->
<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=Gochi+Hand&family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
/* 🎨 --- Custom Properties --- 🎨 */
:root {
--honey: #ffc423;
--honey-light: #ffd46e;
--charcoal: #121212;
--paper: #f1f1f1;
--dark-card: #1c1c1c;
--text-muted: #a0a0a0;
--success: #4caf50;
--font-display: 'Gochi Hand', cursive;
--font-body: 'Poppins', sans-serif;
--radius-pill: 100px;
--radius-card: 24px;
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* 🧹 --- CSS Reset & Base Styles --- 🧹 */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px; /* Offset for fixed header */
}
body {
font-family: var(--font-body);
background-color: var(--charcoal);
color: var(--paper);
line-height: 1.7;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 {
font-family: var(--font-display);
line-height: 1.2;
font-weight: 400;
}
h1 {
font-size: clamp(2.8rem, 7vw, 5rem);
}
h2 {
font-size: clamp(2.2rem, 6vw, 3.5rem);
}
p {
margin-bottom: 1rem;
max-width: 65ch;
}
a {
color: var(--honey);
text-decoration: none;
transition: var(--transition);
}
.container {
width: 90%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
/* 🌟 --- Reusable Components --- 🌟 */
.btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: var(--radius-pill);
font-weight: 600;
font-size: 1rem;
border: 2px solid transparent;
cursor: pointer;
text-align: center;
transition: var(--transition);
}
.btn-primary {
background-color: var(--honey);
color: var(--charcoal);
box-shadow: 0 4px 15px -5px rgba(255, 196, 35, 0.5);
}
.btn-primary:hover {
transform: translateY(-4px) scale(1.03);
box-shadow: 0 8px 25px -8px var(--honey);
background-color: var(--honey-light);
}
.btn-secondary {
background-color: transparent;
color: var(--paper);
border-color: rgba(255, 255, 255, 0.3);
}
.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.1);
border-color: var(--paper);
transform: translateY(-4px);
}
/* 🚀 --- Scroll Animations --- 🚀 */
.fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}
/* 🧭 --- Navigation --- 🧭 */
.main-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem 0;
z-index: 1000;
transition: var(--transition);
background: transparent;
}
.main-nav.scrolled {
background: rgba(18, 18, 18, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 90%;
max-width: 1100px; /* ✅ FIXED: Matched to .container */
margin: 0 auto;
}
.nav-brand {
font-family: var(--font-display);
font-size: 1.75rem;
color: var(--paper);
}
.nav-brand:hover {
color: var(--honey);
}
/* 🐝 --- Hero Section --- 🐝 */
.hero {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 120px 0 60px;
background: linear-gradient(rgba(18, 18, 18, 0.85), rgba(18, 18, 18, 0.95)), url('https://images.unsplash.com/photo-1620649122142-2438575a195e?auto=format&fit=crop&w=1500&q=80') center/cover no-repeat;
text-align: center;
position: relative;
overflow: hidden; /* To keep bees inside the hero section */
}
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.hero-title {
font-size: clamp(3rem, 8vw, 5.5rem);
margin-bottom: 1rem;
line-height: 1.1;
position: relative;
display: inline-block;
color: var(--honey);
}
.hero-title::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 4px;
background: var(--honey);
border-radius: 2px;
}
.hero-subtitle {
font-family: var(--font-body);
font-size: clamp(1.5rem, 4vw, 2rem);
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--paper);
max-width: 600px;
}
.hero-description {
font-size: 1.25rem;
color: var(--paper);
max-width: 600px;
margin: 0 auto 2.5rem auto; /* Center the block */
position: relative;
padding: 20px;
background: rgba(255, 196, 35, 0.1);
border-radius: 16px;
border: 1px solid rgba(255, 196, 35, 0.2);
}
.hero-description::before {
content: "“";
position: absolute;
top: -30px;
left: 10px;
font-size: 5rem;
font-family: var(--font-display);
color: rgba(255, 196, 35, 0.3);
line-height: 1;
}
/* Updated button styling to match telephone button */
.hero-cta-group {
display: flex;
flex-direction: column;
gap: 1.2rem;
margin-top: 1rem;
width: 100%;
max-width: 500px;
}
.hero-cta-group .btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 1.2rem;
font-weight: 600;
padding: 12px 24px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 196, 35, 0.2);
transition: var(--transition);
}
.hero-cta-group .btn:hover {
background: rgba(255, 196, 35, 0.1);
transform: translateY(-3px);
}
.hero-cta-group .btn i {
margin-right: 0.75rem;
}
.hero-phone {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 1.4rem;
font-weight: 600;
margin-top: 1.5rem;
padding: 12px 24px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 196, 35, 0.2);
transition: var(--transition);
}
.hero-phone:hover {
background: rgba(255, 196, 35, 0.1);
transform: translateY(-3px);
}
/* 💡 --- Why Humane Section --- 💡 */
.why-section {
padding: 80px 0;
background-color: var(--charcoal);
}
.why-section .container {
display: grid;
gap: 3rem;
align-items: center;
}
.why-title {
text-align: center;
margin-bottom: 2rem;
}
.why-grid {
display: grid;
gap: 1.5rem;
}
.why-card {
background: var(--dark-card);
padding: 2rem 1.5rem;
border-radius: var(--radius-card);
display: flex;
align-items: center;
gap: 1.5rem;
transition: var(--transition);
border: 1px solid transparent;
}
.why-card:hover {
transform: translateY(-5px);
border-color: rgba(255, 196, 35, 0.3);
}
.why-card .icon {
font-size: 2rem;
color: var(--honey);
flex-shrink: 0;
}
.why-card p {
margin: 0;
font-weight: 600;
}
/* 📞 --- Footer --- 📞 */
.main-footer {
padding: 60px 0;
background-color: var(--dark-card);
text-align: center;
}
.footer-content h2 {
color: var(--honey);
margin-bottom: 1rem;
}
.footer-content p {
color: var(--text-muted);
max-width: 45ch;
margin-left: auto;
margin-right: auto;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
margin: 2rem 0;
}
.social-links a {
font-size: 1.5rem;
color: var(--text-muted);
}
.social-links a:hover {
color: var(--honey);
transform: translateY(-3px);
}
.copyright {
font-size: 0.9rem;
color: rgba(160, 160, 160, 0.5);
}
/* 📱 --- Responsive Design --- 📱 */
@media (min-width: 640px) {
.hero-cta-group {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.why-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 768px) {
.hero-title {
font-size: clamp(4rem, 8vw, 5.5rem);
}
.hero-subtitle {
font-size: clamp(1.8rem, 4vw, 2.2rem);
}
}
@media (min-width: 1024px) {
.why-section .container {
gap: 4rem;
}
.hero-content {
padding: 0;
}
}
/* Improved bee animation without rotation */
.bee {
position: absolute;
font-size: 1.5rem;
animation: fly 15s linear infinite;
z-index: 0;
opacity: 0.8;
user-select: none;
-webkit-user-select: none;
}
@keyframes fly {
0% { transform: translate(0vw, 0vh); }
25% { transform: translate(20vw, 15vh); }
50% { transform: translate(40vw, -10vh); }
75% { transform: translate(10vw, 20vh); }
100% { transform: translate(0vw, 0vh); }
}
/* New bee animation that faces direction */
.bee-smart {
position: absolute;
font-size: 1.5rem;
z-index: 0;
opacity: 0.8;
user-select: none;
-webkit-user-select: none;
}
/* Honeycomb pattern for visual interest */
.honeycomb-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image:
radial-gradient(circle at 50% 50%, rgba(255, 196, 35, 0.05) 0.5px, transparent 0.5px),
radial-gradient(circle at 50% 50%, rgba(255, 196, 35, 0.05) 0.5px, transparent 0.5px);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
opacity: 0.3;
z-index: 0;
}
/* Feature section styling */
.features-section {
padding: 80px 0;
background-color: var(--dark-card);
}
.features-grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.feature-card {
background: var(--charcoal);
padding: 2rem;
border-radius: var(--radius-card);
text-align: center;
transition: var(--transition);
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.feature-card .icon {
font-size: 3rem;
color: var(--honey);
margin-bottom: 1.5rem;
}
.feature-card h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: var(--honey-light);
}
</style>
</head>
<body>
<header class="main-nav" id="main-nav">
<div class="nav-container">
<a href="#top" class="nav-brand">The Beez Needs</a>
</div>
</header>
<main>
<!-- ======= Hero Section ======= -->
<section id="top" class="hero">
<!-- Decorative bees -->
<div class="bee" style="top: 20%; left: 15%;">🐝</div>
<div class="bee" style="top: 40%; left: 85%; animation-delay: -5s;">🐝</div>
<div class="bee" style="top: 70%; left: 30%; animation-delay: -10s;">🐝</div>
<!-- Honeycomb background pattern -->
<div class="honeycomb-bg"></div>
<div class="container">
<div class="hero-content">
<h1 class="hero-title fade-up">THE BEEZ NEEDS</h1>
<h2 class="hero-subtitle fade-up" style="transition-delay: 0.1s;">
Humane Bee Relocation Specialists
</h2>
<p class="hero-description fade-up" style="transition-delay: 0.2s;">
100 % pesticide-free honey-bee relocation across all of Orange County
</p>
<div class="hero-cta-group fade-up" style="transition-delay: 0.3s;">
<a href="#why" class="btn">
<i class="fas fa-question-circle"></i> FAQ
</a>
<a href="mailto:Henry@TheBeezNeeds.com" class="btn">
<i class="fas fa-envelope"></i> Contact Now
</a>
</div>
<a href="tel:+19496773330" class="hero-phone fade-up" style="transition-delay: 0.4s;">
<i class="fas fa-phone"></i> (949) 677-3330
</a>
<p class="fade-up" style="transition-delay: 0.5s; margin-top: 1.5rem; font-size: 1rem; color: var(--text-muted);">
<i class="fas fa-map-marker-alt"></i> Serving South Orange County
</p>
</div>
</div>
</section>
<!-- ======= Why Humane Section ======= -->
<section id="why" class="why-section">
<div class="container">
<h2 class="why-title fade-up">Why Choose Humane Relocation?</h2>
<div class="why-grid">
<div class="why-card fade-up" style="transition-delay: 0.1s;">
<i class="fas fa-seedling icon"></i>
<p>Essential for pollinating 70% of our food crops.</p>
</div>
<div class="why-card fade-up" style="transition-delay: 0.2s;">
<i class="fas fa-house icon"></i>
<p>Prevents toxic residue from pesticides in your home.</p>
</div>
<div class="why-card fade-up" style="transition-delay: 0.3s;">
<i class="fas fa-heart icon"></i>
<p>Bees are safely re-homed to a local apiary to thrive.</p>
</div>
<div class="why-card fade-up" style="transition-delay: 0.4s;">
<i class="fas fa-leaf icon"></i>
<p>An eco-friendly and sustainable long-term solution.</p>
</div>
</div>
</div>
</section>
<!-- ======= Features Section ======= -->
<section class="features-section">
<div class="container">
<h2 class="why-title fade-up">Our Humane Process</h2>
<div class="features-grid">
<div class="feature-card fade-up" style="transition-delay: 0.1s;">
<div class="icon">
<i class="fas fa-search"></i>
</div>
<h3>Assessment</h3>
<p>We carefully evaluate the bee colony and location to determine the best relocation strategy.</p>
</div>
<div class="feature-card fade-up" style="transition-delay: 0.2s;">
<div class="icon">
<i class="fas fa-hands"></i>
</div>
<h3>Gentle Removal</h3>
<p>Using specialized tools, we gently remove the bees without harming them.</p>
</div>
<div class="feature-card fade-up" style="transition-delay: 0.3s;">
<div class="icon">
<i class="fas fa-home"></i>
</div>
<h3>Safe Relocation</h3>
<p>Bees are transported to local apiaries where they can thrive and pollinate.</p>
</div>
<div class="feature-card fade-up" style="transition-delay: 0.4s;">
<div class="icon">
<i class="fas fa-seedling"></i>
</div>
<h3>Prevention</h3>
<p>We help seal entry points and provide guidance to prevent future colonies.</p>
</div>
</div>
</div>
</section>
</main>
<!-- ======= Footer ======= -->
<footer class="main-footer">
<div class="container">
<div class="footer-content">
<h2 class="fade-up">Get in Touch</h2>
<p class="fade-up" style="transition-delay: 0.1s;">
Have a bee problem? Don't wait. Contact Henry for a consultation and help save a colony today.
</p>
<div class="social-links fade-up" style="transition-delay: 0.2s;">
<a href="mailto:Henry@TheBeezNeeds.com" aria-label="Email"><i class="fas fa-envelope"></i></a>
<a href="tel:+19496773330" aria-label="Phone"><i class="fas fa-phone"></i></a>
<a href="#" aria-label="Google"><i class="fab fa-google"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
</div>
<p class="copyright fade-up" style="transition-delay: 0.3s;">
© 2025 The Beez Needs.
</p>
</div>
</div>
</footer>
<script>
// --- Navbar Scroll Effect ---
const nav = document.getElementById('main-nav');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
});
// --- Scroll Fade-In Animation Observer ---
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
const fadeUpElements = document.querySelectorAll('.fade-up');
fadeUpElements.forEach(el => observer.observe(el));
// Create more bees dynamically
function createBee() {
const bee = document.createElement('div');
bee.classList.add('bee');
bee.textContent = '🐝';
// Random position
const top = Math.random() * 100;
const left = Math.random() * 100;
bee.style.top = `${top}%`;
bee.style.left = `${left}%`;
// Random animation delay & duration
const delay = -(Math.random() * 15);
const duration = 10 + Math.random() * 10;
bee.style.animationDelay = `${delay}s`;
bee.style.animationDuration = `${duration}s`;
// Random size
bee.style.fontSize = `${1 + Math.random() * 0.8}rem`;
document.querySelector('.hero').appendChild(bee);
// Remove bee after animation completes
setTimeout(() => {
bee.remove();
}, (duration + delay) * 1000);
}
// Create initial bees
for (let i = 0; i < 5; i++) {
createBee();
}
// Create new bees periodically
setInterval(createBee, 2500);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment