Bootstrap Snippet news bar using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html dir="rtl">
<head>
  <title>news bar with css only</title>
  <meta charset="utf-8" />
  <head>
    <body>
<center>
<!-- newsbar -->
<h2>news-bar 1</h2>
  <div class="slideUp" id="news-bar">
<marquee direction="right" scrollamount="3" behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()">
<a href="#" class="hvr-pop">الخبر الاول</a><a> -*- </a>
<a href="#" class="hvr-pop">الخبر الثاني</a><a> -*- </a>
<a href="#" class="hvr-pop">الخبر الثالث</a><a> -*- </a>
<a href="#" class="hvr-pop">الخبر الرابع</a><a> -*- </a>
<a href="#" class="hvr-pop">الخبر الخامس</a><a> -*- </a>
</marquee>
    </div>
<br>
<h2>news-bar 2</h2>
 <div class="slideUp" id="news-bar">
<marquee direction="right" scrollamount="3" behavior="scroll" onmouseover="this.stop()"  onmouseout="this.start()">
<a href="#" class="hvr-float">الخبر الاول</a><a> -*- </a>
<a href="#" class="hvr-float">الخبر الثاني</a><a> -*- </a>
<a href="#" class="hvr-float">الخبر الثالث</a><a> -*- </a>
<a href="#" class="hvr-float">الخبر الرابع</a><a> -*- </a>
<a href="#" class="hvr-float">الخبر الخامس</a><a> -*- </a>
</marquee></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
h2{color:red;}
#news-bar {
  width: 80%;
  background:white;
 box-shadow: 0 4px 10px black, 0 0 10px black inset;
  border-radius: 15px;
  font: 21px bold;
  padding:4px;
  padding-left: 20px;
  padding-right: 20px;
}
#news-bar:hover {
  transition: 0.37s;
}
#news-bar a {
  padding:8px 2px;
  color: black;
  text-decoration: none;
}
#news-bar a:hover {
  transition: 0.37s;
  color: red;
}
/* Pop */
@-webkit-keyframes hvr-pop {
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"news bar"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"news bar" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"news bar"
Bootstrap 3.0.0 Snippet by evarevirus