I have 6 simple templates that needs to be self-contained inside a DIV with a fix size of either 16x9 or 9x16 aspect ratio. Inside each of these templates contains frames with pre-defined aspect ratios that makes up the content of the main template container. In these frames are slideshows that renders images, videos, and iframes.
What you will be provided:
The task and expectation requirements.
• The aspect ratio of the template container shall be maintained and viewable for all screen resolutions/sizes, from the low resolution mobile devices to 4k.
• The template container shall be adjustable in width to 100%
• The aspect ratio of the frames shall be maintained when the width changes.
• Must be able to show that each template can be moved anywhere on the screen (i.e. left, top, right, bottom, top left, top right, center, off top right, etc.)
• Must be able to be displayed full screen regardless of the screen resolution.
• All slideshows or animations shall continue to remain visible and operate as designed.
• Create one or more unique bordering theme/style sample (i.e. shadow, picture frame effect, etc) for the frames for each of the templates to illustrate separation of the frames.
• Must be able to evenly space out frames.
• For only Template5 and Template6, create CSS that demonstrate with spacing and without spacing between frames.
• Only for Frame5 of Template5 and Template6, shall always have spacing between the (1:1) squares.
• Documentation and verbal explanation how to use the file to meet the requirements
• Testable based on the requirements.