added update ticker

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-    "liveServer.settings.port": 5514,
+    "liveServer.settings.port": 5517,
     "continue.telemetryEnabled": false
 }

index.html

@@ -66,7 +66,9 @@
         </div>
  
       </nav>
-
+<div class="update">
+  <div id="message"></div>
+</div>
 
        <button onclick="topFunction()" class="has-text-dark" id="top" title="Go to top">Top</button> 
 
@@ -129,6 +131,7 @@
       </div>
     </footer>
     <script src="script.js"></script>
+    <script src="update.js"></script>
     <script defer data-domain="beachpartyballoons.com" src="https://metrics.beachpartyballoons.com/js/script.js"></script>
     <script async data-nf='{"formurl":"https://forms.beachpartyballoons.com/forms/contact-us-vjz40v","emoji":"💬","position":"left","bgcolor":"#0dc9ba","width":"500"}' src='https://forms.beachpartyballoons.com/widgets/embed-min.js'></script>
 

style.css

@@ -8,7 +8,7 @@
 }
 
 html {
-    background-color: rgb(231, 230, 221);
+    background-color: #e7e6dd;
     font-family: "Autour One", serif; /* font-family: "Playwrite AU SA", serif; */
     height: 100%;
 }
@@ -22,6 +22,76 @@ body {
 nav {
     font-family: "Autour One", serif;
 }
+.update{
+  height: 50px;
+  width:100%;
+  /* background-color: #deb0f0; */
+  text-align: center;
+  margin: auto;
+  overflow: hidden;
+  background-color: #fef6e4;
+  padding: 10px 0;
+  /* border-top: 2px solid #94d601;; */
+  /* border-bottom: 2px solid #94d601;; */
+  position: relative;
+}
+#message{
+    display: inline-block;
+  white-space: nowrap;
+  padding-left: 100%; /* Start off-screen */
+  animation: scroll-left 25s linear infinite;
+  font-size: 1.2rem;
+  color: #333;
+}
+
+@keyframes scroll-left {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+
+.update-carousel {
+  width: 100%;
+  overflow: hidden;
+  background-color: #fef6e4;
+  border-top: 2px solid #ffd100;
+  border-bottom: 2px solid #ffd100;
+  padding: 10px;
+  position: relative;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  font-size: 1.1rem;
+  color: #333;
+}
+
+.message-text {
+  white-space: nowrap;
+  position: absolute;
+  left: 100%;
+  animation: slide-left 8s linear infinite;
+}
+
+@keyframes slide-left {
+  0% {
+    left: 100%;
+  }
+  10% {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  90% {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  100% {
+    left: -100%;
+  }
+}
 
 header {
     position: relative;

update.js

@@ -0,0 +1,24 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const message = document.getElementById('message');
+  
+
+    fetch('update.json')
+        .then(response => response.json())
+        .then(data => {
+  
+            const update = data[0]; 
+
+            message.textContent = update.message;
+           
+           const updateElement = document.querySelector('.update'); // safer than getElementsByClassName
+if (update.message === "") {
+  updateElement.style.display = "none";
+}
+
+        })
+        .catch(error => {
+            console.error('Error fetching data:', error);
+            businessCard.innerHTML = '<p>Error loading data.  Check the console.</p>'; // Display an error message
+        });
+});
+

update.json

@@ -0,0 +1,5 @@
+[
+{
+    "message": "We will be closed the week of 8/1 - 8/8"
+}
+]