You are on page 1of 5

Complete the tasks mentioned below:

1.

Replicate the card section that is referred to in the image above.

Requirements:
● Use your creativity to add some animation/hover effects for the buttons.
● The icons(3D shapes) which are present in the top section, give them some
levitating animation or floating animation effect.
2. Image 1:

Image 2:

Replicate the above given images in a single section where when the user clicks on the
Individual tab, you will see the details of Image 1 & when the user clicks on the Family
tab you will see the details of Image 2. (Toggle functionality )

Optional:
You can add few transition animation or any fading effect when the user switches
between the tabs.
3. Image:

Try to replicate the above image, where in the right side you will have a modal with
heading, subheading and buttons.

Requirements:
● When the user scrolls down, the right side modal should change and a price
section to be added between the subheading and buttons.
● On scroll add some animation where the price section can fade in or slide in
transition or any other animation according to your interpretation.

Below given is a reference image of what the user should see on the right side when the
user scrolls down.
4. Image 1:

Replicate the above image or something similar to above image, on the click of “Take a
tour” button the below section should appear.

Image 2:
In Step 1, the user is able to select multiple OS options from the set of choices. When
the user clicks on Continue the below section should appear.

On the click of Previous button the user should go back to Step 1 which is Image 2.

You can view the live functionality of this application down below:

(This is only for reference purposes. PLEASE DON’T CREATE THE EXACT
REPLICA OF THE APPLICATION GIVEN IN THE LINK BELOW):

https://preview-cms.mcafee.com/consumer/en-in/landing-page/atp/mls-cp/test-lp.html
After clicking on the above link, please wait 7-10 seconds for the modal to popup.

YOU CAN CREATE ALL THE ABOVE TASKS IN A SINGLE PROJECT


(SECTION WISE) OR YOU CAN HAVE 4 DIFFERENT PROJECTS TO
CREATE 4 DIFFERENT TASKS, WHICHEVER IS SUITABLE FOR YOU.

You might also like