Added Prelim Headline

css/general.css

@@ -144,22 +144,28 @@ nav li a:focus::after{
   transition: 0.5s;
 }
 
-#banner-text {
+#banner {
   height: 100%;
-  width: 70%;
+  /* width: 50%; */
-  margin: auto;
+  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);
+    transform: translateX(600px);
-    opacity: 0;
-  }
-  15% {
-    opacity: 1;
   }
   50% {
-    opacity: 1;;
+    transform: translateX(-600px);
-    transform: translateX(-20vw);
-  }
-  60% {
-    opacity: 0;
   }
   100% {
-    opacity: 0;
+    transform: translateX(-600px);
-    transform: translateX(-20vw);
   }
 }
 

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-->