You are on page 1of 7

E-Commerce Platform

Desktop
Read More Popup
Tablet
Mobile with expanded
Mobile Hamburger Menu
Bg #008795 Arial Regular 32px, #ffffff

Arial Bold 14px, #ffffff Bg #eeeeee


Arial Regular 14px, #5e5e5e
Arial Regular 14px, #D3D3D3

Bg #333333
Arial Regular 28px, #333333
Stroke 1px, #d3d3d3, Radius 15px
Stroke 1px, #4a4a4a
Arial Regular 14px, #5e5e5e
Arial Regular 24px, #333333
Stroke 1px, #bebebe
Arial Regular 14px, #5e5e5e

Bg #568F90
Arial Bold 12px, #ffffff

Arial Regular 13px,


#008795

Arial Regular 13px, #ffffff


Functional Specs
• Create a responsive Tableless layout in Bootstrap with 3 breakpoints. Desktop, Tablet and
Mobile based on the designs shared.
• Desktop and iPad view must have a Left Navigation, Header Bar and Body content.
• When the Page is converted to the Mobile view the Left Navigation should be converted
to a Hamburger menu.
• The Hamburger menu should expand on click and all the Left Navigation menu items
should be visible.
• Tiles should stack one below the other based on the breakpoints.
• On click of Read More Button, create a Modal popup using Bootstrap. This should work
for all break points.
• Must be compatible across all latest devices and browsers.

Do not use any 3rd party plugins or libraries to implement this.

You might also like