Merge pull request #10 from OSSFE/abstract-announcement-banner

added announcement banner
OSSFE · Sep 16, 2024 · 3d899c3 · 3d899c3
2 parents a29aa0b + b21540c
commit 3d899c3
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 19 deletions.
diff --git a/assets/main.css b/assets/main.css
@@ -456,4 +456,66 @@ footer {
     margin-left: 15px;
     cursor: pointer;
     border-radius: 5px;
+}
+
+
+.announcement-banner {
+    position: fixed;
+    top: 0;
+    left: 0;
+    /* Ensure it starts from the very left of the screen */
+    right: 0;
+    /* Ensure it extends to the very right */
+    width: 100%;
+    background-color: #E8C547;
+    color: #333F50;
+    text-align: center;
+    padding: 15px 10px;
+    font-size: 16px;
+    z-index: 1001;
+    /* Higher than other elements */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    /* Optional shadow */
+    box-sizing: border-box;
+    /* Include padding in the element’s width */
+    margin: 0;
+    /* Remove any default margin */
+}
+
+.announcement-banner p {
+    margin: 0;
+    padding: 0;
+    flex-grow: 1;
+    /* Allows the paragraph to take up available space */
+    text-align: center;
+    /* Center the text inside the paragraph */
+}
+
+.announcement-banner a {
+    color: #333F50;
+    text-decoration: underline;
+}
+
+.announcement-banner a:hover {
+    color: #52739e;
+}
+
+.close-banner {
+    background: none;
+    border: none;
+    color: #333F50;
+    font-size: 20px;
+    margin-left: 20px;
+    cursor: pointer;
+    outline: none;
+}
+
+.banner-icon {
+    font-size: 24px;
+    /* Size the icon appropriately */
+    margin-right: 10px;
+    /* Add spacing between the icon and the text */
 }
diff --git a/index.html b/index.html
@@ -22,6 +22,15 @@
 </head>
 
 <body>
+    <div id="announcement-banner" class="announcement-banner">
+
+        <p>
+            <i class="fas fa-bullhorn banner-icon"></i>
+            <strong>Abstract submission open. Deadline
+                January 15, 2025 <br> <a href="submission">Click here and submit your abstract now!</a></strong>
+        </p>
+        <button id="close-banner" class="close-banner">X</button>
+    </div>
 
     <div class="banner">
         <img src="assets/OSSFE banner.png" style="width: 100%;" alt="OSSFE 2025 Banner">
@@ -117,25 +126,6 @@ <h2>Committee</h2>
         <li>Nick Murphy (Harvard University) <a href="https://github.com/namurphy"><i class="fab fa-github"></i></a>
         </li>
     </ul>
-    <!-- <table class="sponsors">
-        <tr>
-            <td class="sponsor">
-                <a href="http://www.eyebleach.me/">
-                    <img src="assets/kitten1.jpg" alt="First Sponsor Name">
-                </a>
-            </td>
-            <td class="sponsor">
-                <a href="http://www.eyebleach.me/">
-                    <img src="assets/kitten2.jpg" alt="Second Sponsor Name" style="width: 80%">
-                </a>
-            </td>
-            <td class="sponsor">
-                <a href="http://www.eyebleach.me/">
-                    <img src="assets/kitten3.jpg" alt="Third Sponsor Name">
-                </a>
-            </td>
-        </tr>
-    </table> -->
 
     <footer>
         &copy; OSSFE 2025
@@ -167,6 +157,13 @@ <h2>Committee</h2>
         });
     </script>
 
+    <!-- Function to close the announcement banner -->
+    <script>
+        document.getElementById('close-banner').addEventListener('click', function () {
+            document.getElementById('announcement-banner').style.display = 'none';
+        });
+    </script>
+
 </body>
 
 </html>