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 reccomendations. The site features parallax images and a responsive layout.

View live site

My Role

Tools Used

screenshot of mockup in figma

Mockup

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

View prototype

Live Site

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

View live site

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.

screenshot of live website

Return to Gallery