_bar is a cocktail bar`s website. This bar is located in Sweden, Lagan and it is for the people who would like to go out with their friends and have a nice time in a beautiful location and with a great cocktail. The drinks are delicious, and made with fresh produce by skilled bartenders.

https://emese92.github.io/_bar-project/

• First-time visitors has a clear and understandable layout, with big, responsive, colored logo on the top left corner and a navigation bar on the top right on every page.
• The visitors are greeted with a welcome message and a clear purpose of the website.
• The inviting button on the main page is clear and easy to find for first-time users to reserve a table, but the same feature is also located on the navigation bar.
• Information about opening times, location, and contact details can be easily found on the footer of every page.
• The menu is inviting with colorful pictures, including the name and the ingredients of the drinks.

• Social media buttons are located on the footer of every page. Links to Instagram, Facebook, and Twitter. The links will open up in a new tab.
• Easy and quick booking possibility.
• Easy to find opening times, location, and contact information.

• Promote the bar
• Increase bookings
• Encourage people to share their experience

• The main colors used on the website are gray and orange.

• Didact Gothic and Roboto Condensed were used on the website with Sans Serif as the fallback font.

• A large, background hero image is used on the home page to keep the site clean and modern. It has a translucent cover to make the text more readable.
• The cocktail list has a colorful gallery with the cocktail names and ingredients.

• Featured in all three pages: Home, Cocktail Menu, and Reservation.
• This section will allow the user to easily navigate from page to page without using the ‘back’ button.

• The landing image on the home page.
• It also has an inviting text with a responsive button that takes you to the reservation section.

• Featured in all three pages: Home, Reservation, and Cocktail Menu.
• The footer section includes links to the relevant social media sites. Links are opening in a new tab.
• The footer is valuable to the user and allows them to see other people`s feedbacks and encourages them to do the same.
• Details:
  • Contains description about opening times, contact information, and address.

• The menu allows you to see what kind of drinks _bar is offering. It features the ingredients and pictures of the cocktails, so the user can easily decide if it is the right place for them.

• This will allow the user to book a table in _bar.
• It asks for: name, phone number, party size, date, and time.
• Filling up the reservation form will open a new page with a thank you message on it.

• The website was tested for different screen sizes and adjusted as needed.
• It was tested on Google Chrome, Microsoft Edge, and Internet Explorer.
• Some features do not work on Internet Explorer.

• CSS: No errors were found when passing through the official Jigsaw validator
• HTML: No errors were returned when passing through the official W3C validator

• On the form when choosing a date it is possible to pick past dates. This requires JavaScript to fix.
• Some features do not work on Internet Explorer.

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Master Branch
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here: https://emese92.github.io/_bar-project/

• The icons were taken from Font Awesome.
• CSS and HTML codes on multiple occasions were inspired by or copied from W3School and Love Running project.
• The photos used on the home and reservation page are from Pexels and the pictures for the cocktail menu are from Unsplash.
• The website for responsiveness photo is from Am I Responsive.
• Box shadows were taken from CSS Scan.
• Thank you for my mentor to reviewing and helping with design and code.

• CSS3
• HTML5

• Font Awesome
• Google Fonts: Didact Gothic and Roboto Condensed
• No Framework was used for this project.
• CSS Formatter was used to clean up the code.
• Gitpod
• Paint