📋 Project Description#
Ban Ban is a complete website developed for a local bakery in El Salvador. The project demonstrates skills in responsive web design and frontend development.
🛠️ Technologies Used#
- HTML5
- CSS3
- Bootstrap 5
- Font Awesome Icons
- JavaScript
✨ Main Features#
- Product Catalog: Visual presentation of cakes and desserts
- Responsive Design: Adaptable to all devices
- Intuitive Navigation: Clear and accessible menu
- Social Integration: Links to Facebook and Instagram
- Image Gallery: Visual showcase of products
📂 Project Structure#
BanBan/
├── index.html
├── productos.html
├── nosotros.html
├── estilo.css
└── Imágenes/
├── pastel.jpg
├── tartaleta.jpg
└── ...
🎯 Key Learnings#
- Bootstrap implementation for responsive design
- Image optimization for web
- Semantic HTML structure
- Integration of external icons and fonts
🎨 Design Highlights#
Visual Identity#
The site uses a warm color palette that reflects the artisanal nature of the bakery:
- Primary colors: Warm browns and golds
- Typography: Elegant and readable fonts
- Images: High-quality product photography
User Experience#
- Mobile-first approach: Optimized for mobile devices
- Fast loading: Optimized images and code
- Clear navigation: Intuitive menu structure
- Call-to-action: Direct contact information
📱 Responsive Features#
The website adapts perfectly to different screen sizes:
- Desktop: Full layout with sidebar navigation
- Tablet: Adapted layout with collapsible menu
- Mobile: Streamlined experience with hamburger menu
🚀 Future Enhancements#
- Online ordering system
- Customer review section
- Blog with baking tips
- Newsletter subscription
- Multi-language support
This project showcases my ability to create attractive and functional websites that help local businesses establish their online presence.
🔍 Source Code#
The complete project is available in the source code folder. It includes:
- index.html: Main page with responsive navigation
- productos.html: Bakery product catalog
- nosotros.html: Company information
- estilo.css: Custom styles and visual theme
- Imágenes/: Product gallery and graphic resources
