Gyancode

A free library of HTML, CSS, JS

Search This Blog

Showing posts with label News Ticker Vertical. Show all posts
Showing posts with label News Ticker Vertical. Show all posts

Saturday 12 November 2016

News Ticker Vertical

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>News Ticker Vertical</title>
</head>
<style>
.newstape {color: #999999; height: 419px; overflow: hidden;}
.newstape .newstape-content {position: relative;}
.newstape .newstape-content .news-block{ margin-bottom:20px;}
.newstape .newstape-content .news-block .test{ color:#999999; font-size:16px; font-family:Calibri; margin:0px;}
.newstape .newstape-content .news-block .name{ color:#f83e4e;  text-align:left; margin:0px;}

</style>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">  
    $(function() {
        $('.newstape').newstape();
    });
</script>

<body>
<div class="newstape">
  <div class="newstape-content">
    <div class="news-block">
      <p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <div class="name">- Lorem Ipsum</div>
    </div>
    <div class="news-block">
      <p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <div class="name">- Lorem Ipsum</div>
    </div>
    <div class="news-block">
      <p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <div class="name">- Lorem Ipsum</div>
    </div>
    <div class="news-block">
      <p class="test"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <div class="name">- Lorem Ipsum</div>
    </div>
  </div>
</div>
</body>
</html>