Soffee is a fully responsive, front-end website designed for a premium coffee brand.
The project demonstrates strong fundamentals in HTML, CSS, and JavaScript, with emphasis on layout precision, responsiveness, and performance-aware UI design.
🔗 Live Demo: https://thekrishjain.github.io/Soffee
The goal of this project was to:
- Build a visually polished brand website using only core web technologies
- Implement layered UI elements that adapt correctly across screen sizes
- Create reusable and scalable front-end structure
- Practice performance and accessibility best practices
- Fully responsive layout (desktop, tablet, mobile)
- Layered hero section with controlled z-index positioning
- Product cards with modal popup interaction
- Image carousel inside product modal
- Clean navigation structure
- Optimized static assets for GitHub Pages hosting
- HTML5 – Semantic markup
- CSS3 – Flexbox, Grid, Media Queries
- JavaScript (Vanilla) – DOM manipulation, modal logic
- Git & GitHub – Version control and deployment
- GitHub Pages – Static hosting
soffee/ ├── index.html ├── products.html ├── journey.html ├── contact.html ├── products.css ├── js/ ├── images/ ├── videos/ └── README.md
- Handling layered elements consistently across breakpoints
- Maintaining correct positioning in responsive layouts
- Optimizing image loading and layout shifts
- Structuring CSS for scalability and readability
- Understanding GitHub Pages deployment workflow
- Explicit width and height for images to avoid layout shifts
- Mobile-first responsive design approach
- Semantic HTML for better accessibility and SEO
- Reduced render-blocking resources
- Clone the repository:
git clone https://github.com/krishjain/soffee.git
Author
Krish Jain Front-End Developer Focused on building clean, scalable web interfaces