{"id":24464863,"url":"https://github.com/filipe-2/the-coffee-shop","last_synced_at":"2025-03-14T11:40:54.384Z","repository":{"id":222000683,"uuid":"755964663","full_name":"filipe-2/the-coffee-shop","owner":"filipe-2","description":"A complete single-page website for a café called The Coffee Shop, created with HTML, CSS, and JavaScript.","archived":false,"fork":false,"pushed_at":"2024-04-10T22:44:03.000Z","size":61145,"stargazers_count":2,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-07T16:05:47.404Z","etag":null,"topics":["cafe","cafe-website","cafeteria","coffee","coffee-shop","coffeeshop","html-css-javascript","web","web-application","web-development","website"],"latest_commit_sha":null,"homepage":"https://filipe-2.github.io/the-coffee-shop/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/filipe-2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-11T15:50:19.000Z","updated_at":"2024-09-30T01:50:30.000Z","dependencies_parsed_at":"2024-04-10T22:50:01.433Z","dependency_job_id":null,"html_url":"https://github.com/filipe-2/the-coffee-shop","commit_stats":null,"previous_names":["filipe-2/thecoffeeshop","filipe-2/the-coffee-shop"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipe-2%2Fthe-coffee-shop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipe-2%2Fthe-coffee-shop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipe-2%2Fthe-coffee-shop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipe-2%2Fthe-coffee-shop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filipe-2","download_url":"https://codeload.github.com/filipe-2/the-coffee-shop/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243573163,"owners_count":20312879,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cafe","cafe-website","cafeteria","coffee","coffee-shop","coffeeshop","html-css-javascript","web","web-application","web-development","website"],"created_at":"2025-01-21T05:27:32.543Z","updated_at":"2025-03-14T11:40:54.364Z","avatar_url":"https://github.com/filipe-2.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"assets/imgs/logo.png\" height=\"128\"\u003e\n    \u003ch1 align=\"center\"\u003eThe Coffee Shop\u003c/h1\u003e\n\u003c/p\u003e\n\nWelcome 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.\n\n## Preview\n\n![Preview](assets/imgs/preview.png)\n\n## Features 🦿🦾\n\n### Header\n\n- Glass/transparent/blurry effect.\n- Button to hide/show the navnar.\n- Button to lock the current state of the navbar.\n  - Keeps it hidden if the user hides it.\n  - Keeps it visible if the user expands it.\n- Website branding with title and logo.\n  - Expanding and rotating effect of the title on hover.\n- Navigation anchors with a hover and active effect.\n  - The section the user is currently on highlights the corresponding anchor.\n- Login and cart buttons: user can authenticate and see what they're saving to buy later.\n- Hamburger menu: for smaller screens, navbar elements appear when user clicks the hamburger menu.\n\n\u003cimg src=\"assets/imgs/header-preview.png\" alt=\"header preview\"\u003e\n\n### Hero section\n\n- Fullscreen slider of drink images.\n  - Autoplay effect.\n  - Manual sliding buttons.\n  - Interactive slide indicators.\n  - Description of drinks with titles and ratings of clients.\n  - Button to see more info about the drink being shown.\n  - Button to open the drink on the app of The Coffee Shop (if installed).\n\n\u003cimg src=\"assets/imgs/hero-preview.png\" alt=\"hero preview\"\u003e\n\n### Menu section\n\n- Infinite carousels of cards with coffee drinks.\n  - Autoplay effect for each carousel.\n  - Button to skip one card (left and right).\n  - Button to skip three cards (left and right).\n  - \"Peeking\" effect: cards overflowing the edges are partially visible, indicating more content to the user.\n  - \"Grab\" functionality for both desktop and mobile.\n  - Search form between carousels with autocomplete functionality. Opens modal with drink info.\n  - Clicking on a carousel card opens a modal with info about the drink.\n\n\u003cimg src=\"assets/imgs/menu-preview.png\" alt=\"menu preview\"\u003e\n\n### Special section\n\n- Special drinks for users that acquired a plan.\n- Same layout used for the hero section.\n- Each slide has its own color scheme.\n  - Changing a slide changes the color scheme of the section.\n  - Sticky elements also change color scheme when on top of the section.\n\n\u003cimg src=\"assets/imgs/preview-special.png\" alt=\"special section preview\"\u003e\n\n### Plans section\n\n- Cards with plans that the user can acquire.\n  - Silver, gold, and diamond plans.\n  - Prices, benefits, and comparisons between each plan.\n  - Dropdown for payment customization (e.g., $X/month or $Y/year).\n  - Card animations.\n\n\u003cimg src=\"assets/imgs/plans-preview.png\" alt=\"plans section preview\"\u003e\n\n### Footer\n\n- Navigation anchors.\n- Links to social media.\n- Links to app on Google play and App store.\n- Copyright message of The Coffee Shop.\n\n\u003cimg src=\"assets/imgs/footer-preview.png\" alt=\"footer preview\"\u003e\n\n## How to access 🔗\n\nTo 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipe-2%2Fthe-coffee-shop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilipe-2%2Fthe-coffee-shop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipe-2%2Fthe-coffee-shop/lists"}