boredbutton3

commit 4349c4fe2b00b6b134d39309c57918f98e80aedc
parent c9409125facd2ece702b1edc3780ecdde6a00b49
Author: Francisco Boudagh <franciscoboudagh1@gmail.com>
Date:   Mon, 20 Dec 2021 15:53:48 +0100

Contact added

Diffstat:
M
index.php
 | 
10
+++++++++-
M
script.js
 | 
5
+++++
M
style.css
 | 
68
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

3 files changed, 82 insertions(+), 1 deletion(-)
diff --git a/index.php b/index.php
@@ -39,6 +39,14 @@
 
   </body>
   
-  <footer>© 2022 BoredButton3 | All rights reserved | By William &#8743 Francisco &#8743 Ali</footer>
+  <footer>© 2022 BoredButton3 | All rights reserved | By William &#8743 Francisco &#8743 Ali | 
+    <div class="popup" onclick="myFunction()">Contact
+      <span class="popuptext" id="pop">If you have any information that can help or opinions to improve the website
+        or have questions, contact us at our email address: boredbutton3(at)gmail(dot)com
+      </span>
+    </div>
+  </footer>
+
+
 
 </html>
diff --git a/script.js b/script.js
@@ -1,3 +1,8 @@
+function myFunction() {
+    var popup = document.getElementById("pop");
+    popup.classList.toggle("show");
+}
+
 function showFact() {
     moveButton();
     console.log("running function");
diff --git a/style.css b/style.css
@@ -218,3 +218,70 @@ footer{
 ::-webkit-scrollbar-thumb {
   background: #888;
 }
+
+
+
+
+
+
+
+
+
+
+
+
+.popup {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  opacity: 0.9;
+}
+
+.popup .popuptext {
+  visibility: hidden;
+  width: 20vw;
+  background-color: #3F617C;
+  opacity: 0.9;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 8px 0;
+  position: absolute;
+  z-index: 1;
+  bottom: 125%;
+  left: 50%;
+  margin-left: -10vw;
+}
+
+.popup .popuptext::after {
+  content: "";
+  position: absolute;
+  opacity: 0.9;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #3F617C transparent transparent transparent;
+}
+
+.popup .show {
+  visibility: visible;
+  -webkit-animation: fadeIn 1s;
+  animation: fadeIn 1s;
+  opacity: 0.9;
+}
+
+@-webkit-keyframes fadeIn {
+  from {opacity: 0;} 
+  to {opacity: 1;}
+}
+
+@keyframes fadeIn {
+  from {opacity: 0;}
+  to {opacity:1 ;}
+}
+\ No newline at end of file