Change Spots

css/general.css

@@ -49,14 +49,6 @@ nav * {
   transition: 0.5s;
 }
 
-#nav-logo-div {
-  height: 50px;
-  width: 258px;
-  margin: none;
-  display: inline block;
-  position: fixed;
-}
-
 #nav-logo-a {
   position: relative;
 }
@@ -151,8 +143,15 @@ nav ul li {
 }
 
 #banner {
-  height: 100%;
-  /* width: 50%; */
+  width: 70%;
+  position: absolute;
+  justify-content: center;
+  display: inline-flex;
+  top: 16px;
+  font-size: 20px;
+  margin: auto;
+  /* height: 100%;
+  width: 50%;
   width: 380px;
   margin: auto;
   font-size: 20px;
@@ -160,7 +159,7 @@ nav ul li {
   position: relative;
   justify-content: left;
   overflow: hidden;
-  align-items: center;
+  align-items: center; */
 }
 
 #banner-text {
@@ -239,6 +238,11 @@ nav ul li {
 }
 
 /* Responsive Functions */
+@media (max-width: 1300px) {
+  #banner {
+    width: 50%;
+  }
+}
 @media (max-width: 1150px) {
   #banner {
     display: none;

index.html

@@ -49,6 +49,9 @@
         <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">
+            <p id="banner-text"><a class="navlink" id="timer-link" href="#timeline" title="Click for more info">Opening Ceremony</a> in<abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p>
+        </div>
         <div id="nav-links-container">
             <input onclick="btnToggle()" type="checkbox" id="check">
             <label for="check" class="checkbtn">
@@ -61,9 +64,9 @@
                 <li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
                 <li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
             </ul>
-            <div id="banner">
+            <!-- <div id="banner">
                 <p id="banner-text"><a class="navlink" id="timer-link" href="#timeline" title="Click for more info">Opening Ceremony</a> in<abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p>
-            </div>
+            </div> -->
         </div>
     </nav>
     <!--Front Page-->
@@ -76,7 +79,7 @@
                     <h2 id="header-subtitle-date">Aug 12 - 14</h2>
                     <div id="spots-container">
                         <div class="blob green" aria-hidden="true"></div>
-                        <h2 id="header-subtitle-spots">34 spots remaining</h2>
+                        <h2 id="header-subtitle-spots">33 spots remaining</h2>
                     </div>
                     <div id="entrance-arrow">
                         <a href="#event" id="arrow-link">