This project is a responsive landing page for a coffee shop, built using pure HTML and CSS. The design is clean, modern, and adaptable to mobile, tablet, and desktop screens.
- Responsive layout using media queries for different screen sizes.
- Clean and user-focused design.
- Clear navigation with icons (via Font Awesome).
- Hero banner with background image and call-to-action.
- Product categories with background images.
- Visual gallery section.
- Contact section with a functional (frontend-only) form.
- Embedded map.
- Product section with hover effects.
coffee-shop/ ├── index.html ├── styles.css ├── assets/ │ ├── banner.jpg │ ├── moca-category.jpg │ ├── capuchino-category.jpg │ ├── expreso-category.jpg │ └── other resources...
- HTML5
- CSS3
- Font Awesome (for icons)
You can open the index.html file in your browser to view the project. Make sure the image files are placed in the /assets folder.
- Clone or download this repository.
- Open the
index.htmlfile in your browser. - Customize the images inside the
assetsfolder if you want to change the banner, logo, or product pictures.
The project includes media queries to adapt the layout to:
- Desktop (>1024px)
- Tablet (768px - 1024px)
- Mobile (<768px and <480px)
Feel free to reach out if you'd like to collaborate or improve this project.
Developed by Andrés Severino Isaza