<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="card border-danger golge">
<div class="card-header"><a href="anasayfa.html" class="isteColor">
<h5 class="text-center m-2" style="font-weight: bold">NEWS FLOW</h5>
</a></div>
<div class="card-body">
<div class="carousel vert slide" data-ride="carousel" data-interval="2000">
<div class="carousel-inner">
<div class="carousel-item active">
<ul class="timeline">
<li>
<!--"_blank" tıklanan linkin yeni sekmede açılmasını sağlar.-->
<a target="_blank" href="#">News Headline</a>
<a href="#" class="float-right">09 Ocak, 2019</a>
<p class="article">>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada
gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..</p>
</li>
<hr>
<li>
<a href="#">News Headline</a>
<a href="#" class="float-right">4 Temmuz, 2018</a>
<p>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler
burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada
gözükecek..</p>
</li>
<hr>
<li>
<a href="#">News Headline</a>
<a href="#" class="float-right">4 Temmuz, 2018</a>
<p>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler
burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada
gözükecek..</p>
</li>
</ul>
</div>
<div class="carousel-item">
<ul class="timeline">
<li>
<a href="#">News Headline</a>
<a href="#" class="float-right">09 Ocak, 2019</a>
<p class="article">>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada
gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..</p>
</li>
<hr>
<li>
<a href="#">News Headline</a>
<a href="#" class="float-right">4 Temmuz, 2018</a>
<p>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler
burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada
gözükecek..</p>
</li>
<hr>
<li>
<a href="#">News Headline</a>
<a href="#" class="float-right">4 Temmuz, 2018</a>
<p>Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler
burada gözükecek..Haberler burada gözükecek..Haberler burada gözükecek..Haberler burada
gözükecek..</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.isteColor{
color: #cd2147;
}
.isteColor:hover{
color: #353A40;
}
/*haber akışı list*/
ul.timeline {
list-style-type: none;
position: relative;
}
ul.timeline:before {
content: ' ';
background: #d4d9df;
display: inline-block;
position: absolute;
left: 29px;
width: 2px;
height: 100%;
z-index: 400;
}
ul.timeline > li {
margin: 20px 0;
padding-left: 20px;
}
ul.timeline > li:before {
content: ' ';
background: white;
display: inline-block;
position: absolute;
border-radius: 50%;
border: 3px solid #cd2147;
left: 20px;
width: 20px;
height: 20px;
z-index: 400;
}
/*vertical carousel*/
.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.vert .carousel-item-next,
.vert .active.carousel-item-right {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100% 0);
}
.vert .carousel-item-prev,
.vert .active.carousel-item-left {
-webkit-transform: translate3d(0,-100%, 0);
transform: translate3d(0,-100%, 0);
}
