A modern, fully responsive cafe website showcasing artisan coffee, fresh pastries, and a cozy dining experience. Built with vanilla HTML, CSS, and JavaScript.

🌐 Live Demo: View Website


• 🎨 Modern & Elegant Design - Gold and brown color scheme with smooth animations
• 📱 Fully Responsive - Perfect on desktop, tablet, and mobile devices
• ☕ Interactive Menu - Filterable categories (Coffee, Specialty Drinks, Pastries, Cakes, Breakfast)
• 📅 Reservation System - Online table booking form with validation
• 📍 Contact Section - Location, hours, phone, and email information
• 🎭 Smooth Animations - Scroll effects and transitions
• 🍔 Mobile Navigation - Hamburger menu for small screens

• HTML5 - Semantic markup
• CSS3 - Modern styling with Flexbox & Grid
• JavaScript (ES6+) - Interactive functionality
• Font Awesome - Icons
• Google Fonts - Playfair Display & Poppins

crafts-cafe/
├── index.html          # Main HTML file
├── styles.css          # All CSS styles
├── script.js           # JavaScript functionality
├── Images/             # Image assets
│   └── Crafts.jpg      # About section image
└── README.md           # Documentation

1. Clone the repository

   git clone https://github.com/Natszie/crafts-cafe. git
   cd crafts-cafe

2. Open in browser

   • Simply double-click index.html, or
   • Use Live Server in VS Code
   • Or open with any modern web browser

That's it! No build process or dependencies needed.

• Full-screen landing page with background image
• Animated welcome message
• Call-to-action buttons (View Menu, Reserve Table)

• Restaurant story and mission
• Feature highlights (Premium Beans, Made with Love)
• Cafe image showcase

• Interactive filter buttons by category
• Complete menu with prices in Philippine Peso (₱)
• Popular and signature items highlighted
• Categories:
  • ☕ Coffee (Americano, Cappuccino, Latte, Espresso, Flat White, Cold Brew)
  • 🍹 Specialty Drinks (Caramel Macchiato, Spanish Latte, Mocha, Matcha)
  • 🥐 Pastries (Croissants, Ensaymada, Cinnamon Rolls, Muffins)
  • 🍰 Cakes & Desserts (Chocolate Fudge Cake, Ube Cheesecake, Mango Float)
  • 🍳 Breakfast (Breakfast Sandwich, Avocado Toast, Longsilog, Pancakes)

• Online table booking form
• Fields: Name, Email, Phone, Guests, Date, Time, Special Requests
• Real-time form validation
• Date picker with minimum date (today)
• Time slots from 7:00 AM to 6:00 PM
• Success confirmation message

• Location details (Guimba, Nueva Ecija)
• Phone numbers and email
• Opening hours
• Map placeholder (ready for Google Maps integration)
• Social media links (Facebook)

• Quick navigation links
• Contact summary
• Social media icons
• Copyright information

--primary-color: #d4af37;    /* Gold - Main accent */
--secondary-color:  #8b4513;  /* Brown - Secondary */
--accent-color: #ff6b6b;     /* Red - Highlights */
--dark-color: #1a1a1a;       /* Dark text/bg */
--light-color: #ffffff;      /* White text/bg */
--gray-color: #666;          /* Gray text */

• Desktop (1200px+): Full layout with all features
• Tablet (768px - 1199px): Adjusted grid layouts
• Mobile (<768px): Single column, hamburger menu

In index.html (Line 17-18):

<div class="logo">
    <i class="fas fa-coffee"></i>
    <span>Your Cafe Name</span>
</div>

Update in:

• Navigation logo
• Hero title (Line 44)
• Footer (Line 608)
• Page title (Line 6)

Add new menu item in index.html:

<div class="menu-item" data-category="coffee">
    <div class="menu-item-header">
        <h3>Your Drink Name</h3>
        <span class="price">₱XXX</span>
    </div>
    <p class="description">Delicious description here</p>
    <span class="badge">Popular</span> <!-- Optional -->
</div>

Available categories:

• coffee
• specialty
• pastries
• cakes
• breakfast

Badge options:

• <span class="badge">Popular</span> - Red badge
• <span class="badge chef-special">Signature</span> - Gold badge

In styles.css (Lines 2-14):

:root {
    --primary-color: #your-color;
    --secondary-color: #your-color;
    --accent-color: #your-color;
}

In index.html (Contact Section):

Location (Line 578):

<p>Your Address Here<br>City, Province</p>

Phone (Line 585):

<p>+63 XXX XXX XXXX<br>+63 XXX XXX XXXX</p>

Email (Line 592):

<p>hello@yourcafe.com<br>reservations@yourcafe.com</p>

Hours (Line 599):

<p>Mon - Fri: 7:00 AM - 9:00 PM<br>
   Sat - Sun: 8:00 AM - 10:00 PM</p>

Replace map placeholder (Line 613) with Google Maps embed:

1. Go to Google Maps
2. Find your location
3. Click "Share" → "Embed a map"
4. Copy the iframe code
5. Replace the .map-placeholder div:

<div class="contact-map">
    <iframe 
        src="https://www.google.com/maps/embed? YOUR_EMBED_CODE"
        width="100%" 
        height="450" 
        style="border:0; border-radius:  20px;" 
        allowfullscreen="" 
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>

In styles.css (Line 177):

.hero {
    background:  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
                url('Images/hero-background.jpg') center/cover;
}

Add a high-quality image (1920x1080px recommended) to your Images folder.

Crafts Cafe
Amera's Craft Cafe
Purok 2 Bantug Victoria Rd
Guimba, Nueva Ecija, Philippines

Contact:

• Phone: +63 (2) 8123 4567 | +63 912 345 6789
• Email: hello@craftscafe.ph
• Facebook: Crafts Cafe

Hours:

• Monday - Friday: 7:00 AM - 9:00 PM
• Saturday - Sunday: 8:00 AM - 10:00 PM

1. Push to GitHub

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/Natszie/crafts-cafe.git
   git push -u origin main

2. Enable GitHub Pages

   • Go to repository Settings
   • Click "Pages" in sidebar
   • Source: Deploy from branch
   • Branch: main, Folder: / (root)
   • Save and wait 1-2 minutes
   • Site live at: https://natszie.github.io/crafts-cafe/

1. Drag and drop project folder to Netlify Drop
2. Site deploys instantly!

npm i -g vercel
vercel

The form has frontend validation. To make it send actual emails:

1. Sign up at formspree.io
2. Create a new form
3. Update index.html (Line 517):

<form class="reservation-form" id="reservationForm" 
      action="https://formspree.io/f/YOUR_FORM_ID" 
      method="POST">

1. Sign up at emailjs.com
2. Add EmailJS SDK before </body>:

<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>

3. Configure EmailJS in script.js

Minimum Requirements:

• ES6 JavaScript support
• CSS Grid & Flexbox support
• Modern browser from 2018+

• Lightweight: No external frameworks (React, Vue, etc.)
• Fast Loading: Minimal CSS & JS
• Optimized: Font Awesome and Google Fonts from CDN
• No Build Process: Ready to deploy

• Online ordering system with shopping cart
• Customer reviews and ratings section
• Photo gallery with lightbox
• Menu search functionality
• Multi-language support (English/Filipino)
• Dark mode toggle
• Newsletter subscription
• Blog section for coffee tips
• Loyalty program integration
• Real-time table availability

• Form validation on frontend only
• Connect to backend for production use
• Sanitize user inputs before processing
• Use HTTPS in production
• Implement rate limiting for form submissions

This project is open source and available under the MIT License.

Free to use for:

• Personal projects ✅
• Commercial projects ✅
• Modification ✅
• Distribution ✅

Attribution appreciated but not required!

Nathaniel Arquiza
Junior Web Developer

• 🌐 Portfolio: natszie.github. io/portfolio
• 💼 GitHub: @Natszie
• 📧 Email: nathanielcarquiza@gmail.com
• 🔗 LinkedIn: Nathaniel Arquiza
• 📍 Location: Guimba, Nueva Ecija, Philippines

Available for:

• Freelance web development projects
• Website fixes and improvements
• Responsive design work
• Small to medium business websites

• Font Awesome - Icon library
• Google Fonts - Playfair Display & Poppins typography
• Unsplash - Hero section placeholder image
• Amera's Craft Cafe - Inspiration for this project

Found a bug or have a suggestion?

• Open an issue on GitHub
• Contact me via email
• Connect on LinkedIn

If you found this project helpful:

• ⭐ Star this repository on GitHub
• 🍴 Fork it for your own projects
• 📢 Share it with others
• 💬 Leave feedback or suggestions

Made with ❤️ for Crafts Cafe

Bringing the coffee shop experience online, one line of code at a time.

Last Updated: January 2026