Café Bliss

Inspiration

The idea for Café Bliss came from my love for cozy cafés and the warm feeling a good cup of coffee can bring. I wanted to create a cute, interactive single-page website that reflects comfort, happiness, and aesthetic appeal, even without complex functionality.

What it does

Café Bliss is a single-page café website built with HTML and CSS only. Users can: Explore a cute, interactive menu with images and flip-card quotations. Read about the café and its cozy ambiance. Navigate easily with a smooth, attractive navigation bar. The site focuses on visual appeal, creativity, and usability rather than backend functionality.

How we built it

Used HTML5 for semantic structure. Used CSS3 for styling, animations, flip cards, hover effects, and responsive layout. Implemented Flexbox and CSS Grid for layout alignment. Added images and quotes for visual engagement. Optimized for desktop and mobile responsiveness.

Challenges we ran into

Making the flip-card menu responsive on smaller screens. Choosing the right color palette to match the cozy café theme. Positioning images and text in the About section without overpowering each other

Accomplishments that we're proud of

Fully functional interactive flip-card menu. Cozy, visually appealing design with flirty and sweet language. Smooth hover and transition effects that enhance user experience.

What we learned

How to create interactive designs using only HTML and CSS. Implementing flexible layouts for different screen sizes. Balancing visual aesthetics with usability.

What's next for Café Bliss

Add more animations like floating coffee beans or steam effects. Enhance accessibility and keyboard navigation. Optionally integrate JavaScript for dynamic menu filtering or ordering in future versions.

Built With

• css-grid
• css3
• flexbox
• hover
• html5
• images
• transition
• visual-studio
• vs