This week's project was to create a site for a company of our choice (an existing one or fantasy). The main requirements were to have"
- "Hero" image/video
- Signup form with: 2 x Text fields, 1 x A password field, 1 x Set of radio buttons, 1 x Set of checkboxes,1 x Submit button (submit it to httpbin)
- Accordion element
I decided to build MOLECULES, a business that allows you to make your own fragrance, built with all sorts of molecules! The theme of the site was based in my passion for perfume and I wanted the design to be quite ethereal but strong at the same time, like most perfumes I like.
I applied a lot of knowledge I acquired in last week's project. I used flexbox to structure the layout the page and mobile first approach for responsiveness and decided to have a subtle signup form for mobile and tablet and then a different styled form for the desktop version.
Initially I was going to have a hero image but then switched to a video because I wanted to have the challenge of making it responsive across devices, so my approach was to have 3 different videos with different sizes: desktop, tablet and mobile, so depending on the device, the appropriate video will load and be shown.
I had quite a bit of trouble with the accordion element, as I couldn't fully understand the Javascript code yet. But a codepen exercise, the lecture and quite a bit of google search did help and I managed to make it work in the end and add some animation + different alternated background colours.
- HTML5
- CSS3
- JavaScript