• 

  A cozy corner for every coffee lover

• 

  “Rich & Creamy Cappuccino – A perfect start to your day

• 

  Buttery Croissant – Fresh from the oven

• 

  A perfect blend of bold coffee and creamy vanilla

• 

  Warm mornings start with a perfect Latte

• 

  "Good coffee. Great vibes. Always", “Sip. Relax. Repeat.”

                                                   **The Cozy Bean Cafe **

Inspiration

The project was inspired by the hackathon's "No Javascript" rule. Our goal was to create a modern, high-quality cafe homepage that proves pure HTML and CSS are powerful enough to achieve professional, cozy, and interactive web design.

What it does

It is a single-page website for a fictional cafe. It features a fixed, navigable header with smooth anchor links, distinct content sections (About, Menu, Gallery and Contact), and fully responsive layouts that adapt beautifully across all screen sizes.

How we built it

We used Semantic HTML5 for a clean structure and modern CSS Grid and Flexbox for modular layouts (e.g., the Menu and Gallery sections). The fixed navigation bar and all interactions (hover effects, animations) are handled entirely with CSS, demonstrating robust fundamental skills.

Challenges we ran into

The main difficulty was simulating interactivity without JavaScript. This involved carefully crafting CSS-only effects, such as the subtle animated sparkles on the hero headline and the custom transform functions used to give the menu cards a satisfying "pop" on hover.

Accomplishments that we're proud of

We are proud of the cohesive visual identity and achieving full responsiveness using only CSS Media Queries. The smooth navigation transition and the elegant, custom hover underline effect (using ::after pseudo-elements) also stand out as key technical achievements.

What we learned

We gained a deeper appreciation for the advanced capabilities of pure CSS for layout and design, particularly mastering how Grid and Flexbox work together to create maintainable and adaptive layouts for a modern web experience.

What's next for The Cozy Bean Cafe

Future steps would involve integrating a backend for a functional contact form and incorporating JavaScript purely for enhanced UI elements like a gallery lightbox or slideshow, but only after establishing this strong CSS/HTML foundation.

Built With

• css3
• html5