This is a simple website bulit using HTML & CSS.

Rum Wars is a site that is bulit for history nerds, people who like finding out new facts about everyday ordinary things (i.e. people who are drawn towards weird and usual stories.), & finally drink connoisseurs. After learning about the history of rum there will be a drinks section, with a list of popular rum drinks.

• Navigation Bar

  • Across the whole website there is a fully responsive navigation bar that includes a Logo, a home button, type section, and a drinks section. It is fixed to the top and and is identical across the whole site to allow for easy intuitive navigation.
  • This allows users to easily navigate throughout the site across all devices without frustration

• Landing Page Image

  • the landing page includes photograph with a responsive text overlay to engage and draw in the user.

• _History Page

  • The history section will explain different aspects of rum's history. With a strong eye catching title.
  • This section will be interesting and engaging, hopefully encouraging the user to continue reading, sharing the information and checking out the drinks page.

• Types Page

  • The types page has a strong hero image with responsive text overlay like the landing page.
  • This section provides the users with hey description different styles of rums, their origins, production and heritage.

• Drinks Page

  • This section will provide users with a list of mixed drinks and cocktails containing rum.
  • The user will be given a recipe, along with a list of ingredients and steps on how to prepare the drink.

• Footer

  • The footer section includes links to the relevant social media sites. The links will open in a new tab to allow easy navigation for the user.
  • The footer is valuable to the user as it encourages them to keep connected via social media.
  • The footer will also include a "subscribe to our newsletter" box in which they will add their email.

• Newsletter Sign Up

  • This section located in the footer of the website will allow users to sign up to a newsletter where they will be kept up to date with events and each month receive and new cocktail recipe. The user is required to enter their e-mail address.

• The website has been tested on a myriad of browsers including Google Chrome, edge, safari on a Mac book, brave, Mozilla Firefox.
• the website has been tested on multiple devices desktop, laptop, IPhone 12.
• extensive testing was done cross these devices to ensure websites worked and responded as desired.
• family members were asked to look over the web sites to see if any errors cropped up or user issues.

• HTML

  • No errors were found when running the code through the official W3C validator.

• CSS

  • No errors were found when running the code through the official jigsaw.W3C validator.

• Accessibility

  • I have confirmed that the colors and fonts chosen for the website are easy to read and accessible by running lighthouse in devtools.

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab
  • From from the left side menu navigate to the pages tab, find the source section click the dropdown menu with none then select main branch.
  • Once the main branch has been selected click the save button, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here https://yokai-san.github.io/Rum-Wars/index.html

• Code

  • The code that makes the social media links was taken from the CI Love Running project.
  • The code that makes the navigation bar was taken from the CI Love Running project.
  • The code for the text overlay on top of the hero images was taken from W3Schools How TO - Cutout Text tutorial.

• Content

  • The text for the history page was writen from Blindboy Podcast Sugar Push
  • The text for the types of room page was taken from LUXURY COLUMNIST
  • The text and image for the recipe on the drinks page is from garnish with lemon
  • The icons in the footer were taken from Font Awesome

• Media

  • the photo used on the history page is from civil beat
  • the images on the types page are from 31 whiskey
  • the hero image on the types page is from Getty Images
  • the hero image on the drinks page is from boat international