Skip to content

A complete single-page website for a café called The Coffee Shop, created with HTML, CSS, and JavaScript.

Notifications You must be signed in to change notification settings

filipe-2/the-coffee-shop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

The Coffee Shop

Welcome to The Coffee Shop project! This is an HTML/CSS/JS project for a coffee shop website. It includes a responsive and highly stylish layout, with tons of accessibility features, aiming to be accessible for both sighted and non-sighted users that use assistive technologies like screen readers.

Preview

Preview

Features 🦿🦾

Header

  • Glass/transparent/blurry effect.
  • Button to hide/show the navnar.
  • Button to lock the current state of the navbar.
    • Keeps it hidden if the user hides it.
    • Keeps it visible if the user expands it.
  • Website branding with title and logo.
    • Expanding and rotating effect of the title on hover.
  • Navigation anchors with a hover and active effect.
    • The section the user is currently on highlights the corresponding anchor.
  • Login and cart buttons: user can authenticate and see what they're saving to buy later.
  • Hamburger menu: for smaller screens, navbar elements appear when user clicks the hamburger menu.

header preview

Hero section

  • Fullscreen slider of drink images.
    • Autoplay effect.
    • Manual sliding buttons.
    • Interactive slide indicators.
    • Description of drinks with titles and ratings of clients.
    • Button to see more info about the drink being shown.
    • Button to open the drink on the app of The Coffee Shop (if installed).

hero preview

Menu section

  • Infinite carousels of cards with coffee drinks.
    • Autoplay effect for each carousel.
    • Button to skip one card (left and right).
    • Button to skip three cards (left and right).
    • "Peeking" effect: cards overflowing the edges are partially visible, indicating more content to the user.
    • "Grab" functionality for both desktop and mobile.
    • Search form between carousels with autocomplete functionality. Opens modal with drink info.
    • Clicking on a carousel card opens a modal with info about the drink.

menu preview

Special section

  • Special drinks for users that acquired a plan.
  • Same layout used for the hero section.
  • Each slide has its own color scheme.
    • Changing a slide changes the color scheme of the section.
    • Sticky elements also change color scheme when on top of the section.

special section preview

Plans section

  • Cards with plans that the user can acquire.
    • Silver, gold, and diamond plans.
    • Prices, benefits, and comparisons between each plan.
    • Dropdown for payment customization (e.g., $X/month or $Y/year).
    • Card animations.

plans section preview

Footer

  • Navigation anchors.
  • Links to social media.
  • Links to app on Google play and App store.
  • Copyright message of The Coffee Shop.

footer preview

How to access 🔗

To access The Coffee Shop, just click here or type filipe-2.github.io/the-coffee-shop on your browser and hit enter.