Goal
Update the home page to be more engaging. Add a randomly-chosen background image from the provided list of images to the home page.
Requirements
- Only WebP and highly optimised images are allowed.
- When the user's browser doesn't support WebP image format, show a default system background. See an appropriate background color CSS variable.
- Every image must have a credit sign at the bottom right corner of the image container. It must be implemented with a small but discernible text with a link to the author's page. The link must open in a new browser tab and contain both
noopener and noreferrer attributes.
- Consider different devices and orientations: portrait and landscape; mobile, tablet, and desktop.
- No layout shifts are allowed. The image must have its predefined UI slot to be rendered in.
- The image must be blurred and have a hardly discernible curtain above it to make the contents (texts, buttons, and so on) sharp and accessible for users with poor vision.
- The image's width must be limited by the standard website's max content width. See an appropriate CSS variable for this.
- Use the Device Pixel Ratio and choose the right image size for the user's device. You will be provided with x1, x2, and x3 images. Follow the reference for building the quality solution: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture.
- The image focus point must always be in the image's center.
- You will be provided with different images for different devices: portrait and landscape. See the image name to find the portrait, landscape, x1, x2, x3, and other image markers.
Images
images.zip
Goal
Update the home page to be more engaging. Add a randomly-chosen background image from the provided list of images to the home page.
Requirements
noopenerandnoreferrerattributes.Images
images.zip