Cosmic Bright Café

Where Coffee Meets the Cosmos

Comment

Inspiration

Cosmic Bright Café draws its inspiration from the vastness and wonder of space. The core idea was to create a digital space that feels like an escape, blending the mysterious, dreamy aesthetic of the cosmos with the familiar comfort of a café. The design is heavily influenced by celestial phenomena like floating planets, twinkling stars, nebulae, and auroras, using a custom colour palette of deep purples, blues, pinks, and vibrant greens (--cosmic-purple, --deep-space, --nebula-pink, --aurora-green).

What it does

  • Immersive Background: An animated, twinkling starfield and gently floating planet elements provide a continuous, dynamic cosmic atmosphere.
  • Navigation: A fixed, blurred-background header provides easy, smooth scrolling to the main sections (Home, About, Menu, Contact).
  • Hero Section: A captivating title with a shimmering gradient effect (Cosmic Bright Café).
  • About Section: Tells the café's story with a unique, pulsing "planet" image element.
  • Menu Section: Displays various themed food and drink items (like the "Comet Tail Latte" and "Lunar Eclipse Mocha") in a grid layout with corresponding space-themed emojis and hover effects.
  • Contact/Location: Provides details on how to find the café and its operating hours.
  • Responsive Design: The layout adjusts for smaller screens (like tablets and phones) by hiding the navigation links and changing the column structure in the about-content and menu-grid sections.

How we built it

  1. HTML (index.html): Provided the fundamental structure, semantic sections (<header>, <section>, <footer>), and all textual content. Placeholder div elements for the planets were placed at the top of the <body>.
  2. CSS (style.css): Handled all styling and visual effects.
    • Variables: Used a :root block to define a cosmic color palette (e.g., --cosmic-purple, --star-gold).
    • Background Animation: Used the ::before pseudo-element on the <body> with multiple radial-gradient backgrounds and the @keyframes twinkle rule to simulate a dynamic starfield.
    • Floating Elements: Styled the .planet elements and used the @keyframes float rule to make them move and rotate gently.
    • Layout: Utilized Flexbox (for the header/navigation) and CSS Grid (for the menu, about, and experience sections) for a modern, responsive layout.
    • Visual Flair: Applied subtle effects like backdrop-filter: blur(15px) for the fixed header, gradient text, and box-shadow for depth and glow.

Challenges we ran into

  • Layering and Z-Index: Ensuring the animated background, planets (which need to be behind the main content), fixed header, and hero content were correctly stacked required careful management of z-index.
  • Performance of Animations: Creating a smooth, non-distracting twinkling starfield and floating planet animation that performs well across devices required optimizing the CSS and using simple transform functions (like translateY) instead of complex calculations.
  • Gradient Text: Implementing the shimmering effect on the hero <h1> required setting a gradient background, then using the proprietary -webkit-background-clip: text and -webkit-text-fill-color: transparent properties, along with a separate shimmer animation on the filter property.

Accomplishments that we're proud of

  • Cohesive Aesthetic: Successfully translating the "cosmic" theme into a visually consistent and appealing design using a restricted, yet vibrant, colour palette.
  • Animated Background: The combination of the twinkling starfield and the floating planets creates a unique and subtle sense of depth and motion on the page.
  • Responsive Menu Grid: Using grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ensures the menu items automatically adjust their size and wrap gracefully on different screen sizes.

What we learned

  • Advanced CSS Backgrounds: Using multiple background images and radial-gradient for complex texture (the starfield).
  • CSS Keyframe Animations: Creating custom, complex animations (twinkle, float, gentleFloat, shimmer) to add atmosphere without relying on JavaScript.
  • Viewport Unit Usage: Utilising min-height: 100vh and height: 100vh in the <body> and .hero sections ensures the page takes up the full screen height, crucial for the immersive feel.

What's next for Cosmic Bright Café

  • Interactive Star Map: Adding JavaScript to create an interactive constellation or a parallax scrolling effect in the background for a deeper sense of movement.
  • Blog/Events Section: Creating a more robust page to showcase upcoming cosmic poetry readings or star-gazing events, as mentioned in the "About" section.

Built With

Share this project:

Updates