Mini Popup Panel Tutorial

I found the base code here

Here's a more practical modified version for your convenience on Spacehey!

First you paste this code into any of your interests section, doesn't matter which lol cuz it'll be invisible anyways!

<style>

.button {

  font-size: 1em;

  color: black;

  box-height: 50px;

  box-width: 300px;

  padding: 10px;

  border: 2px solid black;

  border-radius: 20px/50px;

  text-decoration: none;

  cursor: pointer;

  transition: all 0.3s ease-out;

}

.button:hover {

  background: blue;

}

.overlay {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0.7);

  transition: opacity 500ms;

  visibility: hidden;

  opacity: 0;

}

.overlay:target {

  visibility: visible;

  opacity: 1;

}

.popup {

  margin: 70px auto;

  padding: 20px;

  background: #fff;

  border-radius: 15px;

  border: 2px solid black;

  width: 750px!important;

  height: 600px!important;

  overflow-y: scroll!important;

  position: relative;

  transition: all 5s ease-in-out;

}

.popup h2 {

  margin-top: 0;

  color: #48357D;

  font-family: Arial;

}

.popup .close {

  position: absolute;

  top: 20px;

  right: 30px;

  transition: all 200ms;

  font-size: 30px;

  font-weight: bold;

  text-decoration: none;

  color: Black;

}

.popup .close:hover {

  color: blue;

}

.popup .content {

  max-height: 70%;

  overflow: scroll-y;

}

@media screen and (max-width: 1200px){

  .box{

    width: 70%;

  }

  .popup{

    width: 70%;

  }

}

</style>

The above code is the code for the popup's actual design! You can tweak each part to change up the design! Now for the popup's contents and it's button placement! Paste this code where you want the popup's button to be (About me, Who I'd Like To Meet, etc.)!

</p><p></p><div>

 <a class="button" href="#popup1">Click To See</a>

</div>

<div id="popup1" class="overlay">

 <div class="popup">

  <h2>Popup Title Here</h2>

  <a class="close" href="#">×</a>

  <div class="content">

                    <p>Insert Popup's Content here

  </p></div>

 </div>

</div>

You can embed images, videos, anything even in these popups! Just make sure to stay between the <div class="content"> and the </p></div>!

Hope this helps!