Vida Redesigned Website

Vida Redesigned Website
I want to create a website based on an existing brand. I decided to choose Vida because I thought it would be fun to play with the different colours and various carousel layout from the flavours available. 

Video Demo (Main Features)

Video Demo Final Website

(Home page is video based on scroll, the scroll bar is hidden)

Web Link: vida-redesigned.netlify.app

(Product page altered to be responsive across laptop screens)

Additional Information

I've completed only the home and product page.

The first page is a scroll based video playing in the background. The navigation bar has an animated moving line that moves based on where the mouse is hovering. The text and products fades into the screen upon loading.

Next, there is the about page which includes a slogan, product name information and some benefits of the drink. There is a gradient which fades to black to match the products page. 

The third page is inspired by vending machines. So the cans move down as the page scrolls, and pop up against the background after reaching the bottom of the box. When the mouse hovers on the box, the product's box expands showing the name and description. Though I didn't account for the responsiveness on each screen thus the animation that works on my screen might not work on others. 

The fourth screen is a contact us page. There is a form to fill in your details on the left, while on the right there is information about the company along with the company's location at the bottom. 

Lastly, there is a footer with the company's social, page links and media credits.

I used Dreamweaver as my software with a combination of HTML, CSS and JavaScript to create the website.