From 1ac7f4dd82dfdbde68d2d7da77237bc63d30063c Mon Sep 17 00:00:00 2001
From: James Dinh <jamesdinh77@gmail.com>
Date: Sun, 12 Jun 2022 21:21:00 -0700
Subject: [PATCH] Added Prelim Headline

---
 css/general.css | 35 ++++++++++++++++-------------------
 index.html      |  5 ++++-
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/css/general.css b/css/general.css
index 40c6a92..9811fdb 100644
--- a/css/general.css
+++ b/css/general.css
@@ -144,22 +144,28 @@ nav li a:focus::after{
   transition: 0.5s;
 }
 
-#banner-text {
+#banner {
   height: 100%;
-  width: 70%;
-  margin: auto;
+  /* width: 50%; */
+  width: 500px;
+  margin: 0 10px;
   font-size: 20px;
   display: inline-flex;
-  position: absolute;
+  position: relative;
   justify-content: center;
+  overflow: hidden;
   align-items: center;
 }
 
-#banner-moving-text {
+#banner-text {
+  text-align: center;
   animation: headline 20s infinite;
+  animation-timing-function: linear;
 }
-.sub-text {
+
+#timer-text {
   color: gray;
+  animation: blinking 2s infinite;
 }
 
 @keyframes blinking {
@@ -167,7 +173,7 @@ nav li a:focus::after{
     opacity: 1;
   }
   50% {
-    opacity: 0;
+    opacity: 0.5;
   }
   100% {
     opacity: 1;
@@ -175,22 +181,13 @@ nav li a:focus::after{
 }
 @keyframes headline {
   0% {
-    transform: translateX(10vw);
-    opacity: 0;
-  }
-  15% {
-    opacity: 1;
+    transform: translateX(600px);
   }
   50% {
-    opacity: 1;;
-    transform: translateX(-20vw);
-  }
-  60% {
-    opacity: 0;
+    transform: translateX(-600px);
   }
   100% {
-    opacity: 0;
-    transform: translateX(-20vw);
+    transform: translateX(-600px);
   }
 }
 
diff --git a/index.html b/index.html
index 7a1fb5a..3f97c64 100644
--- a/index.html
+++ b/index.html
@@ -46,7 +46,7 @@
         <a id="nav-logo-a" href="./">
             <img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
         </a>
-        <!-- <div id="banner-text"><p id="banner-moving-text">Next Event -> Opening Ceremony, <span class="sub-text">2mo</span></p></div> -->
+        
         <div id="nav-links-container">
             <input type="checkbox" id="check">
             <label for="check" class="checkbtn">
@@ -59,6 +59,9 @@
                 <li><a onclick="uncheck('check')" href="#prizes">Prizes</a></li>
                 <li><a onclick="uncheck('check')" href="#team">Team</a></li>
             </ul>
+            <div id="banner">
+                <p id="banner-text">Next event:<br>Opening Ceremony, <span id="timer-text">2mo</span></p>
+            </div>
         </div>
     </nav>
     <!--Front Page-->