Culmination of the Web Design for Everyone course on Coursera by Colleen Van Lent. This project will create a website with at least three separate webpages. It will also be using responsive design so that there will be mobile, tablet and large screen views.
This website is an accessible, three-page photo gallery showcasing travel destinations in North America. The home page features an interactive image preview, the United States page presents national parks in a carousel, and the Canada page provides an interactive lightbox gallery.
A breakdown of the pages:
- Home (index.html) — Displays six destinations: New York City, New Orleans, Vancouver, Quebec City, the Grand Canyon, and Yosemite. Hovering over or focusing on a thumbnail displays it in a larger preview area.
- United States (location-1.html) — Features a Bootstrap carousel with six national parks: Yosemite, Glacier, Yellowstone, Grand Canyon, Zion, and Grand Teton.
- Canada (location-2.html) — Features six destinations: Banff, Jasper, Niagara Falls, Gros Morne, Whistler, and Cape Breton Highlands. Selecting a thumbnail opens a larger view in a lightbox, with Previous and Next controls.
The implemented features of the website are: -Shared navigation links between the three pages. -A “Skip to main content” link on every page. -Keyboard-focusable gallery controls. -Alternative text for gallery images. -Home-page hover and focus image preview. -Bootstrap carousel with slide indicators and previous/next controls on the U.S. page. -Bootstrap modal lightbox with image captions and previous/next controls on the Canada page. -Dark Mode toggle on each page. -Responsive viewport settings and Bootstrap layout classes on the U.S. and Canada pages.
The website can be found at: https://dani-eng.github.io/WD4E_CapstoneProject/