As a quick test we would like you to create a small web page using the attached design (page-mockup.jpg) along with some basic dynamic functionality using Vue.js and Vite for tooling.
We have only provided a desktop version so feel free to make any changes you see fit for a responsive layout. Feel free to elaborate on the design and add any animations etc however this isn't at all required.
- Hero section should fill screen on load
- Hero background image should have fixed position when scrolled
- Text in the hero should give the days and hours left until 21 September 2022
- Page should respond gracefully on mobile
- It should conform to style guide included in the jpg file
- Assets should be optimised
- Body section should include functionality so the user can input their age and click calculate to get the number of summer months they have lived through (based on 3 summer months per year) and update the text on screen to show the result.
- Show me the weather at the Bolser office location using a weather api call when clicked to then update the DOM with the response