Add modal

_includes/modal.html

@@ -0,0 +1,55 @@
+<!-- The modal -->
+<div id="myModal" class="modal">
+  <div class="modal-content">
+    <span class="close">&times;</span>
+    <!-- modal content here -->
+    <h3 class="title">Expand your experience</h3>
+    <p> Give yourself a chance to grow: add a comprehensive exploration of the topic that interests you the most to your Code BEAM experience. This year we offer you six training sessions.
+</p>
+
+    <a id="btn-modal" class="page-scroll btn-outline btn-orange mb-4 mt-4 btn-orange inline-block" href="#training" target="_blank">
+      Check now
+    </a>
+  </div>
+</div>
+</div>
+
+<script>
+  // Get the modal element
+  var modal = document.getElementById("myModal");
+
+  // Get the <span> element that closes the modal
+  var closeBtn = document.getElementsByClassName("close")[0];
+  var btn = document.getElementById('btn-modal')
+
+  // Function to open the modal
+  function openModal() {
+    modal.style.display = "block";
+  }
+
+  // Function to close the modal
+  function closeModal() {
+    modal.style.display = "none";
+  }
+
+  // Event listener to close the modal when the close button is clicked
+  closeBtn.addEventListener("click", closeModal);
+  btn.addEventListener("click", closeModal);
+
+  // Event listener to close the modal when clicking on the backdrop
+  window.addEventListener("click", function (event) {
+    if (event.target === modal) {
+      closeModal();
+    }
+  });
+
+  // Event listener to close the modal when the "Escape" key is pressed
+  document.addEventListener("keydown", function (event) {
+    if (event.key === "Escape") {
+      closeModal();
+    }
+  });
+
+  // Open the modal after given modal seconds
+  setTimeout(openModal, '{{page.modal.delay}}');
+</script>

_sass/modal.scss

@@ -0,0 +1,48 @@
+/* Modal styles */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 999; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgba(0, 0, 0, 0.4); /* Black with transparency */
+  z-index: 9999;
+}
+
+.modal-content {
+  background-color: #020002;
+  margin: 10% auto; /* Center vertically and horizontally */
+  padding: 20px;
+  width: 80%;
+  max-width: 500px;
+  text-align: center;
+  .title {
+    color: white;
+    font-weight: bold;
+    margin-top: 18px;
+    margin-bottom: 18px;
+    font-size: 2rem;
+  }
+
+  .btn-outline {
+    margin-top: 20px;
+  }
+}
+
+.close {
+  color: #888;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}

assets/css/styles.scss

@@ -1,27 +1,28 @@
 ---
 ---
 
-@import "global";
-@import "main";
-@import "cover";
-@import "banners";
-@import "welcome";
-@import "speakers";
-@import "training";
-@import "blog";
-@import "sponsors";
-@import "contact";
-@import "venue";
-@import "footer";
-@import "speaker";
-@import "register";
-@import "newsletter";
-@import "post";
-@import "video";
-@import "hotels";
+@import 'global';
+@import 'main';
+@import 'cover';
+@import 'banners';
+@import 'welcome';
+@import 'speakers';
+@import 'training';
+@import 'blog';
+@import 'sponsors';
+@import 'contact';
+@import 'venue';
+@import 'footer';
+@import 'speaker';
+@import 'register';
+@import 'newsletter';
+@import 'post';
+@import 'video';
+@import 'hotels';
+@import 'modal';
 
-@import "_animations";
-@import "_owl-carousel";
-@import "_font-7-stroke";
-@import "_flaticon-social-icons";
-@import "_countdown"
+@import '_animations';
+@import '_owl-carousel';
+@import '_font-7-stroke';
+@import '_flaticon-social-icons';
+@import '_countdown';

index.html

@@ -5,6 +5,9 @@
 countdown: false
 timezone: Europe/Lisbon
 deadline: 2024-05-13 00:01
+modal: 
+  show: false
+  delay: 2000 
 ---
 {% include cover.html %}
 <!-- end of cover -->
@@ -68,3 +71,7 @@
 <!-- end of newsletter -->
 {% include contact.html %}
 <!-- end of contact -->
+
+{% if page.modal.show == true %}
+  {% include modal.html %}
+{% endif %}