diff --git a/.vscode/settings.json b/.vscode/settings.json
index f260a12..a7eece0 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,4 @@
{
- "liveServer.settings.port": 5514,
+ "liveServer.settings.port": 5517,
"continue.telemetryEnabled": false
}
\ No newline at end of file
diff --git a/index.html b/index.html
index e5f9625..bb8b657 100644
--- a/index.html
+++ b/index.html
@@ -66,7 +66,9 @@
-
+
Top
@@ -129,6 +131,7 @@
+
diff --git a/style.css b/style.css
index 998bfdd..f5092dd 100644
--- a/style.css
+++ b/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;
diff --git a/update.js b/update.js
new file mode 100644
index 0000000..7ff6a0f
--- /dev/null
+++ b/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 = 'Error loading data. Check the console.
'; // Display an error message
+ });
+});
+
diff --git a/update.json b/update.json
new file mode 100644
index 0000000..88b9594
--- /dev/null
+++ b/update.json
@@ -0,0 +1,5 @@
+[
+{
+ "message": "We will be closed the week of 8/1 - 8/8"
+}
+]
\ No newline at end of file