Tuesday 28 January 2020

News Ticker


Ticker using HTML and CSS



Latest News

Lorem
ipsum
datom


CSS


.g-news {
            border: solid 1px #ffb600;
            height: 300px;
            width:300px;
        }


        .g-news-heading {
            background-color: #ffb600;
            color: #000000;
            text-align: center;
            padding: 10px;
        }

        .g-news-mar {
            height: 180px;
        }

            .g-news-mar p {
                border-bottom: solid 1px #ffb600;
                padding: 10px;
            }

                .g-news-mar p:hover {
                    background-color: #FFFFC6;
                }

HTML


<div class="g-news">
                <p class="g-news-heading">Notice</p>
                <marquee direction="up" class="g-news-mar" onmouseover="this.stop()" onmouseout="this.start()">
                    <p>
                        Download Admission form
                    </p>
                    <p>
                        Get Enroll Now
                    </p>
                    <p>
                        Student list for January recruitment
                    </p>
                </marquee>

            </div>

Download Source Code

No comments:

Post a Comment