add content to footer

add additional links to footer
style in css
prepare script.js for credits page

valentines-day-25/index.html

@@ -63,7 +63,9 @@
         </script>
         <script src="./js/script.js" defer></script>
         <footer>
-            <p>happy valentine's day!</p>
+            <p class="cafe">part of the <a href="https://32bit.cafe/vday25/" target="_blank">valentine's day '25</a> event from the 32-Bit Cafe</p>
+            <p class="message">Happy Valentine's day! <i class="fa-solid fa-heart"></i></p>
+            <a href="#" class="credits">credits</a>
         </footer>
     </body>
 </html>

valentines-day-25/js/script.js

@@ -72,6 +72,8 @@ const notesForEmma = {
                  don't let it. don't run away</p>`,
 };
 
+const creditNote = ``;
+
 const baxterThoughtImgSrc = [
     "../img/baxter-thoughts/baxter-thought-one.webp",
     "../img/baxter-thoughts/baxter-thought-two.webp",

valentines-day-25/style/style.css

@@ -1,6 +1,8 @@
 :root {
     --header-footer-color: #BFD9C6CC;
     --text-color-light-red: #E94E77;
+    --link-color: #E94E77;
+    --link-hover-color: #664625;
 }
 
 @font-face {
@@ -58,7 +60,10 @@ header {
 footer {
     width: 100vw;
     height: 8vh;
-    background: var(--header-footer-color)
+    background: var(--header-footer-color);
+    padding: 0 2rem;
+    display: flex;
+    align-items: center;
 }
 
 section {
@@ -67,6 +72,31 @@ section {
     height: auto;
 }
 
+a {
+    text-decoration: none;
+    color: var(--link-color);
+}
+
+a:hover {
+    color: var(--link-hover-color);
+}
+
+.cafe {
+    font-size: 1.25rem;
+    padding-right: 7rem;
+}
+
+.message {
+    font-size: 3rem;
+    font-family: alwaysinmyheart;
+    color: var(--text-color-light-red);
+    padding-right: 28rem;
+}
+
+.credits {
+    font-size: 1.25rem;
+}
+
 .header-text {
     font-family: alwaysinmyheart;
     font-size: 3.25rem;