Modify Webpage

HTML CSS JavaScript Given the web page as seen at [login to view URL] and the attached html, css, js files within "[login to view URL]", we need to make a number of changes to the area with a horizontal green background below the main photo/rotating banner. That green area is a carousel of images with associated pop-over text. It should have arrows at the left and right to allow navigation to other items, but those arrows aren't displaying consistently for some reason (I haven't integrated the carousel code correctly somehow). 1. We need to make it possible to link "click" events to actions (navigating to a different url). So each of the "slides" on the carousel will show a different pop-over with a "mouseover" event and then link to a different url with a "click" event. I guess the "mouseover" part won't work on mobile screens. That's OK, I think we can just do without the popover text on mobile screens. I've looked into this issue a little myself, and it appears that attaching handlers to "click" events isn't supported in the "[login to view URL]" code we're using for this carousel. So we need to either create a solution to that in the library code (see following links) or perhaps use a different carousel library. There actually already is a carousel of sorts in that rotating banner - maybe that code coule be reused. [login to view URL] [login to view URL] 2. We want to move the green bar to the bottom of the white background area it is within, just above the grey "Selections from our Blog" area. 3. We want to make the green/yellow/red "spiral" images larger, so the slides take up almost all of the vertical space of the green bar. 4. Please make the pop-over text into two lines, so that "Food Spiral®" is on it's own line. 5. We should make sure the left/right navigation arrows for this carousel appear consistently. Let's see if we can move them so they are not on top of the slides, but to the left or right of the whole slideshow area, so they are easier to find.