uncommonhacks · ant-mand · Jan 22, 2024 · Jan 22, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/about_popup.html b/about_popup.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- popup windows for tiles -->
+<html>
+    <head>
+        <meta name="author" content="Uncommon Hacks">
+        <meta name="description" content="Popups for Uncommon Hacks">
+        <title>About</title>
+        <link rel="stylesheet" type="text/css" href="css/stylePopups.css">
+    </head>
+
+    <body>
+        <div class="container" id="blur">
+            <div class="content">
+                <h2> About </h2>
+                <img src="images/popups_background_d.JPG">
+                <a href="#" onclick="toggle()"> Open </a>
+            </div>
+        </div>
+        <div id="popup">
+            <h2>  About </h2>
+            <p> 
+                Welcome to Uncommon Hacks, the official hackathon
+                of the University of Chicago! Spend 24 hours working
+                on a project and meeting cool people in this
+                one-of-a-kind experience! In our 2024 edition of Hacks, 
+                we're excited to bring you the biggest event since the 
+                pandemic, including the overnight component that makes 
+                for a truly unforgettable experience.
+
+                Although Hacks will have prizes, we place more emphasis on
+                learning and collaboration than some kind of competitive
+                aspect. So, even if you've never coded before, please do
+                sign up! A successful Hacks team needs people with
+                different skill sets, and if you would like to learn how to
+                code, we'll have workshops to help you do so.
+            </p>
+            <a href="#" onclick="toggle()"> Close </a>
+        </div>
+        <script type="text/javascript">
+            function toggle(){
+                var blur = document.getElementById("blur");
+                blur.classList.toggle('active');
+                var popup = document.getElementById('popup');
+                popup.classList.toggle('active');
+            }
+        </script>
+    </body>
+</html>
diff --git a/css/.DS_Store b/css/.DS_Store
diff --git a/css/stylePopups.css b/css/stylePopups.css
@@ -0,0 +1,86 @@
+/*fonts*/
+@font-face {
+    font-family: bern;
+    src: url(../fonts/bernhc.ttf);
+  }
+
+  @font-face {
+    font-family: baskerville;
+    src: url(../fonts/BASKVILL.ttf);
+  }
+
+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+
+.container
+{
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: chocolate;
+    transition: 0.5s;
+    padding: 20px;
+}
+
+.container#blur.active
+{
+    filter: blur(20px);
+    pointer-events: none;
+    user-select: none;
+}
+
+.container .content
+{
+    position: relative;
+    max-width: 800px;
+}
+h2{
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: #333;
+}
+.container .content img
+{
+    max-width: 100%;
+    display: block;
+}
+a
+{
+    position: relative;
+    padding: 5px 20px;
+    display: inline-block;
+    margin-top: 20px;
+    text-decoration: none;
+    color: #fff;
+    background: #111;
+}
+#popup
+{
+    position: fixed;
+    top: 40%;
+    Left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    padding: 50px;
+    box-shadow: 0 5px 30px rgba(0, 0, 0, .30);
+    background: #fff;
+    visibility: hidden;
+    opacity: 0;
+    transition: 0.5s;
+}
+
+#popup.active
+{
+    top: 50%;
+    visibility: visible;
+    opacity: 1;
+    transition: 0.5s;
+}
diff --git a/css/styles.css b/css/styles.css
@@ -207,4 +207,75 @@ p {
   .buttons * {
       font-size: 1.5vw;
   }
-}
+}
+
+/* Popup Styles */
+#popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 600px;
+    padding: 50px;
+    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.30);
+    background: #fff;
+    visibility: hidden;
+    opacity: 0;
+    transition: 0.5s;
+}
+
+#popup.active {
+    top: 50%;
+    visibility: visible;
+    opacity: 1;
+    transition: 0.5s;
+}
+
+.container {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: chocolate;
+    transition: 0.5s;
+    padding: 20px;
+}
+
+.container#blur.active {
+    filter: blur(20px);
+    pointer-events: none;
+    user-select: none;
+}
+
+.container .content {
+    position: relative;
+    max-width: 800px;
+}
+
+.container .content img{
+    max-width: 100%;
+    display: block;
+}
+
+#popup h2 {
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: #333;
+}
+
+a {
+    position: relative;
+    padding: 5px 20px;
+    display: inline-block;
+    margin-top: 20px;
+    text-decoration: none;
+    color: #fff;
+    background: #111;
+}
+
+#popup a {
+    color: #fff;
+    background: #111;
+}
diff --git a/images/popups_background_d.JPG b/images/popups_background_d.JPG
diff --git a/images/popups_background_m.JPG b/images/popups_background_m.JPG