From f5e95a6752239e1145ebfa0e01eca70efd8ae2f3 Mon Sep 17 00:00:00 2001 From: BLACKBOX Agent Date: Tue, 4 Nov 2025 13:15:13 +0000 Subject: [PATCH] feat: create crochet bags website --- index.html | 147 +++++++++++++--- main.js | 203 +++++++++++++++++----- style.css | 491 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 770 insertions(+), 71 deletions(-) diff --git a/index.html b/index.html index 0d5208117..b57500f8a 100644 --- a/index.html +++ b/index.html @@ -2,32 +2,137 @@ - + + Crochet Bags - Handmade with Love + + + -

Coffee!

+
+ +
+

Handcrafted Crochet Bags

+

Unique, sustainable, and made with love

+ Explore Collection +
+
-
- - - -
+
+
+
+
+
🧶
+

Handmade

+

Each bag is carefully crafted by hand with attention to every detail

+
+
+
🌿
+

Sustainable

+

Made with eco-friendly materials and sustainable practices

+
+
+
✨
+

Unique

+

No two bags are exactly alike - each piece is one of a kind

+
+
+
+
- - - - - - - - - -
IDNAMEROAST
+
+
+

Our Collection

+

Browse our beautiful selection of crochet bags

+ +
+ + +
+ +
+ +
+
+
+ +
+
+
+
+

About Our Craft

+

Crochet bags combine traditional craftsmanship with modern design. Each bag is meticulously handcrafted using premium yarns and time-honored crochet techniques passed down through generations.

+

Our bags are not just accessories - they're wearable art pieces that tell a story of patience, skill, and dedication. From casual totes perfect for everyday use to elegant clutches for special occasions, each piece is designed to be both beautiful and functional.

+
+
+

500+

+

Bags Created

+
+
+

100%

+

Handmade

+
+
+

50+

+

Unique Designs

+
+
+
+
+
+ 🧺 +
+
+
+
+
+ +
+
+

Get in Touch

+

Have questions or want a custom bag? We'd love to hear from you!

+
+
+ +
+
+ +
+
+ +
+ +
+
+
+ + diff --git a/main.js b/main.js index 51df444ff..01057f942 100644 --- a/main.js +++ b/main.js @@ -1,57 +1,172 @@ "use strict" -function renderCoffee(coffee) { - let html = ''; - html += `${coffee.id}`; - html += `${coffee.name}`; - html += `${coffee.roast}`; - html += ''; - - return html; +const crochetBags = [ + { + id: 1, + name: 'Summer Breeze Tote', + style: 'tote', + description: 'Perfect for beach days and farmers markets. Spacious and durable with comfortable handles.', + icon: '👜' + }, + { + id: 2, + name: 'Bohemian Crossbody', + style: 'crossbody', + description: 'Hands-free convenience with a boho-chic style. Features adjustable strap and secure closure.', + icon: '👝' + }, + { + id: 3, + name: 'Evening Elegance Clutch', + style: 'clutch', + description: 'Sophisticated design for special occasions. Compact yet spacious enough for essentials.', + icon: '💼' + }, + { + id: 4, + name: 'Rustic Bucket Bag', + style: 'bucket', + description: 'Trendy bucket shape with drawstring closure. Perfect for everyday adventures.', + icon: '🧺' + }, + { + id: 5, + name: 'Market Day Tote', + style: 'tote', + description: 'Extra large capacity for all your shopping needs. Reinforced bottom and sturdy construction.', + icon: '🛍️' + }, + { + id: 6, + name: 'Vintage Crossbody', + style: 'crossbody', + description: 'Classic design with modern functionality. Features multiple pockets for organization.', + icon: '👜' + }, + { + id: 7, + name: 'Pearl Clutch', + style: 'clutch', + description: 'Adorned with delicate pearl accents. Perfect for weddings and formal events.', + icon: '💎' + }, + { + id: 8, + name: 'Festival Bucket', + style: 'bucket', + description: 'Colorful and fun design ideal for music festivals. Lightweight and easy to carry.', + icon: '🎨' + }, + { + id: 9, + name: 'Coastal Tote', + style: 'tote', + description: 'Inspired by ocean waves with blue and white patterns. Water-resistant lining available.', + icon: '🌊' + }, + { + id: 10, + name: 'Mini Crossbody', + style: 'crossbody', + description: 'Compact and cute for carrying just the essentials. Perfect for concerts and nights out.', + icon: '✨' + }, + { + id: 11, + name: 'Metallic Clutch', + style: 'clutch', + description: 'Shimmering metallic yarn creates a stunning effect. Statement piece for any outfit.', + icon: '⭐' + }, + { + id: 12, + name: 'Garden Bucket', + style: 'bucket', + description: 'Floral-inspired design with nature motifs. Eco-friendly and sustainable materials.', + icon: '🌸' + } +]; + +function renderBag(bag) { + return ` +
+
+ ${bag.icon} +
+
+

${bag.name}

+ ${bag.style.charAt(0).toUpperCase() + bag.style.slice(1)} +

${bag.description}

+
+
+ `; } -function renderCoffees(coffees) { - let html = ''; - for(let i = coffees.length - 1; i >= 0; i--) { - html += renderCoffee(coffees[i]); +function renderBags(bags) { + return bags.map(bag => renderBag(bag)).join(''); +} + +function filterBags() { + const selectedStyle = styleFilter.value; + const bagsContainer = document.getElementById('bags-container'); + + if (selectedStyle === 'all') { + bagsContainer.innerHTML = renderBags(crochetBags); + } else { + const filteredBags = crochetBags.filter(bag => bag.style === selectedStyle); + bagsContainer.innerHTML = renderBags(filteredBags); } - return html; + + const bagCards = document.querySelectorAll('.bag-card'); + bagCards.forEach((card, index) => { + card.style.animation = `fadeIn 0.5s ease ${index * 0.1}s backwards`; + }); } -function updateCoffees(e) { - e.preventDefault(); // don't submit the form, we just want to update the data - const selectedRoast = roastSelection.value; - const filteredCoffees = []; - coffees.forEach( coffee => { - if (coffee.roast === selectedRoast) { - filteredCoffees.push(coffee); +const styleFilter = document.getElementById('style-filter'); +const bagsContainer = document.getElementById('bags-container'); + +bagsContainer.innerHTML = renderBags(crochetBags); + +styleFilter.addEventListener('change', filterBags); + +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', function (e) { + e.preventDefault(); + const target = document.querySelector(this.getAttribute('href')); + if (target) { + target.scrollIntoView({ + behavior: 'smooth', + block: 'start' + }); } }); - tbody.innerHTML = renderCoffees(filteredCoffees); -} +}); -// from http://www.ncausa.org/About-Coffee/Coffee-Roasts-Guide -const coffees = [ - {id: 1, name: 'Light City', roast: 'light'}, - {id: 2, name: 'Half City', roast: 'light'}, - {id: 3, name: 'Cinnamon', roast: 'light'}, - {id: 4, name: 'City', roast: 'medium'}, - {id: 5, name: 'American', roast: 'medium'}, - {id: 6, name: 'Breakfast', roast: 'medium'}, - {id: 7, name: 'High', roast: 'dark'}, - {id: 8, name: 'Continental', roast: 'dark'}, - {id: 9, name: 'New Orleans', roast: 'dark'}, - {id: 10, name: 'European', roast: 'dark'}, - {id: 11, name: 'Espresso', roast: 'dark'}, - {id: 12, name: 'Viennese', roast: 'dark'}, - {id: 13, name: 'Italian', roast: 'dark'}, - {id: 14, name: 'French', roast: 'dark'}, -]; +const contactForm = document.querySelector('.contact-form'); +contactForm.addEventListener('submit', function(e) { + e.preventDefault(); + alert('Thank you for your message! We\'ll get back to you soon.'); + contactForm.reset(); +}); -const tbody = document.querySelector('#coffees'); -const submitButton = document.querySelector('#submit'); -const roastSelection = document.querySelector('#roast-selection'); +const observerOptions = { + threshold: 0.1, + rootMargin: '0px 0px -50px 0px' +}; -tbody.innerHTML = renderCoffees(coffees); +const observer = new IntersectionObserver(function(entries) { + entries.forEach(entry => { + if (entry.isIntersecting) { + entry.target.style.opacity = '1'; + entry.target.style.transform = 'translateY(0)'; + } + }); +}, observerOptions); -submitButton.addEventListener('click', updateCoffees); +document.querySelectorAll('.feature-card, .bag-card').forEach(el => { + el.style.opacity = '0'; + el.style.transform = 'translateY(20px)'; + el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; + observer.observe(el); +}); diff --git a/style.css b/style.css index cd051aae3..84ba65378 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,488 @@ -table { - border-collapse: collapse; - margin: 15px 0; +* { + margin: 0; + padding: 0; + box-sizing: border-box; } -td, th { - border: 1px solid black; - padding: 5px 10px; +:root { + --primary-color: #d4a574; + --secondary-color: #8b6f47; + --accent-color: #e8c4a0; + --text-dark: #2c2c2c; + --text-light: #666; + --bg-light: #faf8f5; + --white: #ffffff; + --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15); +} + +body { + font-family: 'Poppins', sans-serif; + color: var(--text-dark); + line-height: 1.6; + overflow-x: hidden; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.hero { + background: linear-gradient(135deg, #f5e6d3 0%, #d4a574 100%); + min-height: 100vh; + position: relative; +} + +.navbar { + padding: 20px 0; +} + +.navbar .container { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-family: 'Playfair Display', serif; + font-size: 2rem; + font-weight: 700; + color: var(--text-dark); +} + +.nav-links { + display: flex; + list-style: none; + gap: 30px; +} + +.nav-links a { + text-decoration: none; + color: var(--text-dark); + font-weight: 500; + transition: color 0.3s ease; +} + +.nav-links a:hover { + color: var(--secondary-color); +} + +.hero-content { + text-align: center; + padding: 120px 20px; +} + +.hero-title { + font-family: 'Playfair Display', serif; + font-size: 4rem; + font-weight: 700; + margin-bottom: 20px; + color: var(--text-dark); + animation: fadeInUp 1s ease; +} + +.hero-subtitle { + font-size: 1.5rem; + color: var(--text-light); + margin-bottom: 40px; + animation: fadeInUp 1s ease 0.2s backwards; +} + +.cta-button { + display: inline-block; + padding: 15px 40px; + background-color: var(--secondary-color); + color: var(--white); + text-decoration: none; + border-radius: 50px; + font-weight: 600; + transition: all 0.3s ease; + box-shadow: var(--shadow); + animation: fadeInUp 1s ease 0.4s backwards; +} + +.cta-button:hover { + background-color: var(--text-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.features { + padding: 80px 0; + background-color: var(--white); +} + +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 40px; +} + +.feature-card { + text-align: center; + padding: 40px 20px; + border-radius: 15px; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.feature-card:hover { + transform: translateY(-10px); + box-shadow: var(--shadow-lg); +} + +.feature-icon { + font-size: 4rem; + margin-bottom: 20px; +} + +.feature-card h3 { + font-family: 'Playfair Display', serif; + font-size: 1.8rem; + margin-bottom: 15px; + color: var(--secondary-color); +} + +.feature-card p { + color: var(--text-light); + font-size: 1rem; +} + +.collection { + padding: 80px 0; + background-color: var(--bg-light); +} + +.section-title { + font-family: 'Playfair Display', serif; + font-size: 3rem; + text-align: center; + margin-bottom: 15px; + color: var(--text-dark); +} + +.section-subtitle { + text-align: center; + color: var(--text-light); + font-size: 1.1rem; + margin-bottom: 50px; +} + +.filter-section { + text-align: center; + margin-bottom: 50px; +} + +.filter-section label { + font-weight: 600; + margin-right: 15px; + color: var(--text-dark); +} + +.filter-section select { + padding: 12px 20px; + border: 2px solid var(--accent-color); + border-radius: 25px; + font-size: 1rem; + background-color: var(--white); + color: var(--text-dark); + cursor: pointer; + transition: all 0.3s ease; + font-family: 'Poppins', sans-serif; +} + +.filter-section select:focus { + outline: none; + border-color: var(--secondary-color); +} + +.bags-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 30px; +} + +.bag-card { + background-color: var(--white); + border-radius: 15px; + overflow: hidden; + box-shadow: var(--shadow); + transition: transform 0.3s ease, box-shadow 0.3s ease; + animation: fadeIn 0.5s ease; +} + +.bag-card:hover { + transform: translateY(-10px); + box-shadow: var(--shadow-lg); +} + +.bag-image { + width: 100%; + height: 300px; + background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%); + display: flex; + align-items: center; + justify-content: center; + font-size: 5rem; +} + +.bag-info { + padding: 25px; +} + +.bag-name { + font-family: 'Playfair Display', serif; + font-size: 1.5rem; + margin-bottom: 10px; + color: var(--text-dark); +} + +.bag-style { + display: inline-block; + padding: 5px 15px; + background-color: var(--accent-color); + color: var(--secondary-color); + border-radius: 20px; + font-size: 0.85rem; + font-weight: 600; + margin-bottom: 10px; +} + +.bag-description { + color: var(--text-light); + font-size: 0.95rem; + line-height: 1.6; +} + +.about { + padding: 80px 0; + background-color: var(--white); +} + +.about-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + align-items: center; +} + +.about-text h2 { + text-align: left; + margin-bottom: 30px; +} + +.about-text p { + color: var(--text-light); + font-size: 1.1rem; + margin-bottom: 20px; + line-height: 1.8; +} + +.about-stats { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 30px; + margin-top: 40px; +} + +.stat { + text-align: center; +} + +.stat h3 { + font-family: 'Playfair Display', serif; + font-size: 2.5rem; + color: var(--secondary-color); + margin-bottom: 5px; +} + +.stat p { + color: var(--text-light); + font-size: 0.9rem; +} + +.about-image { + display: flex; + justify-content: center; + align-items: center; +} + +.image-placeholder { + width: 400px; + height: 400px; + background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%); + border-radius: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 10rem; + box-shadow: var(--shadow-lg); +} + +.contact { + padding: 80px 0; + background-color: var(--bg-light); +} + +.contact-form { + max-width: 600px; + margin: 0 auto; +} + +.form-group { + margin-bottom: 25px; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 15px 20px; + border: 2px solid var(--accent-color); + border-radius: 10px; + font-size: 1rem; + font-family: 'Poppins', sans-serif; + transition: border-color 0.3s ease; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--secondary-color); +} + +.submit-button { + width: 100%; + padding: 15px; + background-color: var(--secondary-color); + color: var(--white); + border: none; + border-radius: 50px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + font-family: 'Poppins', sans-serif; +} + +.submit-button:hover { + background-color: var(--text-dark); + transform: translateY(-2px); + box-shadow: var(--shadow-lg); +} + +.footer { + background-color: var(--text-dark); + color: var(--white); + padding: 40px 0; + text-align: center; +} + +.footer .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 20px; +} + +.social-links { + display: flex; + gap: 25px; +} + +.social-links a { + color: var(--white); + text-decoration: none; + transition: color 0.3s ease; +} + +.social-links a:hover { + color: var(--primary-color); +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@media (max-width: 768px) { + .hero-title { + font-size: 2.5rem; + } + + .hero-subtitle { + font-size: 1.2rem; + } + + .nav-links { + gap: 15px; + font-size: 0.9rem; + } + + .section-title { + font-size: 2rem; + } + + .about-content { + grid-template-columns: 1fr; + } + + .image-placeholder { + width: 300px; + height: 300px; + font-size: 8rem; + } + + .about-stats { + grid-template-columns: repeat(3, 1fr); + gap: 15px; + } + + .footer .container { + flex-direction: column; + text-align: center; + } + + .bags-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .logo { + font-size: 1.5rem; + } + + .nav-links { + gap: 10px; + font-size: 0.8rem; + } + + .hero-title { + font-size: 2rem; + } + + .hero-subtitle { + font-size: 1rem; + } + + .feature-grid { + grid-template-columns: 1fr; + } }