Variant Cocktails

Blog 7, 8 & 9 7.  Image and media plugins:  This code is similar to all of my img codes i tried to reuse alot of my code, to find more efficient ways.   This code is for my parallax img and is the same on all the pages excluding the img url. 8. Below I have screenshotted the code that i have used for the boxes that include the cocktail images and text, which includes my unordered lists for the ingredients and p tags for instruction and other text. 9. Below i have included a screenshot of the variable i created to quickly add the colors that i want to text and one for header/footer color. And finally I took a video of the website while it was live using github.

Blog 5 & 6 The link for my hosted site is as follows: https://noelw19.github.io/Project-Assessment-3/ Below I have included some screenshots of the site so far: Classics Page: Equipment Page: Home Page: Variants Page: Some of the problems I faced when initially hosting my site was that my HTML and CSS files weren't  being read after reading a little bit I found that root files needs to be index.html and styles.css for them to be recognised, other issues I had included images not showing up, because of this  I had to tinker with the file links within visual studio code but I found that copying the relative path and pasting is much easier than scanning for errors. I also found that putting "/" before hrefs for nav elements helps. The biggest issue I had with problem solving while live was the waiting after I had pushed the work for it to show and not knowing if its still loading or if that fix did not work.

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 ...

 Blog 1  & 2 Home Page: All the pages will include a footer that has contact info. All Nav bars are fixed. NAV(Right): the nav itself will span 100%width will include the header and hyperlinks to other pages. Parallax(Left): will be an image of a spirit shelf at a bar.  History: Brief history of cocktails.    Equipment Page: NAV: the nav itself will span 100%width will include the header and hyperlinks to other pages. Parallax: will be an image of bartender equipment. Equip 1: are the divs that will be holding the images of individual equipment and their description.   Classics Page (Will be the same as the Variants page only difference will be that the cocktails are variations of the classic)  NAV: the nav itself will span 100%width will include the header and hyperlinks to other pages. Parallax: will be an image of Cocktails. Cocktails/Variants: will include a picture of a cocktail made with specific ...

I will be using this blog to document the creation of my website variant cocktails. It Will be a place to visit to learn some history of cocktails, learn about the equipment that is used by professionals and get some recipes to get you started mixing your own goodies that will impress your friends. It will have 4 pages, the home page, basics page, variants page and the equipment page.