https://github.com/filipe-2/the-coffee-shop

A complete single-page website for a café called The Coffee Shop, created with HTML, CSS, and JavaScript.
https://github.com/filipe-2/the-coffee-shop

cafe cafe-website cafeteria coffee coffee-shop coffeeshop html-css-javascript web web-application web-development website

Last synced: 6 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/filipe-2/the-coffee-shop
• Owner: filipe-2
• Created: 2024-02-11T15:50:19.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-04-10T22:44:03.000Z (10 months ago)
• Last Synced: 2025-01-13T00:59:07.547Z (14 days ago)
• Topics: cafe, cafe-website, cafeteria, coffee, coffee-shop, coffeeshop, html-css-javascript, web, web-application, web-development, website
• Language: CSS
• Homepage: https://filipe-2.github.io/the-coffee-shop/
• Size: 58.3 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


    

    
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](assets/imgs/preview.png)

## 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.



### 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).



### 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.



### 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.



### 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.



### Footer

- Navigation anchors.

- Links to social media.

- Links to app on Google play and App store.

- Copyright message of The Coffee Shop.



## How to access 🔗

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