1176 lines
33 KiB
Plaintext
1176 lines
33 KiB
Plaintext
Prompt: make the best coffee shop website you can in html css js
|
||
Generated at step: 200
|
||
Timestamp: 2025-08-28T09:36:12.782497
|
||
============================================================
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
<title>Bean Haven | Premium Coffee & Brews</title>
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>%26%2392%3B</text></svg>" />
|
||
|
||
<!-- Google Fonts -->
|
||
<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=Poppins:wght@400;500;600;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
|
||
|
||
<!-- Font Awesome Icons -->
|
||
<script src="https://kit.fontawesome.com/a0d6c9e18b.js" crossorigin="anonymous"></script>
|
||
|
||
<!-- Custom Styles -->
|
||
<style>
|
||
/* Reset and Base */
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--primary: #F4A83C; /* Golden amber */
|
||
--primary-dark: #D99B2E; /* Darker golden brown */
|
||
--accent: #6D4C41; /* Rich espresso */
|
||
--bg-light: #F9FAFB; /* Light cream */
|
||
--bg-dark: #121212; /* Deep charcoal */
|
||
--text: #121212; /* Charcoal black */
|
||
--text-light: #F9FAFB; /* Cream for light text */
|
||
--card-bg: rgba(255, 255, 255, 0.8);
|
||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
|
||
--shadow-md: 0 8px 25px rgba(0,0,0,0.12), 0 4px 10px rgba(0,0,0,0.08);
|
||
--border-radius: 16px;
|
||
--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.29, 1.47);
|
||
}
|
||
|
||
body {
|
||
font-family: 'Poppins', sans-serif;
|
||
background-color: var(--bg-light);
|
||
color: var(--text);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
h1,h2,h3,h4,h5,h6 { font-family: 'Playfair Display', serif; letter-spacing: -0.02em; }
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
button:focus-visible,
|
||
input:focus-visible,
|
||
select:focus-visible {
|
||
outline: 3px solid var(--primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
/* Navigation */
|
||
header {
|
||
position: fixed;
|
||
width: 100%;
|
||
z-index: 999;
|
||
backdrop-filter: blur(8px);
|
||
background: linear-gradient(180deg, rgba(244, 168, 60, 0.8), rgba(244, 168, 60, 0.5));
|
||
border-bottom: 1px solid rgba(244, 168, 60, 0.25);
|
||
}
|
||
|
||
nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 0;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.logo span {
|
||
font-weight: 900;
|
||
font-size: 1.8rem;
|
||
}
|
||
|
||
.logo i {
|
||
font-size: 2rem;
|
||
color: var(--primary-dark);
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 28px;
|
||
}
|
||
|
||
.nav-links a {
|
||
font-weight: 600;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--primary-dark);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(to right, var(--primary), var(--primary-dark));
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 16px;
|
||
border-radius: 10px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.btn-outline {
|
||
background: transparent;
|
||
border: 1px solid var(--primary);
|
||
color: var(--primary);
|
||
padding: 10px 16px;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.btn-outline:hover {
|
||
background: rgba(244, 168, 60, 0.1);
|
||
}
|
||
|
||
/* Hero Section */
|
||
hero {
|
||
height: 90vh;
|
||
background-image: url('https://images.unsplash.com/photo-1501556600872-2f2112863815');
|
||
background-size: cover;
|
||
background-position: center bottom;
|
||
background-attachment: fixed;
|
||
position: relative;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.hero-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: radial-gradient(circle at 30% 40%, rgba(244,168,60,0.3) 0%, rgba(255,255,255,0) 70%);
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 800px;
|
||
text-align: left;
|
||
}
|
||
|
||
.hero-content h1 {
|
||
font-size: clamp(2.8rem, 7vw, 5.2rem);
|
||
font-weight: 900;
|
||
line-height: 1.1;
|
||
color: var(--text-light);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.hero-content p {
|
||
font-size: 1.1rem;
|
||
color: var(--text-light);
|
||
opacity: 0.9;
|
||
margin-bottom: 24px;
|
||
}
|
||
|
||
.cta-buttons {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.btn-large {
|
||
padding: 16px 22px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
/* Features Grid */
|
||
features {
|
||
padding: 100px 0;
|
||
}
|
||
|
||
.section-title {
|
||
text-align: center;
|
||
margin-bottom: 36px;
|
||
}
|
||
|
||
.section-title h2 {
|
||
font-size: clamp(2.2rem, 8vw, 4.4rem);
|
||
font-weight: 900;
|
||
color: var(--text);
|
||
}
|
||
|
||
.section-title p {
|
||
color: var(--text-light);
|
||
max-width: 680px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 28px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: var(--card-bg);
|
||
border-radius: var(--border-radius);
|
||
border: 1px solid rgba(244,168,60,0.15);
|
||
box-shadow: var(--shadow-sm);
|
||
overflow: hidden;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.feature-icon {
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(180deg, var(--primary), var(--primary-dark));
|
||
color: white;
|
||
border-top-right-radius: var(--border-radius);
|
||
border-top-left-radius: var(--border-radius);
|
||
}
|
||
|
||
.feature-body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.feature-body h3 {
|
||
margin-bottom: 12px;
|
||
font-size: 1.1rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.feature-body p {
|
||
color: var(--text-light);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
/* Brews Section */
|
||
brews {
|
||
padding: 100px 0;
|
||
background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
|
||
}
|
||
|
||
.brews-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 28px;
|
||
}
|
||
|
||
.brew-item {
|
||
background: var(--card-bg);
|
||
border-radius: var(--border-radius);
|
||
border: 1px solid rgba(244,168,60,0.15);
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-sm);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.brew-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 14px 16px;
|
||
border-bottom: 1px solid rgba(244,168,60,0.1);
|
||
}
|
||
|
||
.brew-img {
|
||
width: 60px;
|
||
height: 60px;
|
||
object-fit: cover;
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.brew-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.brew-name {
|
||
font-weight: 700;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.brew-desc {
|
||
color: var(--text-light);
|
||
opacity: 0.9;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.brew-price {
|
||
display: inline-block;
|
||
background: linear-gradient(180deg, var(--primary), var(--primary-dark));
|
||
color: white;
|
||
padding: 6px 10px;
|
||
border-radius: 8px;
|
||
font-weight: 700;
|
||
font-size: 0.95rem;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.brew-actions {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||
gap: 12px;
|
||
padding: 16px;
|
||
border-top: 1px solid rgba(244,168,60,0.1);
|
||
}
|
||
|
||
.btn-small {
|
||
padding: 8px 12px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* About Section */
|
||
about {
|
||
padding: 100px 0;
|
||
background: linear-gradient(180deg, #121212 0%, #1a1a1a 100%);
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.about-grid {
|
||
display: grid;
|
||
grid-template-columns: (minmax(320px, 1fr)) 1fr;
|
||
gap: 32px;
|
||
align-items: center;
|
||
}
|
||
|
||
.about-text {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.about-text h2 {
|
||
margin-bottom: 16px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.about-text p {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.about-stats {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 18px;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 2.2rem;
|
||
font-weight: 900;
|
||
color: var(--primary);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 0.9rem;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.about-image {
|
||
border-radius: var(--border-radius);
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255,255,255,0.08);
|
||
}
|
||
|
||
.about-image img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
/* Testimonials */
|
||
testimonials {
|
||
padding: 100px 0;
|
||
background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
|
||
}
|
||
|
||
.testimonials-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.testimonial-card {
|
||
background: var(--card-bg);
|
||
border-radius: var(--border-radius);
|
||
border: 1px solid rgba(244,168,60,0.15);
|
||
box-shadow: var(--shadow-sm);
|
||
padding: 20px;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.testimonial-card:hover {
|
||
transform: translateY(-6px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.rating {
|
||
color: #FFD700;
|
||
font-size: 1.3rem;
|
||
font-weight: bold;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.quote {
|
||
font-style: italic;
|
||
color: var(--text-light);
|
||
margin-bottom: 14px;
|
||
}
|
||
|
||
.author {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.author img {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 12px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
/* Contact */
|
||
contact {
|
||
padding: 100px 0;
|
||
background: linear-gradient(180deg, #121212 0%, #1a1a1a 100%);
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.contact-grid {
|
||
display: grid;
|
||
grid-template-columns: (minmax(320px, 1fr)) 1fr;
|
||
gap: 32px;
|
||
align-items: start;
|
||
}
|
||
|
||
.contact-info h2 {
|
||
margin-bottom: 16px;
|
||
font-weight: 900;
|
||
}
|
||
|
||
.contact-info ul {
|
||
list-style: none;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.contact-info li {
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.contact-info li i {
|
||
color: var(--primary);
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.contact-form {
|
||
background: var(--card-bg);
|
||
border-radius: var(--border-radius);
|
||
border: 1px solid rgba(244,168,60,0.15);
|
||
box-shadow: var(--shadow-sm);
|
||
padding: 20px;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.form-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
gap: 16px;
|
||
}
|
||
|
||
.form-control {
|
||
width: 100%;
|
||
padding: 12px 14px;
|
||
border: 1px solid rgba(244,168,60,0.2);
|
||
background: white;
|
||
border-radius: 10px;
|
||
font-size: 0.95rem;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.form-control:focus {
|
||
outline: 3px solid var(--primary);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
textarea.form-control {
|
||
min-height: 120px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.form-btn {
|
||
background: linear-gradient(180deg, var(--primary), var(--primary-dark));
|
||
color: white;
|
||
border: none;
|
||
padding: 12px 16px;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
font-weight: 600;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.form-btn:hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
background: #121212;
|
||
color: var(--text-light);
|
||
padding: 40px 0 20px;
|
||
}
|
||
|
||
.footer-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 24px;
|
||
}
|
||
|
||
.footer-col h3 {
|
||
margin-bottom: 16px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.footer-col ul {
|
||
list-style: none;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.footer-col li {
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.footer-col a {
|
||
color: var(--text-light);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.footer-col a:hover {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.social-icons {
|
||
display: flex;
|
||
gap: 12px;
|
||
}
|
||
|
||
.social-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 12px;
|
||
background: rgba(244,168,60,0.1);
|
||
color: var(--primary);
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.social-link:hover {
|
||
background: rgba(244,168,60,0.2);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.copyright {
|
||
text-align: center;
|
||
margin-top: 20px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid rgba(255,255,255,0.06);
|
||
color: var(--text-light);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Mobile menu */
|
||
.mobile-menu-toggle {
|
||
display: none;
|
||
position: relative;
|
||
padding: 10px;
|
||
cursor: pointer;
|
||
background: transparent;
|
||
border: none;
|
||
}
|
||
|
||
.hamburger {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--text);
|
||
}
|
||
|
||
.bar {
|
||
width: 22px;
|
||
height: 3px;
|
||
background: currentColor;
|
||
border-radius: 2px;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
/* Animations */
|
||
@keyframes fadeInUp {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.animate-fade-up {
|
||
animation: fadeInUp 0.8s ease forwards;
|
||
}
|
||
|
||
/* Scroll progress bar */
|
||
.scroll-progress {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 3px;
|
||
background: linear-gradient(to right, var(--primary), var(--primary-dark));
|
||
pointer-events: none;
|
||
z-index: 99;
|
||
}
|
||
|
||
.scroll-progress-inner {
|
||
height: 100%;
|
||
width: 0%;
|
||
background: linear-gradient(to right, var(--primary), var(--primary-dark));
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
/* Responsive adjustments */
|
||
@media (max-width: 992px) {
|
||
.section-title h2 {
|
||
font-size: clamp(2rem, 7vw, 4.4rem);
|
||
}
|
||
|
||
.about-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.contact-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.nav-links {
|
||
gap: 18px;
|
||
}
|
||
|
||
.cta-buttons {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.form-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.hero-content h1 {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.hero-content p {
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.mobile-menu-toggle {
|
||
display: block;
|
||
}
|
||
|
||
.nav-links {
|
||
position: absolute;
|
||
top: 70px;
|
||
left: 0;
|
||
right: 0;
|
||
background: white;
|
||
backdrop-filter: blur(10px);
|
||
border-bottom: 1px solid rgba(244,168,60,0.2);
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
|
||
transform: translateY(-10px);
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: var(--transition);
|
||
}
|
||
|
||
.nav-links.active {
|
||
transform: translateY(0);
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.nav-links a {
|
||
padding: 14px 16px;
|
||
}
|
||
|
||
.cta-buttons {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.form-row {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.about-stats {
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
}
|
||
}
|
||
|
||
/* Hamburger animation */
|
||
.hamburger.open .bar:nth-child(1) {
|
||
transform: rotate(-45deg) translate(-5px, 6px);
|
||
}
|
||
|
||
.hamburger.open .bar:nth-child(2) {
|
||
opacity: 0;
|
||
}
|
||
|
||
.hamburger.open .bar:nth-child(3) {
|
||
transform: rotate(45deg) translate(-5px, -6px);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Scroll Progress Bar -->
|
||
<div class="scroll-progress">
|
||
<div class="scroll-progress-inner" id="progressBar"></div>
|
||
</div>
|
||
|
||
<!-- Header -->
|
||
<header id="header">
|
||
<nav class="container">
|
||
<div class="nav-container">
|
||
<div class="logo">
|
||
<i class="fas fa-coffee"></i>
|
||
<span>Beean</span>Haven
|
||
</div>
|
||
|
||
<button class="mobile-menu-toggle" id="mobileMenuToggle">
|
||
<span class="hamburger">
|
||
<span class="bar"></span>
|
||
<span class="bar"></span>
|
||
<span class="bar"></span>
|
||
</span>
|
||
</button>
|
||
|
||
<ul class="nav-links" id="navLinks">
|
||
<li><a href="#hero">Home</a></li>
|
||
<li><a href="#features">Features</a></li>
|
||
<li><a href="#brews">Brews</a></li>
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#testimonials">Testimonials</a></li>
|
||
<li><a href="#contact">Contact</a></li>
|
||
</ul>
|
||
|
||
<a href="#contact" class="btn-primary">Order Now</a>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- Hero Section -->
|
||
<section id="hero" class="hero">
|
||
<div class="hero-overlay"></div>
|
||
<div class="hero-content">
|
||
<h1>Welcome to Bean Haven</h1>
|
||
<p>Handcrafted single-origin coffees, expertly roasted with care. Experience the perfect cup from our small-batch roastery.</p>
|
||
<div class="cta-buttons">
|
||
<a href="#brews" class="btn-large btn-outline">Explore Coffees</a>
|
||
<a href="#contact" class="btn-large btn-primary">Order Online</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features Section -->
|
||
<section id="features" class="features">
|
||
<div class="container">
|
||
<div class="section-title animate-fade-up">
|
||
<h2>Why Choose Bean Haven?</h2>
|
||
<p>Crafted with care, sourced responsibly, served with passion.</p>
|
||
</div>
|
||
<div class="features-grid">
|
||
<article class="feature-card animate-fade-up">
|
||
<div class="feature-icon"><i class="far fa-sun"></i></div>
|
||
<div class="feature-body">
|
||
<h3>Sustainable Sourcing</h3>
|
||
<p>We partner with ethical farms that prioritize environmental stewardship and fair wages.</p>
|
||
</div>
|
||
</article>
|
||
<article class="feature-card animate-fade-up">
|
||
<div class="feature-icon"><i class="fas fa-fire"></i></div>
|
||
<div class="feature-body">
|
||
<h3>Premium Roasting</h3>
|
||
<p>Small-batch roasting using traditional methods to preserve complex flavors and aromas.</p>
|
||
</div>
|
||
</article>
|
||
<article class="feature-card animate-fade-up">
|
||
<div class="feature-icon"><i class="fas fa-handshake"></i></div>
|
||
<div class="feature-body">
|
||
<h3>Community Focus</h3>
|
||
<p>A portion of every sale supports local artists and sustainability initiatives.</p>
|
||
</div>
|
||
</article>
|
||
<article class="feature-card animate-fade-up">
|
||
<div class="feature-icon"><i class="fas fa-leaf"></i></div>
|
||
<div class="feature-body">
|
||
<h3>Eco Packaging</h3>
|
||
<p>All packaging is compostable or recyclable—no plastic ever.</p>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Brews Section -->
|
||
<section id="brews" class="brews">
|
||
<div class="container">
|
||
<div class="section-title animate-fade-up">
|
||
<h2>Our Signature Coffees</h2>
|
||
<p>Curated blends from around the world, hand-selected for exceptional flavor profiles.</p>
|
||
</div>
|
||
<div class="brews-grid">
|
||
<article class="brew-item animate-fade-up">
|
||
<div class="brew-header">
|
||
<img src="https://images.unsplash.com/photo-1601735732370-2b0519087448?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600&auto=format&fit=crop" alt="Ethiopian Yirgacheffe" class="brew-img" loading="lazy" />
|
||
<div class="brew-info">
|
||
<div class="brew-name">Ethiopian Yirgacheffe</div>
|
||
<div class="brew-desc">Bright floral notes with citrus and jasmine.</div>
|
||
<div class="brew-price">$14.95</div>
|
||
</div>
|
||
</div>
|
||
<div class="brew-actions">
|
||
<a href="#" class="btn-small">Add to Cart</a>
|
||
<a href="#" class="btn-small">Learn More</a>
|
||
</div>
|
||
</article>
|
||
<article class="brew-item animate-fade-up">
|
||
<div class="brew-header">
|
||
<img src="https://images.unsplash.com/photo-1632494281365-c57753558b8f?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600&auto=format&fit=crop" alt="Guatemalan Antigua" class="brew-img" loading="lazy" />
|
||
<div class="brew-info">
|
||
<div class="brew-name">Guatemalan Antigua</div>
|
||
<div class="brew-desc">Balanced chocolate and citrus with a smooth finish.</div>
|
||
<div class="brew-price">$16.95</div>
|
||
</div>
|
||
</div>
|
||
<div class="brew-actions">
|
||
<a href="#" class="btn-small">Add to Cart</a>
|
||
<a href="#" class="btn-small">Learn More</a>
|
||
</div>
|
||
</article>
|
||
<article class="brew-item animate-fade-up">
|
||
<div class="brew-header">
|
||
<img src="https://images.unsplash.com/photo-1613473645661-d660c60f2e41?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600&auto=format&fit=crop" alt="Colombian Huila" class="brew-img" loading="lazy" />
|
||
<div class="brew-info">
|
||
<div class="brew-name">Colombian Huila</div>
|
||
<div class="brew-desc">Full-bodied with notes of caramel and dark chocolate.</div>
|
||
<div class="brew-price">$18.95</div>
|
||
</div>
|
||
</div>
|
||
<div class="brew-actions">
|
||
<a href="#" class="btn-small">Add to Cart</a>
|
||
<a href="#" class="btn-small">Learn More</a>
|
||
</div>
|
||
</article>
|
||
<article class="brew-item animate-fade-up">
|
||
<div class="brew-header">
|
||
<img src="https://images.unsplash.com/photo-1516299477851-3935c861764a?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600&auto=format&fit=crop" alt="Peruvian Cajamarca" class="brew-img" loading="lazy" />
|
||
<div class="brew-info">
|
||
<div class="brew-name">Peruvian Cajamarca</div>
|
||
<div class="brew-desc">Earthy, with hints of orange peel and spice.</div>
|
||
<div class="brew-price">$16.95</div>
|
||
</div>
|
||
</div>
|
||
<div class="brew-actions">
|
||
<a href="#" class="btn-small">Add to Cart</a>
|
||
<a href="#" class="btn-small">Learn More</a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- About Section -->
|
||
<section id="about" class="about">
|
||
<div class="container">
|
||
<div class="about-grid">
|
||
<div class="about-text">
|
||
<h2>The Art of Quality</h2>
|
||
<p>Founded in 2018 by Sarah Thompson, Bean Haven began as a passion project to bring exceptional, ethically sourced coffee directly to homes and cafes across the region.</p>
|
||
<p>Each roast is developed through meticulous tasting sessions with our master roaster, focusing on clarity of origin, balance, and depth. We believe great coffee should be accessible, sustainable, and enjoyable.</p>
|
||
|
||
<div class="about-stats">
|
||
<div class="stat-item">
|
||
<div class="stat-number">5+</div>
|
||
<div class="stat-label">Years of Craftsmanship</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">30+</div>
|
||
<div class="stat-label">Coffee Varietals</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">98%</div>
|
||
<div class="stat-label">Sustainability Score</div>
|
||
</div>
|
||
<div class="stat-item">
|
||
<div class="stat-number">12K+</div>
|
||
<div class="stat-label">Orders Delivered</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="about-image">
|
||
<img src="https://images.unsplash.com/photo-1617530861542-a07323746413?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600&auto=format&fit=crop" alt="Roastery Workshop" loading="lazy" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Testimonials -->
|
||
<section id="testimonials" class="testimonials">
|
||
<div class="container">
|
||
<div class="section-title animate-fade-up">
|
||
<h2>What Our Customers Say</h2>
|
||
<p>Real experiences from real customers who love their daily brew.</p>
|
||
</div>
|
||
<div class="testimonials-grid">
|
||
<article class="testimonial-card animate-fade-up">
|
||
<div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i></div>
|
||
<div class="quote">“The Ethiopian Yirgacheffe is absolutely stunning — it tastes like springtime on a rainy day. I’ve tried dozens of brands, and this is hands down my favorite.”</div>
|
||
<div class="author">
|
||
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Anna M." loading="lazy" />
|
||
<div>
|
||
<strong>Ana M.</strong>, Home Brewer
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="testimonial-card animate-fade-up">
|
||
<div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
|
||
<div class="quote">“I discovered Bean Haven during a weekend visit to Portland. The Guatemalan Antigua has become my go-to morning ritual. Their commitment to sustainability resonates deeply with me.”</div>
|
||
<div class="author">
|
||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="James R." loading="lazy" />
|
||
<div>
|
||
<strong>James R.</strong>, Cafe Owner
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<article class="testimonial-card animate-fade-up">
|
||
<div class="rating"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>
|
||
<div class="quote">“The Colombian Huila is rich, balanced, and complex — exactly what we wanted for our café’s seasonal rotation. Outstanding quality and packaging!”</div>
|
||
<div class="author">
|
||
<img src="https://randomuser.me/api/portraits/women/23.jpg" alt="Lena K." loading="lazy" />
|
||
<div>
|
||
<strong>Lena K.</strong>, Boutique Café
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Contact Section -->
|
||
<section id="contact" class="contact">
|
||
<div class="container">
|
||
<div class="section-title animate-fade-up">
|
||
<h2>Get In Touch</h2>
|
||
<p>Have questions about our products or want to learn more about our values? Reach out!</p>
|
||
</div>
|
||
<div class="contact-grid">
|
||
<div class="contact-info animate-fade-up">
|
||
<h2>Contact Info</h2>
|
||
<ul>
|
||
<li><i class="fas fa-map-marker-alt"></i> 123 Roast Lane, Portland, OR 97209</li>
|
||
<li><i class="fas fa-phone"></i> +1 (555) 222-ROAST</li>
|
||
<li><i class="fas fa-envelope"></i> hello@beanhaven.com</li>
|
||
<li><i class="fas fa-clock"></i> Mon–Sat: 7AM–7PM</li>
|
||
</ul>
|
||
<div class="social-icons">
|
||
<a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
|
||
<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
|
||
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
|
||
<a href="#" class="social-link"><i class="fab fa-tiktok"></i></a>
|
||
</div>
|
||
</div>
|
||
<form action="#" method="POST" class="contact-form animate-fade-up">
|
||
<div class="form-row">
|
||
<input type="text" placeholder="Your Name" required class="form-control" />
|
||
<input type="email" placeholder="Your Email" required class="form-control" />
|
||
</div>
|
||
<input type="tel" placeholder="Phone (optional)" class="form-control" />
|
||
<textarea rows="4" placeholder="How can we help?" required class="form-control"></textarea>
|
||
<button type="submit" class="form-btn">Send Message</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-col">
|
||
<div class="logo">
|
||
<i class="fas fa-coffee"></i>
|
||
<span>Beean</span>Haven
|
||
</div>
|
||
<p>Handcrafted single-origin coffees, expertly roasted with care.</p>
|
||
<div class="social-icons">
|
||
<a href="#" class="social-link"><i class="fab fa-facebook-f"></i></a>
|
||
<a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
|
||
<a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
|
||
<a href="#" class="social-link"><i class="fab fa-tiktok"></i></a>
|
||
</div>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h3>Quick Links</h3>
|
||
<ul>
|
||
<li><a href="#hero">Home</a></li>
|
||
<li><a href="#features">Features</a></li>
|
||
<li><a href="#brews">Products</a></li>
|
||
<li><a href="#about">About</a></li>
|
||
<li><a href="#testimonials">Reviews</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h3>Support</h3>
|
||
<ul>
|
||
<li><a href="#">Shipping Policy</a></li>
|
||
<li><a href="#">Returns</a></li>
|
||
<li><a href="#">FAQ</a></li>
|
||
<li><a href="#">Privacy</a></li>
|
||
<li><a href="#">Terms</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h3>Newsletter</h3>
|
||
<p>Stay updated on new releases, brewing tips, and exclusive offers.</p>
|
||
<form action="#">
|
||
<input type="email" placeholder="Email Address" class="form-control" style="margin-bottom: 8px;" />
|
||
<button type="submit" class="btn-outline">Subscribe</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="copyright">
|
||
© 2024 Bean Haven. All rights reserved.
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Back to Top Button -->
|
||
<button id="backToTop" aria-label="Back to top" style="display:none;">
|
||
<i class="fas fa-chevron-up"></i>
|
||
</button>
|
||
|
||
<!-- Scripts -->
|
||
<script>
|
||
// Smooth scroll
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
window.scrollTo({
|
||
top: target.offsetTop - 60,
|
||
behavior: 'smooth'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Mobile navigation toggle
|
||
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
|
||
const navLinks = document.getElementById('navLinks');
|
||
|
||
mobileMenuToggle.addEventListener('click', () => {
|
||
navLinks.classList.toggle('active');
|
||
});
|
||
|
||
// Close mobile menu when clicking links
|
||
document.querySelectorAll('.nav-links a').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
navLinks.classList.remove('active');
|
||
});
|
||
});
|
||
|
||
// Scroll progress bar
|
||
const progressBar = document.getElementById('progressBar');
|
||
window.addEventListener('scroll', () => {
|
||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||
const docHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight) - Math.max(document.body.clientHeight, document.documentElement.clientHeight);
|
||
const scrolledPercent = Math.min(Math.round((scrollTop / docHeight) * 100), 100);
|
||
progressBar.style.width = `${scrolledPercent}%`;
|
||
});
|
||
|
||
// Back to top button
|
||
const backToTop = document.getElementById('backToTop');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 300) {
|
||
backToTop.style.display = 'flex';
|
||
} else {
|
||
backToTop.style.display = 'none';
|
||
}
|
||
});
|
||
|
||
backToTop.addEventListener('click', () => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
|
||
// Sticky header
|
||
const header = document.getElementById('header');
|
||
window.addEventListener('scroll', () => {
|
||
if (window.scrollY > 100) {
|
||
header.style.boxShadow = '0 10px 30px rgba(0,0,0,0.15)';
|
||
} else {
|
||
header.style.boxShadow = '0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)';
|
||
}
|
||
});
|
||
|
||
// Animation on scroll
|
||
const observerOptions = {
|
||
rootMargin: '0px',
|
||
threshold: 0.1
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries, observer) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('animate-fade-up');
|
||
observer.unobserve(entry.target);
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
document.querySelectorAll('.animate-fade-up').forEach(el => observer.observe(el));
|
||
|
||
// Form submission demo
|
||
const form = document.querySelector('.contact-form');
|
||
form.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
alert('Thank you! Your message has been sent. We’ll respond within 24 hours.');
|
||
form.reset();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |