<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="container" class="mainContent">
<div id="wrapper">
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-12">
<h3 class="heading-large">Categorie 1</h3>
<div class="flex-inline">
<div class="col-lg-6">
<div class="card">
<img class="img-fluid" src="img/62556720_2832171880143199_1116027400526757888_n.jpg_Categorie 1.jpg" alt="">
<div class="card-body">
<div class="news-title">
<a href="#">
<h2 class="title-small">Anunt 1</h2>
</a>
</div>
<p class="card-text"></p>
</div>
</div>
</div>
<br/>
<div class="col-lg-6">
<div class="card">
<img class="img-fluid" src="img/52390022_2083827301666137_9139699043067232256_n.jpg_Categorie 1.jpg" alt="">
<div class="card-body">
<div class="news-title">
<a href="#">
<h2 class="title-small">Anunt 2</h2>
</a>
</div>
<p class="card-text"></p>
</div>
</div>
</div>
</div>
<br/>
</div>
<aside class="col-lg-4 side-bar col-md-12">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Noutăți</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Cele mai
vizualizate</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content sidebar-tabing" id="nav-tabContent">
<div class="tab-pane active" id="home" role="tabpanel">
<div class="media">
<a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<div class="news-title">
<h2 class="title-small"><a href="#">Key Republicans sign letter
warning
against candidate</a></h2>
</div>
<div class="news-auther"><span class="time">1h ago</span></div>
</div>
</div>
<div class="media">
<a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<div class="news-title">
<h2 class="title-small"><a href="#">Obamacare Appears to Be
Making
People Healthier</a></h2>
</div>
<div class="news-auther"><span class="time">1h ago</span></div>
</div>
</div>
<div class="media">
<a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<div class="news-title">
<h2 class="title-small"><a href="#">Key Republicans sign letter
warning
against candidate</a></h2>
</div>
<div class="news-auther"><span class="time">1h ago</span></div>
</div>
</div>
</div>
<div class="tab-pane" id="profile" role="tabpanel">
<div class="media">
<a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<div class="news-title">
<h2 class="title-small"><a href="#">Key Republicans sign letter
warning
against candidate</a></h2>
</div>
<div class="news-auther"><span class="time">1h ago</span></div>
</div>
</div>
<div class="media">
<a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<div class="news-title">
<h2 class="title-small"><a href="#">‘S.N.L.’ to Lose Two
Longtime Cast
Members</a></h2>
</div>
<div class="news-auther"><span class="time">1h ago</span></div>
</div>
</div>
<div class="media">
<a href="#"> <img class="d-flex mr-3" src="https://observator.tv/uploads/modules/news/0/2019/1/19/282084/1547903342ac502b50.jpg" alt="Generic placeholder image"></a>
<div class="media-body">
<div class="news-title">
<h2 class="title-small"><a href="#">Obamacare Appears to Be
Making
People Healthier</a></h2>
</div>
<div class="news-auther"><span class="time">1h ago</span></div>
</div>
</div>
</div>
</div>
</aside>
<div class="col-lg-8 col-md-12">
<h3 class="heading-large">Categorie 2</h3>
<div class="flex-inline">
<div class="col-lg-6">
<div class="card">
<img class="img-fluid" src="img/52293313_409762219602408_2988070741385150464_n.jpg_Categorie 2.jpg" alt="">
<div class="card-body">
<div class="news-title">
<a href="#">
<h2 class="title-small">Anunt 1</h2>
</a>
</div>
<p class="card-text"></p>
</div>
</div>
</div>
</div>
<br/>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
crossorigin="anonymous"></script>
body {
color: #5a5a5a;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 15px;
}
h1, h2, h3, h4, h5 {
font-family: 'Montserrat', sans-serif;
}
a, a:hover, .btn {
outline: none !important;
}
section {
padding: 30px 0;
float: left;
width: 100%;
}
.card {
float: left;
width: 100%;
}
.title-small {
color: #141517;
font-size: 16px;
font-weight: 400;
line-height: 23px;
margin: 2px 0 0;
}
.title-small a {
color: inherit;
}
.card-text {
margin: 0;
}
.side-bar .nav-tabs {
border-bottom: none;
}
.side-bar .nav-tabs .nav-link {
color: #aeaeae;
text-transform: uppercase;
border: none;
}
.side-bar .nav-tabs .nav-link.active, .side-bar .nav-tabs .nav-link:hover {
border-bottom: 2px solid #ff0000;
text-transform: uppercase;
color: #222;
}
.sidebar-tabing .media {
margin-top: 20px;
}
.sidebar-tabing img {
width: 120px;
height: 100px;
}
.sidebar-tabing .title-small {
line-height: 23px;
margin-top: 5px;
font-size: 18px;
}
.section-01 {
float: left;
width: 100%;
border-top: 1px solid #d5d5d5;
border-bottom: 1px solid #d5d5d5;
}
.section-01 .heading-large {
border-bottom: 2px solid #222;
color: #222;
float: left;
width: 100%;
padding: 0 0 6px;
margin: 0 0 18px;
text-align: left;
}
.section-01 .heading-large::before, .section-01 .heading-large::after {
background: transparent;
}
.section-01 .heading-small {
border-bottom: 2px solid #222;
color: #222;
float: left;
margin: 7px 0 0;
width: 100%;
padding-bottom: 10px;
font-size: 18px;
}
.section-01 .title-small {
margin-bottom: 5px;
font-size: 17px;
}
.section-01 .news-block {
border: none;
border-bottom: 1px dashed #000;
padding-bottom: 30px;
}
.section-01 aside > .news-block {
border-bottom: 1px dashed #000;
padding-bottom: 19px;
}
.section-01 aside > .news-block:last-child {
border-bottom: none;
margin-bottom: 20px
}
.section-01 .card {
border: none;
}
.section-01 .card-block {
padding: 10px 0;
}
.section-01 .video-sec {
float: left;
margin-top: 30px;
width: 100%;
}
.section-01 .video-block {
float: left;
margin-top: 20px;
width: 100%;
}
.action-sec {
width: 100%;
float: left;
background: #222;
}
.action-box {
float: left;
width: 100%;
text-align: center;
}
.action-box h2 {
color: #fff;
font-size: 20px;
}
.flex-inline {
display: flex;
}
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
$(window).load(function() {
var boxheight = $('#myCarousel .carousel-inner').innerHeight();
var itemlength = $('#myCarousel .item').length;
var triggerheight = Math.round(boxheight/itemlength+1);
$('#myCarousel .list-group-item').outerHeight(triggerheight);
});
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]
var newDate = new Date();
newDate.setDate(newDate.getDate() + 1);
$('#Date').html(dayNames[newDate.getDay()] + ", " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
