Skip to content

jiparkblog/second-website

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

NYC Restaurant Week Website Project

NYC Restaurant Week Website Project is a website about NYC restaurant week.

View live working website here: https://jipark119-second-website.glitch.me/

About

NYC Restaurant Week Website Project is a website about NYC restaurant week. NYC Restaurant Week is a celebration of NYC’s most fabulous pastime: dining out. With hundreds of restaurants throughout the City rolling out special prix-fixe menus for a limited time, this is your chance to revel without a cause! On this website, visitors can get information about participating restaurants,frequently asked questions, and reservation link through opentable.

Deployment

This project is hosted on Glitch.

Built with

Author

Ji Park

Process & Documentation

  1. Sketch and Design

NYC restaurant week is one of my favorite New York events. As a big foodie, I love that I get to try awesome menus with fixed price and its a nice excuse to get all my busy friends together for a great dinner night! This website is inspired by strict grid system of Swiss poster design. To find out more about my process, sketches, wireframes, design and styleguide here: https://www.figma.com/file/cq9V2QAJkfczC1ogOGhIjE/Swiss-Poster?node-id=0%3A1

  1. Development

This website is simple one page website and is responsive to mobile screen size. To fullfill 5 interactive javascript elements, I integrated five events:

  • onload: Background and button color changes evertime user loads. Also, food emoji stickers are randomly positioned on load.
  • onkeypress: Although I love my emoji sticker vomit, I wanted the users to read and get their information clearly. For that function, I used spacebar key to remove stickers when pressed.
  • click: Since this is a long one page website, I thought that it was important to have some kind of navigation system for users. When user clicks top header menu, it moves to according section.
  • scroll: I've seen this affect on other websites and really wanted to try it on mine. It animates scroll percentage as user scrolls.
  • mouseover: When user mouse-over About section, image background pops up.

Challenges & Struggles

It took me awhile to figure out flex css. I think I still need time to get comfortable with it and try different box grid scenarios.

References

https://www.swissted.com/ https://www.experimentaljetset.nl/

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published