"The People's Tournament" Website

About a week ago, friends of mine, who run the largest pool tournament in Florida, asked if I could assist them in finding a suitable domain name for their event. The domain name “thepeoplestournament.com” was already taken, so I suggested peoplestournament.com. They went ahead and purchased it with no immediate plans to do anything with it. But my first reaction was to add some content and see where it goes. Five days later, a fully-responsive site was born: http://peoplestournament.com.

A few things I did that are worth noting:

  • I implemented a modal window to display the images in full screen whenever the user clicks on one of the three buttons, or on any of the flyer images. (See modal-img.js and modal-btn.js).

  • I researched and implement header behavior such that the header scrolls out of view when the user scrolls down the page, and then immediately reappears as soon as a scroll-up event is detected.

  • I used embedsocial.com to embed a Facebook album inside the Photos pages.

  • I used iFrame to link to one of their sponsors’ products, and that turned out nice.

All in all, it wasn’t at all a complicated task, but I thought posting it might benefit some of the folks here. Your feedback is always welcome, of course. One particular issue I encountered has to do with the font sizes when the page is viewed in FB Messenger’s built-in browser. The fonts seem to come across larger than when viewed using a standard browser like Chrome. For responsiveness and smoothness, I used vw units where appropriate.

Repository: peterghostine.github.io/opp/tpt at main · peterghostine/peterghostine.github.io · GitHub
Public site: http://peoplestournament.com

1 Like