Here are the requirements for the microsite you’re

going to develop:
• To use vanilla JavaScript, ECMAScript, OR TypeScript with one of any modern
JavaScript frameworks/libraries (and its plugins) that runs on Node.js environment is
a must.
• To be fluid responsive, full screen layout, and without scrollbar.
• All animations (including the button and link’s hover state) should be smooth and not
overdone.
• The slide transition should fade-out and fade-in (upon clicking the navigation and on
mouse-scrolling the page as well).
• All the content of the page (the text, video, and images) must be API-consumed from
JSON data (either it’s inside the code or as an external file).
• Please propose any kind of solutions to make microsite look great in terms of
performance, accessibility, SEO, and best practices (to achieve great scores in
Lighthouse and Google’s PageSpeed Insights).
• Share your source code with us after you have done the development.

Convertium Pte Ltd 1

 Slide #1
LOGO
A full-screen HTML5 video (set to
be looping & mute) as background
with semi-transparent white
background overlay.
The video URL is already provided
in data.json file
(http://www.w3schools.com/html/
mov_bbb.mp4).
LOREM IPSUM DOLOR The text & slide indicators on the
right side should be horizontally &
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. vertically center-aligned (using of
Quisque volutpat mattis eros. flexbox layout is recommended).
The text should be animated.
The slide indicators on the right
side should be treated as slide
navigation.
The arrow at the bottom should be
linked to 2nd slide (the 1st slide
fade-out, the 2nd slide fade-in).

Convertium Pte Ltd 2

 Slide #2
LOGO DISCOVER MORE

You can download the set of

images here:
https://drive.google.com/drive/fo
DONEC NEC JUSTO lders/1xFtP5rLA_DNMfx9kWWm
MrGVHQf8LAGsL
For large & medium screen:
Lorem ipsum #1 Lorem ipsum #2 Lorem ipsum #3 • Please use: img-1920x1200.jpg
& img-1280x800.jpg
Donec nec justo eget Aenean dignissim Eros pede semper • The image should be in perfect
felis facilisis pellentesque felis est, vitae luctus full screen.
fermentum. Aliquam sed egestas, ante et metus libero eu
For medium screen, portrait
porttitor mauris sit vulputate volutpat. augue. mode:
amet orci. • Please use: img-800x368.jpg
For small screen:
• Please use: img-800x368.jpg
“DISCOVER MORE” link should be
only appeared on 2nd slide.
There is a responsive carousel
with 5 items as well.

Convertium Pte Ltd 3