Having almost completed my Apollo 11 project on Framer, I ran into one final problem - not knowing where to put the references.

A lot of the references I see on websites are placed at the very end of the web project. However, since I have got a navigation bar at the end of my project, I really didn't want to add an extra element below the navigation as it would look odd.

I looked for different places on my website to place the references, but there was no suitable spot.

Feeling lost, I looked through some of the Framer tutorials that I hadn't seen on youtube in hopes that I’ll find a solution. Thankfully, after watching a few irrelevant tutorials, I was able to find one that gave me an idea to hide the references;

https://www.youtube.com/watch?v=4cQ2McgDWk0&t=1s&ab_channel=Framer

The tutorial was about overlays. To put it simply, overlays are content box that appears on top of a page and obscures the background content. I later found that overlays had another name that I’m more familiar with - website pop-ups.

To get started, I made a button with the letter R to signify “references”. I also made the button into a variant and added a hover state to indicate that it is clickable.

Then I added an overlays state for that button;