<marquee class="css1"> SALE IS LIVE!</marquee>

<br> <br> 
<marquee class="css2" direction="right">Shop Today ^ ^</marquee>

<br><br>
<center>
 <marquee class="css3" direction="down" width="500" height="100" behavior="alternate" >
      <marquee class="css4" behavior="alternate">
        Exciting offers on your favorite brands.
      </marquee>
     </marquee>
</center>
.css1{
  background-color:yellow;
  font-size:50px;
  font-family: georgia;
  font-style:italic;
  font-weight:bold;
  color:purple;
  text-shadow: 2px 2px 8px #FF0000;
}

.css2{
  color:blue;
  background-color:lightpink;
  font-size:30px;
  font-family: Leelawadee UI Semilight;
  font-style:italic;
  font-weight:600;
  letter-spacing: 3px;
}

.css3{
  background-color:rgb(159, 233, 243);
  border: 5px solid;
  border-radius: 10px;
}

.css4{
  color:rgb(146, 3, 101);
  font-style: italic;
  font-family: Georgia;
  font-weight:bold;
  word-spacing:2px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.