Responsive Website and Use of Plug-Ins
Responsive Website: Training Paws
For this Project, my goal was to create a responsive dog training company website. This website would have a burger menu at certain viewport width, a video banner, three other plug-ins to show case content. The three plug-ins I chose were Lightbox, Carousell and Masonry.
I took reference from two websites, but for this project only one webpage was needed, so I gathered what copywrite would be needed for each site on to one single page. I really wanted bright colors to represent the outdoors and the fun in owning a pet, so I wanted to incorporate the color cyan into the style guide. I found a color palette on canva.com called lemon water. Lemon water has the colors: aqua, yellow, blue green, and gold. Aqua is a variation of cyan so it worked out great. For all the plug-ins I looked for their documentation so I could insert the external files needed for each plug-in. I chose to use jQuery to initiate all my plug-ins for simplicity.
I used masonry and lightbox to display images, and I used flickty for displaying prices. To use these plug-ins I followed the documentation, and place the images into the HTML file the same way it did. Then linked the external CSS and JS files downloaded from their website. All these plug-ins are initiated with jQuery, so I needed to link jQuery onto the HTML file as well.