Individual project, created a Business Site including a hero-image, a form with some input-elements and an accordion.
I planned to have a video as "hero-image" so I started to find a suitable video for the format, but it was hard to find. I changed my mind and choosed three different nice pink pictures to use as hero-image. I designed the whole page based on the colors from the different hero-images. The three different device formats have differents colors on the rest of the page, different box-shadows and different border-radius. In that way I really got to practice media queries.
The form went quite fast to create including text fields, password field, a set of radio buttons, a set of checkbox buttons and a submit button. The form is styled a little and the button has some hover-animation.
For me I put most time learning about JavaScript and how to use it for the FAQ where it is an accordion with questions and answers that you can toggle. It was the first time I used JavaScript so it was very tough to understand how everything are connected. It was easier to understand the design in CSS of the elements in the accordion. In the end I got quite satisfied with the accordion and I did also manage to add '+' and '-' signs to the left of the questions.
In the end I added some hovering effects and box- and text-shadows and I styled the text input fields a bit.
-
Use image or video in the header, for responsive webpages
-
How to use HTML forms and simple requests
-
How to modify the DOM using Javascript
- HTML5
- CSS
- JavaScript (modifying the DOM)
Link to the site: https://upbeat-clarke-78c9c1.netlify.app/