interest form

TitaniumTigers4829 · Jun 12, 2024 · ab41459 · ab41459
1 parent c86634c
commit ab41459
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -17,6 +17,13 @@
 <body>
 
 <header>
+  <div id="header-interest-form">
+    <p>If interested in summer workshops, complete the form:</p>
+    <a class="header-button"
+       href="https://docs.google.com/forms/d/e/1FAIpQLScZroxdy3WQmwxDN6p1T9dN80Uwpewk7a3u133SZAjkAeQEkQ/viewform?usp=sf_link"
+       target="_blank">Sign Up Form</a>
+  </div>
+  <button id="x-button" onclick="closeSignupPopup()">✖</button>
   <input id="main-nav-toggle" type="checkbox"/>
   <label class="main-nav-button-container" for="main-nav-toggle">
     <div class="main-nav-button" id="top-nav-button"></div>
@@ -153,6 +160,7 @@ <h2>FRC Challenge Videos</h2>
 
 <script src="scripts/iframes.js"></script>
 <script src="scripts/easteregg.js"></script>
+<script src="scripts/x_button.js"></script>
 
 </body>
 </html>
diff --git a/scripts/x_button.js b/scripts/x_button.js
@@ -0,0 +1,6 @@
+function closeSignupPopup() {
+    let popup = document.getElementById("header-interest-form");
+    popup.style.display = "none";
+    let x_button = document.getElementById("x-button");
+    x_button.style.display = "none";
+}
diff --git a/styles/header.css b/styles/header.css
@@ -5,6 +5,52 @@ header {
   background: var(--secondaryColor);
 }
 
+#header-interest-form {
+  width: 100%;
+  padding: .5% 25%;
+  display: flex;
+  flex-direction: row;
+  gap: 3%;
+  background-color: var(--themeColor);
+}
+
+#header-interest-form p {
+  margin: 0;
+  padding: 1% 0;
+  font-size: 1.3vw;
+}
+
+#header-interest-form a {
+  margin: 0;
+  font-size: 1.3vw;
+  color: var(--mainTextColor);
+  border: 1px solid var(--mainTextColor);
+  border-radius: 5px;
+  padding: .9% 1% 1%;
+  text-decoration: none;
+}
+
+#header-interest-form a:hover {
+  backdrop-filter: brightness(1.15);
+}
+
+#x-button {
+  color: var(--mainTextColor);
+  background: transparent;
+  border: none;
+  font-size: 1.3vw;
+  position: absolute;
+  top: 8%;
+  right: 1%;
+  cursor: pointer;
+  font-family: Arial, serif;
+}
+
+#x-button:hover {
+  transform: rotate(180deg);
+}
+
+
 #header-inner {
   padding: 1.8% 20% 1.5%;
 }