Moving Banner

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 0; padding: 0; background-color: #EDEDED; font-family: Arial, sans-serif; } .marquee-container { overflow: hidden; white-space: nowrap; box-sizing: border-box; width: 100%; background-color: #EDEDED; } .marquee { display: inline-block; white-space: nowrap; animation: marquee 15s linear infinite; } .marquee span { padding: 0 2rem; font-size: 1.5rem; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } /* Adjusted to increase speed */ } </style></head><body> <div class="marquee-container"> <div class="marquee"> <span>Defender</span> <span>Intune</span> <span>Entra</span> <span>Cisco Umbrella</span> <span>Mimecast</span> <span>Defender</span>  <span>Intune</span> <span>Entra</span> <span>Cisco Umbrella</span> <span>Mimecast</span> </div> </div></body></html>

You may have noticed the banner on the home page, and I wanted to include it here as part of the explanation to demonstrate its functionality. I developed this scrolling banner for my cybersecurity portfolio to creatively showcase key tools and platforms that are vital in the field. My goal was to go beyond static content and introduce a dynamic, interactive feature to the site. This project also served as an opportunity to challenge myself by working with HTML and CSS to achieve a seamless, continuous scrolling effect. By adding this banner, I aimed to enhance both the visual appeal and the informational value of my portfolio, reflecting my commitment to advancing my web development skills alongside my cybersecurity knowledge.

Moving Banner

< >