top of page
top5-cover.jpg

Top 5 Lunch Spots

Website Design & Development

Project Summary

This project showcases five of the places that I go to the most for lunch. The site includes a map of the locations, photos of the food and locations, descriptions and food recommendations. The site features parallax images and a responsive layout.

My Role

Designer, Developer

Tools Used

HTML, CSS, JavaScript, Bootstrap, Figma, Mapbox

Mockup

I used Figma to create a mockup for this project. After gathering the content for the page, I created the layout and added in the photos.

Live Site

After determining the design of the page and style of the map, I coded the site using Bootstrap HTML and CSS.

Features

Interactive Map
I included an interactive map in this project to show the locations of the restaurants mentioned. I used Mapbox to create and style this map. The locations of the restaurants were added to the map using JavaScript and GeoJSON. The buttons next to the map allow you to fly between each of the locations on the map.

​

Parallax Images
I used a parallax effect on some of the images in this site. To achieve this effect I used CSS to set the background attachment to fixed on the parallax images.

bottom of page