3 files modified

Author: eastcoastdeveloper

src/app/app.component.html

@@ -1,9 +1,3 @@
-<header>
-  <div class="fat-arrow">
-    <span>( ) =</span>
-    <span class="caret">&#62;</span>
-  </div>
-</header>
 
 <div id="dropdown-component">
   <div class="selected" (click)="toggleMenu()">

src/index.html

@@ -1 +1,63 @@
 <my-app>loading</my-app>
+
+<footer id="rotatingFooter"></footer>
+
+<!-- Footer -->
+<script>
+  const footer = document.getElementById('rotatingFooter');
+
+  const footerItems = [
+    {
+      img: 'https://webdevunlimited.tech/images/amazon-logo.png',
+      text: 'CMSs, E-Commerce Tools, & Website Builders Explained',
+      link: 'https://tinyurl.com/3m5hyrk5',
+    },
+    {
+      img: 'https://webdevunlimited.tech/images/favicon.png',
+      text: 'Web Dev Unlimited',
+      link: 'https://webdevunlimited.tech/',
+    },
+  ];
+
+  Object.assign(footer.style, {
+    position: 'fixed',
+    bottom: '0',
+    left: '0',
+    width: '100%',
+    background: '#0c1020',
+    color: '#fff',
+    textAlign: 'center',
+    padding: '5px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '10px',
+    zIndex: '9999',
+    fontFamily: 'sans-serif',
+  });
+
+  const img = document.createElement('img');
+  img.style.height = '25px';
+  img.style.width = 'auto';
+  img.style.borderRadius = '4px';
+
+  const textLink = document.createElement('a');
+  textLink.style.color = '#fff';
+  textLink.style.textDecoration = 'none';
+  textLink.style.fontSize = '.9rem';
+
+  footer.appendChild(img);
+  footer.appendChild(textLink);
+
+  function showRandomItem() {
+    const item = footerItems[Math.floor(Math.random() * footerItems.length)];
+    img.src = item.img;
+    textLink.href = item.link;
+    textLink.textContent = item.text;
+    textLink.target = '_blank';
+    textLink.rel = 'noopener noreferrer';
+  }
+
+  showRandomItem();
+  setInterval(showRandomItem, 10000);
+</script>

src/styles.scss

@@ -2,31 +2,4 @@ html,
 body {
   margin: 0;
   padding: 0;
-}
-header {
-  font: normal 14px sans-serif;
-  letter-spacing: 0.5px;
-  cursor: pointer;
-  background-color: #313b3f;
-  color: #d9a74a;
-  overflow: auto;
-  padding: 5px 20px 7px 15px;
-  position: relative;
-  .fat-arrow {
-    position: relative;
-    float: left;
-    height: 100%;
-    display: grid;
-    grid-template-columns: repeat(2, auto);
-    span {
-      font-size: 20px;
-      font-style: italic;
-    }
-    .caret {
-      font-size: 30px;
-      line-height: 22px;
-      display: inline-block;
-      font-weight: lighter;
-    }
-  }
-}
+}