Create marquee text for website News and Events section using css

This post helps you to create simple news and events section using Html marquee tag with css. In Every website the news and events section is very important. So you can highlight this section in good manner. This simple concept helps you to put marquee text for leatest news and event section.

Most of the website contains it is placed in their home page. I think this snippet will really helpful to you. This marquee text is based on vertical scrolling text with responsive. this is also very very easy to implement.

Css code for News and Event Section:

.anno-header {
    color: #e65858;
    margin: 10px 0px;
    font-size: 18px;
    border: 1px solid #e65858;
    padding: 10px;
    border-left: 5px solid #e65858;
    border-radius: 10px;
width:50%;
}


.anno {
    border: 1px solid #e65858;
    min-height: 300px;
    padding:11px;
    border-radius: 5px;
width:50%;
}


@media only screen and (max-width: 500px) {


.anno, .anno-header
{
width:90% !important;

}

}

Html Code for News and Event Section:

<div class="col-sm-6">
<h2 class="anno-header">Marquee text for News and Events:</h2>
<div class="anno">
<marquee direction="up" scrollamount="2" onmouseover="this.stop();" onmouseout="this.start();" style=" height:230px;text-align: justify;">
<ul style="line-height: 36px;">
<li><a href="http://www.sanwebcorner.com/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></li>

<li><a href="http://www.sanwebcorner.com/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></li>

<li><a href="http://www.sanwebcorner.com/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></li>

<li><a href="http://www.sanwebcorner.com/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></li>

<li><a href="http://www.sanwebcorner.com/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></li>

<li><a href="http://www.sanwebcorner.com/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></li>

<li><a href="http://www.sanwebcorner.com/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></li>

<li><a href="http://www.sanwebcorner.com/">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </a></li>
</ul>
</marquee>
</div>
</div>