Add PGP Key to contact page

contactme.html

@@ -36,6 +36,27 @@
           <div class="col-1">
             <h1 id="contacttitle"></h1>
             <h2 id="contact"></h2>
+            <a id="popupButton">PGP Key</a>
+
+            <div id="myPopup" class="Popup">
+              <div class="popupContent">
+                <span class="close">&times;</span>
+                <h1>PGP Key</h1>
+                <p>-----BEGIN PGP PUBLIC KEY BLOCK-----<br>
+                  xjMEZb6aVBYJKwYBBAHaRw8BAQdAoOqb346rMo1iB+4uhOk/5P01bMKkz3lz<br> 
+                  f/VkW/nOcq/NKWNvbnRhY3RAbWF3YWNvZGUuZGUgPGNvbnRhY3RAbWF3YWNv<br>
+                  ZGUuZGU+wowEEBYKAD4FgmW+mlQECwkHCAmQF7yxOY8Xq6gDFQgKBBYAAgEC<br>
+                  GQECmwMCHgEWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAACAgA/AuDAmTI7a1A<br>
+                  FTzz5yg0srbLKiNyApa6Jp6W57U3VrRkAQC8Eh001VNeda9ZI70VKMETCdfA<br>
+                  AD+gELPomlR3CRAaBM44BGW+mlQSCisGAQQBl1UBBQEBB0COggG2IPWv21Qz<br>
+                  1lenwokMxqj3t2e6EWvVCHWnRFVUZwMBCAfCeAQYFgoAKgWCZb6aVAmQF7yx<br>
+                  OY8Xq6gCmwwWIQTp4k0bwYyQDzuOcfkXvLE5jxerqAAA2BMA/0oUUD7XV5wx<br>
+                  MqPmF+ZkVJBLpoYmsGCnInjRbXKjMKVWAQDi3+hfP9I81n1k0BzZ/aEwosoS<br>
+                  V1WPds4rTX6GEzj+Cw==<br>
+                  =rzUE<br>
+                  -----END PGP PUBLIC KEY BLOCK-----</p>
+              </div>
+            </div>
           </div>
           <div class="col-2">
             <a href="https://xkcd.com/1783/"><img src="pics/emails.png" class="comic"></a>
@@ -51,6 +72,7 @@
     </div>
 
     <script src="js/lang.js"></script>
+    <script src="js/popups.js"></script>
 
   </body>
 

css/style.css

@@ -130,6 +130,55 @@ h2{
     color: black;
 }
 
+#popupButton {
+    color: black;
+    font-size: 100%;
+    padding: 5px;
+    text-decoration: none;
+    background-color: #e0d94c;
+    box-shadow: 5px 5px 5px black;
+}
+
+#popupButton:hover{
+    color: #ecfeaa;
+    cursor: pointer;
+}
+
+.Popup {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    padding-top: 100px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.4);
+}
+  
+.popupContent {
+    background-color: #e2de84;
+    margin: auto;
+    padding: 20px;
+    border: 1px solid #000000;
+    width: 80%;
+    color: black;
+}
+
+.close {
+    color: #aaaaaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+
+.close:hover, .close:focus {
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
 .socialmedia img{
     height: 30px;
     margin: 5px;

js/popups.js

@@ -0,0 +1,25 @@
+// Get the Popup
+var Popup = document.getElementById("myPopup");
+
+// Get the button that opens the Popup
+var btn = document.getElementById("popupButton");
+
+// Get the <span> element that closes the Popup
+var span = document.getElementsByClassName("close")[0];
+
+// When the user clicks the button, open the Popup 
+btn.onclick = function() {
+  Popup.style.display = "block";
+}
+
+// When the user clicks on <span> (x), close the Popup
+span.onclick = function() {
+  Popup.style.display = "none";
+}
+
+// When the user clicks anywhere outside of the Popup, close it
+window.onclick = function(event) {
+  if (event.target == Popup) {
+    Popup.style.display = "none";
+  }
+}