☕ Moonlight Café

when we click on menu it show the iteam of menu.
A Homepage of Moonlight cafe website in which we provide faculty to know menu ,about us and contect us.

Inspiration

We wanted to capture the calm, comforting atmosphere of a late-night café — a space where creativity flows and stories are shared over coffee. Many hackathon projects focus on functionality; we wanted to highlight aesthetic design, simplicity, and the emotion a well-crafted interface can evoke.

What it does

Moonlight Café is a single-page fictional café website built entirely with HTML and CSS. It showcases clean structure, smooth hover animations, and responsive design. The page invites users to explore a warm, moonlit café menu and discover the brand’s story — all through design rather than code complexity.

How we built it

1.HTML5 for semantic page structure

2.CSS3 for layout, animations, and transitions

3.Google Fonts (Poppins) for typography

4.Unsplash & Pexels for high-quality, royalty-free imagery

5.Designed and tested locally, then deployed via GitHub Pages

Challenges we ran into

Achieving a balanced color palette that felt cozy yet modern

Ensuring image optimization and responsiveness for different screen sizes

Creating appealing hover and transition effects without using JavaScript

Keeping the codebase simple, clean, and readable for hackathon evaluation

Accomplishments that we're proud of

Crafted a visually consistent dark-theme design that feels elegant and immersive

Implemented smooth, CSS-only animations that enhance interactivity

Maintained a fully responsive layout across devices

Built a complete, aesthetic project using just HTML and CSS

What we learned

Crafted a visually consistent dark-theme design that feels elegant and immersive

Implemented smooth, CSS-only animations that enhance interactivity

Maintained a fully responsive layout across devices

Built a complete, aesthetic project using just HTML and CSS

What's next for ☕ Moonlight Café

Add CSS-based dark/light mode toggle for user customization

Include menu filtering and animations using minimal JavaScript

Expand into a multi-page experience (e.g., Blog, Gallery, Order page)

Continue refining design consistency and accessibility

Built With

Submitted to

Web Design Project-No Javascript

Created by

I was responsible for the overall concept, design, and implementation of the Moonlight Café website.
I created the project structure (index.html, style.css, and assets), designed the visual theme, and built all sections — hero banner, menu showcase, about, and contact — using pure HTML and CSS.

I focused on:

Crafting a clean, responsive layout suitable for any screen size

Designing a warm, moonlit aesthetic using balanced color palettes and typography

Implementing hover effects and smooth transitions for interactive elements

Writing clear, semantic, and well-commented code

Preparing all assets and documentation for GitHub Pages deployment and hackathon submission

Through this project, I combined front-end creativity with attention to design detail, producing a visually appealing experience that tells a story — entirely without JavaScript or frameworks.

Ravi TIwari

Updates

Ravi TIwari started this project — Oct 08, 2025 09:10 AM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.