Timeline widget
This is html for make news timeline widget
<!-- Timeline style -->
<div class="widget">
<!-- widget title -->
<div class="block-title-4">
<h4 class="h5 title-arrow"><span>Football News</span></h4>
</div>
<!--style 3-->
<div id="timeline-post">
<ul class="timeline-post mb-4">
<li>
<a href="#">
<span class="timeline-date small"><time datetime="2019-06-14">Jun 14, 2019</time></span>
<h4 class="h6 timeline-title">Kilmarnock miss chance to close on Celtic as they lose at home</h4>
</a>
</li>
<li>
<a href="#">
<span class="timeline-date small"><time datetime="2019-06-14">Jun 14, 2019</time></span>
<h4 class="h6 timeline-title">Qatar beat Japan to win first Asian Cup – highlights & report</h4>
</a>
</li>
<li>
<a href="#">
<span class="timeline-date small"><time datetime="2019-06-14">Jun 14, 2019</time></span>
<h4 class="h6 timeline-title">Fans celebrate in Paris after side reaches World Cup final</h4>
</a>
</li>
<li>
<a href="#">
<span class="timeline-date small"><time datetime="2019-06-14">Jun 14, 2019</time></span>
<h4 class="h6 timeline-title">Football Daily podcast: Crouch, Batshuayi and Tielemans</h4>
</a>
</li>
<li>
<a href="#">
<span class="timeline-date small"><time datetime="2019-06-14">Jun 14, 2019</time></span>
<h4 class="h6 timeline-title">Back From the Dead, Parma Embraces a Football School arena</h4>
</a>
</li>
</ul>
<div class="gap-05"></div>
</div>
</div>
<!-- post with number -->
<div class="widget">
<!--block title-->
<div class="block-title-4">
<h4 class="h5 title-arrow">
<span>Post with number</span>
</h4>
</div>
<!-- Block content -->
<ul class="post-number list-unstyled border-bottom-last-0 rounded mb-3">
<li class="hover-a">
<a class="h5 h6-md h5-lg" href="#">Why the world would end without political polls</a>
</li>
<li class="hover-a">
<a class="h5 h6-md h5-lg" href="#">Meet The Man Who Designed The Ducati Monster</a>
</li>
<li class="hover-a">
<a class="h5 h6-md h5-lg" href="#">2020 Audi R8 Spyder spy shots release</a>
</li>
<li class="hover-a">
<a class="h5 h6-md h5-lg" href="#">Lamborghini makes Huracán GT3 racer faster for 2019</a>
</li>
<li class="hover-a">
<a class="h5 h6-md h5-lg" href="#">ZF plans $14 billion autonomous vehicle push, concept van</a>
</li>
</ul>
<!-- end block content -->
<div class="gap-0"></div>
</div>
<!-- only title -->
<div class="widget">
<div class="block-title-4">
<h4 class="h5 title-arrow"><span>Only title</span></h4>
</div>
<!--style 2-->
<div class="small-post">
<!--post list-->
<article class="card card-full hover-a mb-2">
<div class="card-body pt-0">
<!--title-->
<h3 class="card-title h5">
<a href="#">Fans celebrate in Paris after side reaches World Cup final</a>
</h3>
<!--date-->
<div class="card-text small text-muted">
<time datetime="2019-06-16">Jun 16, 2019</time>
</div>
</div>
</article>
<!--post list-->
<article class="card card-full hover-a mb-2">
<div class="card-body pt-0">
<!--title-->
<h3 class="card-title h5">
<a href="#">5 Tips to Save Money Booking Your Next Hotel Room</a>
</h3>
<!--date-->
<div class="card-text small text-muted">
<time datetime="2019-06-16">Jun 16, 2019</time>
</div>
</div>
</article>
<!--post list-->
<article class="card card-full hover-a mb-2">
<div class="card-body pt-0">
<!--title-->
<h3 class="card-title h5">
<a href="#">The 52 Places Traveler: Summer in France, in Two Very Different Ways</a>
</h3>
<!--date-->
<div class="card-text small text-muted">
<time datetime="2019-06-16">Jun 16, 2019</time>
</div>
</div>
</article>
<!--post list-->
<article class="card card-full hover-a mb-2">
<div class="card-body pt-0">
<!--title-->
<h3 class="card-title h5">
<a href="#">6 Simple Tips to Help Vegetarian or Vegan Travelers Eat Well, Anywhere</a>
</h3>
<!--date-->
<div class="card-text small text-muted">
<time datetime="2019-06-16">Jun 16, 2019</time>
</div>
</div>
</article>
</div>
<div class="gap-0"></div>
</div>