Skip to content

Instantly share code, notes, and snippets.

@mewmix

mewmix/beez-2.markdown

Created July 1, 2025 03:55
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save mewmix/3505d13c3857b750febceec54e57ce51 to your computer and use it in GitHub Desktop.
Download ZIP
Beez 2
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);
}
.hero-cta-group .btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 1.4rem;
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);
color: var(--honey);
text-shadow: 0 0 1px #000;
transition: var(--transition);
width: 100%; /* 👈 force same layout on mobile */
}
.hero-cta-group .btn:hover {
background: rgba(255, 196, 35, 0.1);
transform: translateY(-3px);
}
.hero-cta-group .btn i {
margin-right: 0.5rem;
}
/* 🚀 --- 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;
/* Initially hidden above the viewport */
transform: translateY(-100%);
}
.main-nav.visible {
/* Slide down into view */
transform: translateY(0);
}
.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;
/* ✅ FIXED: Removed max-width and padding to align with other sections */
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;
}
.hero-cta-group {
display: flex;
flex-direction: column;
gap: 1.2rem;
margin-top: 1rem;
width: 100%;
max-width: 500px;
}
.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;
}
}
/* Animation for bees */
.bee {
position: absolute;
font-size: 1.5rem;
animation: fly 15s linear infinite;
z-index: 0;
opacity: 0.8;
user-select: none; /* Prevents users from selecting the emoji */
-webkit-user-select: none;
}
@keyframes fly {
0% {
transform: translate(0vw, 0vh) rotate(0deg);
}
25% {
transform: translate(20vw, 15vh) rotate(90deg);
}
50% {
transform: translate(40vw, -10vh) rotate(180deg);
}
75% {
transform: translate(10vw, 20vh) rotate(270deg);
}
100% {
transform: translate(0vw, 0vh) rotate(360deg);
}
}
</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>
<div class="container">
<div class="hero-content">
<h1 class="hero-title fade-up">Apiculture:</h1>
<h1 class="fade-up" style="color: var(--paper);">The practice of beekeeping.</h1>
<br>
<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 btn-primary">
<i class="fas fa-question-circle"></i> FAQ
</a>
<a href="mailto:Henry@TheBeezNeeds.com" class="btn btn-secondary">
<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>
</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>
// Navigation scroll effect
const nav = document.getElementById('main-nav');
let lastScrollY = window.scrollY;
// Add scroll event listener for navigation effect
window.addEventListener('scroll', () => {
const currentScrollY = window.scrollY;
// Determine scroll direction
const isScrollingDown = currentScrollY > lastScrollY;
// Add background when scrolled down past 50px
if (currentScrollY > 50) {
nav.classList.add('scrolled');
} else {
nav.classList.remove('scrolled');
}
// Show navigation when scrolling down past 100px
if (currentScrollY > 100 && isScrollingDown) {
nav.classList.add('visible');
}
// Hide navigation when scrolling to the top
else if (currentScrollY <= 10) {
nav.classList.remove('visible');
}
// Always show navigation when scrolling up
if (!isScrollingDown && currentScrollY > 100) {
nav.classList.add('visible');
}
lastScrollY = currentScrollY;
});
// --- Scroll Fade-In Animation Observer ---
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, {
threshold: 0.1 // Trigger when 10% of the element is visible
});
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 = '🐝'; // Use the emoji
// 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