Problem Statement:

Create a webpage that resembles the following screenshot. It should be

showing the following structuring for various viewports and devices listed
below.

Expectations and Assumptions:

 The pages created by you should look similar to the screens attached
below.
 Please ignore the fonts for now and continue using the browser
defaults.
 The Image Hero Carousel is not required, should be just Hero Image.
It’s asset is attached below, for Avatar you can use your own profile
image.
 ‘Spread the word’ section is optional and not mandatory to be built
 Form submission will be actioned to current url
 All the links on the page can point to either “/” or “#”
or https://www.publicissapient.com/
 Time given for assignment is 2 hours.
 Follow all the best practices like SEO friendly page, it should be
accessible for disabled users as well and proper semantics tags should
be used wherever applicable.
 Please follow the mobile first approach for your CSS strategy.

Media Queries to be used are listed as follows:

 Mobile view --> 320px –767px

 Tablet View --> 768px –1024px
 Desktop View --> 1025px & above

We are also attaching the snapshot of how your screen should look in
the respective viewport for reference
 Mobile viewport
o
 Tablet Viewport
o
 Desktop Viewport
o
Hero Image