Sonya Chaney Photography pop-up ad

by Grayson

HTML

<script src="http://www.sonyachaneyphotography.com/"></script>
<script src="https://fonts.google.com/specimen/Caveat"></script>
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
<div id="test">

  <p>
    <a href="https://www.officedepot.com/catalog/search.do?items=203349%20128853%20451898%20202812%20128844%20469829%20203356%20128817%20469919%20754871%20877678%20525000%20451906%20738726%20270776%20451880%20451872%20925531%20738618%20781242%20592264%20563615%20268681%20793573%20456371%20142364%20128772%20542812%20265078%20742347%20517441%20397739%20542857%20542929%20397667%20542884%20525032%20687836%20816600%20449760%20765699%20169166%20621524%20128628%20781323%20525024%20738753%20355835%20838523%20456628%20563630%20456646%20258440%20783537%20268701%20169157%20470018%20765654%20456682%20655167%20765663%20397748%20563690&cm_mmc=InternalEmail-_-Promo-_-WK37FriODA-_-AdTile4_Save33pWriting-201637PODADFRID--220915ODA" target="_blank">33% Off Select Sharpie Markers Pens And More</a>
  </p>
  <button onclick="hide_show()">X

  </button>
  <img src="https://graphics.basics.com/img/fl/43063_fl.png">
</div>

CSS

#test {
  position: relative;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  text-align: center;
  font-size: 24px;
  border: 2px solid #ccc;
  font-family: 'Permanent Marker', cursive;
  width: 500px;
}

#test a {
  color: black;
  text-decoration: none;
}

#test button {
  color: white;
  background-color: red;
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 50%;
}

#test img {
  width: 250px;
  margin: -30px;
}

JavaScript

function hide_show() {
    var x = document.getElementById("test");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}