Breaking news marquee html

Here is an example of a breaking news marquee HTML code:

<!-- Breaking News Marquee -->
<div class="marquee">
  <div class="marquee-inner">
    <ul>
      <li><span class="breaking-news">BREAKING NEWS:</span> Headline 1</li>
      <li><span class="breaking-news">BREAKING NEWS:</span> Headline 2</li>
      <li><span class="breaking-news">BREAKING NEWS:</span> Headline 3</li>
      <!-- Add more headlines here -->
    </ul>
  </div>
</div>

<style>
 .marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    background-color: #f0f0f0;
    border-bottom: 1px solid #ccc;
  }

 .marquee-inner {
    display: inline-block;
    width: 100%;
    animation: marquee 15s linear infinite;
  }

 .marquee-inner ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

 .marquee-inner li {
    display: inline-block;
    margin-right: 20px;
  }

 .breaking-news {
    font-size: 24px;
    font-weight: bold;
    color: #ff0000;
  }

  @keyframes marquee {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(-100%, 0);
    }
  }
</style>

This code creates a marquee that scrolls through a list of breaking news headlines. The marquee is animated using CSS keyframes, and the headlines are displayed in a bold, red font.

You can customize the appearance of the marquee by modifying the CSS styles. For example, you can change the font size, color, and background color to match your website's design.

To add more headlines to the marquee, simply add more <li> elements to the <ul> list. Each <li> element should contain the headline text, and you can use the <span> element to wrap the headline text in a bold, red font.