☕ Coffee & Delicious Bites
Experience the Perfect Coffee Journey
Discover our carefully selected premium coffee beans and artisanal pastries, crafted to perfection in a cozy atmosphere that feels like home.
Discover our carefully selected premium coffee beans and artisanal pastries, crafted to perfection in a cozy atmosphere that feels like home.
Preview our pages and access documentation
Explore our Comprehensive Coffee & Bites Platform
Explore our Comprehensive Modals
Explore our comprehensive Auth Modal
Explore our comprehensive other pages
Koffuu is a modern cafe website template featuring a beautiful UI and responsive design, perfect for coffee shops, bakeries, and cafes. Built with HTML5, CSS3, and JavaScript, it offers a delightful user experience across all devices.
Showcase your coffee and drink selection with beautiful cards
Easy-to-use cart and checkout system
Display your cafe's location and business hours
koffuu/
├── images/
├── css/
│ ├── style.css
│ ├── bootstrap
│ └── swiper-bundle.min.css
├── js/
│ ├── bootstrap.bundle.min.js
│ ├── gsap.min.js
│ ├── script.js
│ ├── scroll-trigger.min.js
│ └── swiper-bundle.min.js
├── scss/
│ ├── components/
│ ├── layout/
│ ├── plugin/
│ ├── _variables.scss
│ └── style.scss
├── cart.html
├── checkout.html
├── coming-soon.html
├── contactus.html
├── error.html
├── index.html
├── menu.html
├── payment.html
├── CHANGELOG.md
└── README.mdEdit scss/_variables.scss to update the
color scheme and theme variables.
Replace images in assets/images/ with
your own high-quality cafe photos.
Update menu.html to modify the menu
items, prices, and descriptions.
Edit contact details in contact.html and
update the map coordinates.
Edit text content directly in the respective HTML files for each page.
Modify SCSS files in scss/ for layout
and design changes.
| Version | Date | Changes |
|---|---|---|
| 1.0.0 | 2025-07-21 |
|
Here are the key libraries and their usage in this project:
| Library | Version | Usage |
|---|---|---|
Bootstrap 5 |
5.3.x | CSS framework for responsive layout and components |
Bootstrap Icons |
1.10.x | Icon library for Bootstrap |
Remix Icon |
3.5.x | Additional icon set used throughout the website |
Swiper |
10.x | Touch slider for image galleries and content sliders |
GSAP |
3.12.x | Animation library for smooth transitions and effects |
scss/ directory and compiled to
css/style.css
assets/ - Images and icons used
throughout the site
scss/ - Source SCSS files for
styling
js/ - JavaScript functionality
css/ - Compiled CSS files
index.html - Homepage with hero
section and featured items
menu.html - Menu page with all
drink items
cart.html - Shopping cart and
checkout
contact.html - Contact information
and form
scss/_variables.scss - Customize
colors, fonts, and other variables
_variables.scss and recompile the SCSS.
Edit scss/_variables.scss to customize colors:
// Theme Colors
$primary: #5f5af7;
$secondary: #6c757d;
$success: #198754;
$info: #0dcaf0;
$warning: #ffc107;
$danger: #dc3545;
$light: #f8f9fa;
$dark: #212529;Font settings in scss/_variables.scss:
// Font Families
$font-family-base: "Quicksand", sans-serif; // For body text
$font-family-code: "Playfair Display", serif; // For headings and special elements
// Font Sizes
$font-size-base: 1rem;
// Google Fonts import in HTML head:
We offer 6 months of support for any questions or issues you may encounter.
Discover the powerful technologies and tools that make our platform exceptional
Web Structure
Modern Styling
Responsive UI Framework
Smooth Animations
Mobile Friendly
Web Typography
Vector Graphics
Clean Aesthetics
Flexible Components
Optimized Structure
Clear Guides
Always Available