seanlin / web-exercise

30 mins exercise or test question for HTML/CSS/JS

Web Exercise

Please implement the lightbox shown in 'diagram.jpg' (below) with HTML/CSS/JS. You're welcome to use preprocessors for HTML or CSS and to use jQuery.

The page on which the lightbox is superimposed can be empty. Here are a few specific notes to help you along!

Instructions

• The page that the lightbox lives on should be 2000px tall. (Again, save some time and just make it 2000px of whitespace.)
• On page load, the lightbox should start with an outer width of 800px.
• It should always be vertically and horizontally centered in the viewport.
• The five boxes at the top of the lightbox are images.
• As the user scrolls down the page, the width of the lightbox should shrink such that just as the user reaches the bottom of the page, the lightbox is one-third the width it is when the user is scrolled all the way to the top of the page (by this point it'll be very tall and ugly). So you can think of the scrollbar as a width control for the lightbox.
• As the width of the lightbox shrinks, the images at the top of it should shrink proportionally.
• Don't worry about mobile devices for this.