Checkpoint 2 - Blog

Blog 3& 4

Home :

To left shows my header code  within the nav for the home page.

To the right I have the html code for my card box that holds my bartender picture and includes a title and content div.

When creating this page I came across a few problems such as making the bartender card above responsive to be able to scale with the dimensions of the device that is being used to view the site, also took me awhile to choose a color scheme and i am happy with what I have chosen.

Equipment :

Left is the code that i used to create my containers that hold my images of the ewuipment and their title + description, 6 divs using the same variable (equip1 - which i didn't understand why I would do it until this assessment.)

The code on the left shows my navigation bar with the working links to the other pages for my site, and above I have the header that I figured I'd change up, saying the name of the page your on to better track where in the site you are, since I was having trouble getting the bootstrap class active to work.

Left shows my code for the jump link i have created to jump back to the top of the page, putting the id="top" at the beggining of the opening body tag.

Cocktail/Variants :

I have put these two pages together because i will be using the same layout for each page because they will essentially be showing the same information the only difference being one of the pages is showing variations of the cocktails shown on classics.

Above i have the code that holds my image, title and cocktail recipe, having 8 of these divs to allow me to insert 2 cocktails for each spirit i have chosen, and having each spirit seperated by a 100% width header that has a background color and coloured text to match theme.

These being :

• Whiskey
• Vodka
• Gin
• Tequila
• Rum