Cosmic Cafe

Inspiration

The idea for Cosmic Cafe came from a late-night look at the stars. The way stars and planets move made me think about how simple things like a hot latte can feel magical. As a web designer who loves fun online experiences, I drew from space movies like Interstellar and real photos from NASA's Hubble telescope. I wanted to make a cafe website that feels like an adventure, not just a menu. And I stuck to the hackathon rules—no JavaScript—to show that basic HTML and CSS can create wonder.

What it does

Cosmic Cafe is a simple one-page website for a made-up space cafe that sells fun treats like starry lattes and chocolate brownies. It has a twinkly star background, a spinning planet in the main section, and menu cards that grow and glow when you hover over them. You can scroll easily from a big welcome area with a "start exploring" button, to food pictures, a short story about the cafe, and ways to get in touch. It works great on phones or computers, making you feel like you're floating in space.

How we built it

I used clear HTML tags to build the bones: a top menu bar that stays put, a main welcome box, a grid for the menu items, and boxes for the story and contact info. All the looks are in one spot inside the HTML file, using a <style> tag. Cool CSS tricks I used:

• Moving animations for twinkling stars (@keyframes twinkle) and a circling planet (@keyframes orbit with turns and shifts).
• Color fades for a dark space sky (linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%)).
• Flexible boxes and grids to fit any screen size, plus rules like @media (max-width: 768px) to make the menu stack up on small phones. Free pictures from Unsplash made it look real without extra files, and easy fonts from Google ('Orbitron' for space vibes, 'Poppins' for easy reading) finished it off. No JavaScript, so I used simple hover tricks for fun clicks.

Challenges we ran into

Making things move without JavaScript was hard. At first, too many star layers slowed down phones. I fixed it with small SVG pictures inside the code for light stars, but getting the planet to circle smoothly (using shifts in the animation) took a long time to stop the wobbles. Making it fit phones was tough too—the planet looked weird until I placed it just right. And the blurry glass look on cards didn't work on all browsers, so I added a backup color. It was a lot of tweaks!

Accomplishments that we're proud of

The glowing title in the welcome area, with soft light changes in the animation, feels like magic. The menu switches from three side-by-side boxes to one tall list on phones without any mess. Best of all, the whole site is tiny—under 10KB—so it loads super fast. It also gets good scores for being easy to use (clear tags, picture labels) and quick. It's beautiful and works well, like a short space poem.

What we learned

This showed me how strong CSS can be—animations and moves can act like fancy tools without extra stuff. I now start with phone sizes first to save time later, and small pictures inside code make pages faster. Big picture: limits like no JavaScript push you to think smart, and simple designs often make people happiest.

What's next for Cosmic Cafe

Grow it into more pages using smooth scrolls or link jumps, all with CSS. Add a pretend order box with check marks for fun add-ons. Pull in real food lists from the back end (no front-end code), or make color themes like moon or Mars nights. In the end, use it for a real event—a pop-up cafe where people sip under the stars!

Built With

• css3
• html5