test for timer

diff --git a/2022/assets/css/custom.css b/2022/assets/css/custom.css
index 58694b7bc2c5700d26a98684cff14db14e3cc616..0c8746d502e9ff28bf516053529bfd606916a91a 100644 (file)
--- a/2022/assets/css/custom.css
+++ b/2022/assets/css/custom.css
@@ -653,6 +653,57 @@ hr {
        color: #FFFFFF;
 }
 
+/* timer */
+.lp-timer {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  align-items: center;
+  display: flex;
+  
+}
+
+.timer-container {
+  color: #333;
+  margin: 0 auto;
+  text-align: center;
+}
+
+#h1 {
+  font-weight: normal;
+  letter-spacing: .125rem;
+  text-transform: uppercase;
+}
+
+#li {
+  display: inline-block;
+  font-size: 1.5em;
+  list-style-type: none;
+  padding: 1em;
+  text-transform: uppercase;
+}
+
+#li span {
+  display: block;
+  font-size: 4.5rem;
+}
+
+@media all and (max-width: 768px) {
+  h1 {
+    font-size: calc(1.5rem * var(--smaller));
+  }
+  
+  li {
+    font-size: calc(1.125rem * var(--smaller));
+  }
+  
+  li span {
+    font-size: calc(3.375rem * var(--smaller));
+  }
+}
+
+/* end timer */
+
 .lp-signup {
   margin-right: 10px;
   margin-left: 10px;

diff --git a/2022/includes/banner.html b/2022/includes/banner.html
index d03214f44c14aca2a9a8acd93ead0cfef09b741c..d913068ba6e214a71d490830fdacc258a14ac66f 100644 (file)
--- a/2022/includes/banner.html
+++ b/2022/includes/banner.html
@@ -33,8 +33,18 @@
                           <!-- #top-right-desktop start -->
                           <!--#include virtual="/2022/includes/join-list.html"-->
                           <!-- #top-right-desktop end -->
+            <div class="container">
+             <h1 id="headline">Countdown to LibrePlanet</h1>
+              <div id="countdown">
+               <ul>
+                <li><span id="days"></span>days</li>
+                <li><span id="hours"></span>Hours</li>
+                <li><span id="minutes"></span>Minutes</li>
+                <li><span id="seconds"></span>Seconds</li>
+               </ul>
+              </div>
+            </div>
                        </div><!-- end of lp header -->
-
                  </div>
                </div> <!-- end of header container -->
       </div> <!-- end of lp banner -->