sofiavazs / project-business-site

Business site done during the Technigo Bootcamp - responsive site with hero video, HTML form, JavaScript accordion and flexbox layout

Project Business Site 👔

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

MOLECULES 🧪

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.

Planning & The Problem 🧩

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.

Tech ⚡

• HTML5
• CSS3
• JavaScript

View it live 🔴

https://themolecules.netlify.app/