This is a simple website for a coffee shop that displays a menu of hot coffee drinks, allows users to search for specific drinks, and provides a feedback form for customers. The website is built using HTML, CSS, and JavaScript, and it utilizes the Bootstrap framework for styling and responsiveness.
- Home Section: A welcome message and a background image showcasing the coffee shop.
- Menu Section: A list of hot coffee drinks fetched from an API, displayed in collapsible cards with details such as description, ingredients, and an "Order Now!" button.
- Search Section: A search bar that allows users to find specific coffee drinks by name.
- Feedback Section: A form for customers to submit their name, email, and feedback.
- Footer: Contact information, social media links, and credits.
- HTML
- CSS
- JavaScript
- Bootstrap
- Font Awesome (for icons)
- Google Fonts
- Clone the repository or download the source code files.
- Open the
index.htmlfile in your preferred web browser.
- Upon opening the website, you'll be greeted with the home section and a navigation menu.
- Scroll down to the menu section to view the list of hot coffee drinks fetched from the API.
- Click on the drink name button to expand the card and see more details, including a description, ingredients, and an "Order Now!" button.
- In the search section, enter the name of a coffee drink in the search bar and click "Search" to find the corresponding drink.
- In the feedback section, fill out the form with your name, email, and feedback, and click "Submit" to send your feedback.
- In the footer, you'll find contact information, social media links, and credits.
This project relies on the following external dependencies:
- Bootstrap (v5.3.3)
- Animate.css (v4.1.1)
- Font Awesome (v6.0.0)
- Google Fonts (Crimson Text, Poppins, Roboto)
The website is hosted using the vercel app. Click here for the demo.
This project is licensed under the MIT License.
This website was created by [Tracy K]. The coffee drink data is fetched from the Sample APIs API.