Menu

Using Html Css Js Create Webpage Named Gallery 1 Responsive Image Grid Display Images Webp Q43907833

Using HTML CSS JS Create a webpage named “Gallery” that is:

1) It is a responsive image grid. It will display all the imageson the webpage all together at the very start originally loads up.The grid will be responsive so based on the window of the devicethe number of columns will change for example on a 14-inch laptopit will have a grid of 2 columns full of images. On a 20 inchmonitor, the grid will be 3 columns, on a phone, the grid will be 1column and so on.

2)When a user scrolls through the images and clicks on one imageit will expand into a lightbox mode. Now the user can click on thenext and previous buttons to see all images. If they press the “x”button on the top right, the expanded version will clear and thegrid view of all images will return.

3) In the grid view, the images can be any size and shape (as init doesn’t have to be a perfect dimensional grid) but if you canmake a perfect dimensional grid by displaying parts of the originalimage and then when it is clicked display the entire image that isfine too. I will attach two photos to this question, first one willshow the grid view of images and the second one will show theexpanded version when you click on an image with the buttons: next,previous, x. You only see two images in this grid view because mylaptop is 14inch. In image 2 the buttons will act as next andprevious and x will return to the grid view of image 1.

4)Have a hover effect on the images when it’s on the grid view.The page can include between 30-50 images but this answer doesn’tneed to have all those images as long as it is clear to follow andmodifiable 5)Please include all the necessary files and comments onthe code to understand and follow along. If bootstrap or any otherlibraries are used please make it clear on how to correctly use it.if you use any outside library PLEASE make it clear.

5th) I KNOW THERE ARE OTHER QUESTIONS LIKE THIS (2) I ASKEDTHOSE QUESTIONS, ONE PERSON ANSWERED BOTH BUT IT DOES NOT WORKPROPERLY SO IF YOUR THAT PERSON PLEASE DO NOT COPY AND PASTE THEANSWER AGAIN.

If anything is unclear about the question please let me knowthank you!

image 1

tps://instagram.com/mercodegennaraphotos Type here to search o a 9 M N W 10:54 PM 1/18/2020 23

image 2

tps://instagram.com/mercodegennaraphotos Type here to search ‘o a 9 M N W 10:54 PM 1/18/2020 23 We were unable to transcribe this imageShow transcribed image text tps://instagram.com/mercodegennaraphotos Type here to search ‘o a 9 M N W 10:54 PM 1/18/2020 23

Expert Answer


Answer to Using HTML CSS JS Create a webpage named “Gallery” that is: 1) It is a responsive image grid. It will display all th…

OR