<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!------ Include the above in your HEAD tag ---------->
<div class="container cta-100 ">
<div class="container">
<div class="row blog">
<div class="col-md-12">
<div id="blogCarousel" class="carousel slide container-blog" data-interval="false" data-ride="carousel" data-pause="hover">
<ol class="carousel-indicators">
<li data-target="#blogCarousel" data-slide-to="0" class="active"></li>
<li data-target="#blogCarousel" data-slide-to="1"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-3" >
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">PRE-SPT</span> </div>
<!--Image-->
</div>
<div class="item-box-blog-body">
<div class="notice notice-lg">
<strong>LOT A</strong> <i class="fa fa-question-circle fa-lg text-muted" aria-hidden="true" style=></i>
<div class="desc">
</div>
</div>
<div class="notice notice-lg">
<strong>LOT B</strong> <i class="fa fa-question-circle fa-lg text-muted" aria-hidden="true"></i>
<div class="desc">
</div>
</div>
<div class="notice notice-lg">
<strong>LOT C</strong> <i class="fa fa-question-circle fa-lg text-muted" aria-hidden="true"></i>
<div class="desc">
</div>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
</div>
</div>
</div>
<div class="col-md-1 text-center rows-div" >
<i class="fa fa-arrow-right fa-3x" aria-hidden="true"></i>
</div>
<div class="col-md-3" >
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">SPT-MQC</span> </div>
<!--Image-->
</div>
<div class="item-box-blog-body">
<div class="notice notice-lg notice-success">
<strong>LOT A</strong> <i class="fa fa-question-circle fa-lg text-success" aria-hidden="true"></i>
<div class="desc">
</div>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
</div>
</div>
</div>
<div class="col-md-1 text-center rows-div" >
<i class="fa fa-arrow-right fa-3x" aria-hidden="true"></i>
</div>
<div class="col-md-3" >
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">產品驗證</span> </div>
<!--Image-->
</div>
<div class="item-box-blog-body">
<div class="notice notice-lg notice-danger">
<strong>LOT A</strong> <i class="fa fa-question-circle fa-lg text-danger" aria-hidden="true"></i>
<div class="desc">
</div>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
</div>
</div>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
<div class="carousel-item ">
<div class="row">
<div class="col-md-4" >
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
<div class="col-md-4" >
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
<div class="col-md-4" >
<div class="item-box-blog">
<div class="item-box-blog-image">
<!--Date-->
<div class="item-box-blog-date bg-blue-ui white"> <span class="mon">Augu 01</span> </div>
<!--Image-->
<figure> <img alt="" src="https://cdn.pixabay.com/photo/2017/02/08/14/25/computer-2048983_960_720.jpg"> </figure>
</div>
<div class="item-box-blog-body">
<!--Heading-->
<div class="item-box-blog-heading">
<a href="#" tabindex="0">
<h5>News Title</h5>
</a>
</div>
<!--Data-->
<div class="item-box-blog-data" style="padding: px 15px;">
<p><i class="fa fa-user-o"></i> Admin, <i class="fa fa-comments-o"></i> Comments(3)</p>
</div>
<!--Text-->
<div class="item-box-blog-text">
<p>Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, adipiscing. Lorem ipsum dolor sit amet, consectetuer adipiscing. Lorem ipsum dolor.</p>
</div>
<div class="mt"> <a href="#" tabindex="0" class="btn bg-blue-ui white read">read more</a> </div>
<!--Read More Button-->
</div>
</div>
</div>
</div>
<!--.row-->
</div>
<!--.item-->
</div>
<!--.carousel-inner-->
</div>
<!--.Carousel-->
</div>
</div>
</div>
</div>
.cta-100 {
margin-top: 100px;
padding-left: 8%;
padding-top: 7%;
}
.col-md-4{
padding-bottom:20px;
}
.white {
color: #fff !important;
}
.mt{float: left;margin-top: -20px;padding-top: 20px;}
.bg-blue-ui {
background-color: #708198 !important;
}
figure img{width:300px;}
#blogCarousel {
padding-bottom: 100px;
}
.blog .carousel-indicators {
left: 0;
top: -50px;
height: 50%;
}
/* The colour of the indicators */
.blog .carousel-indicators li {
background: #708198;
border-radius: 50%;
width: 15px;
height: 15px;
}
.blog .carousel-indicators .active {
background: #0fc9af;
}
.item-carousel-blog-block {
outline: medium none;
padding: 15px;
}
.item-box-blog {
border: 1px solid #dadada;
text-align: center;
z-index: 4;
padding: 20px;
min-height:200px;
}
.rows-div {
height:200px;
}
.rows-div i{
margin-top:75px;
vertical-align: middle;
}
.item-box-blog-image {
position: relative;
}
.item-box-blog-image figure img {
width: 100%;
height: auto;
}
.item-box-blog-date {
position: absolute;
z-index: 5;
padding: 4px 20px;
top: -20px;
right: 8px;
background-color: #41cb52;
}
.item-box-blog-date span {
color: #fff;
display: block;
text-align: center;
line-height: 1.2;
}
.item-box-blog-date span.mon {
font-size: 18px;
}
.item-box-blog-date span.day {
font-size: 16px;
}
.item-box-blog-body {
padding: 10px;
}
.item-heading-blog a h5 {
margin: 0;
line-height: 1;
text-decoration:none;
transition: color 0.3s;
}
.item-box-blog-heading a {
text-decoration: none;
}
.item-box-blog-data p {
font-size: 13px;
}
.item-box-blog-data p i {
font-size: 12px;
}
.item-box-blog-text {
max-height: 100px;
overflow: hidden;
}
.mt-10 {
float: left;
margin-top: -10px;
padding-top: 10px;
}
.btn.bg-blue-ui.white.read {
cursor: pointer;
padding: 4px 20px;
float: left;
margin-top: 10px;
}
.btn.bg-blue-ui.white.read:hover {
box-shadow: 0px 5px 15px inset #4d5f77;
}
.notice:first-child{
margin-top:10px;
}
.notice {
padding: 15px;
background-color: #CCC7C7;
border-left: 15px solid #7f7f84;
margin-bottom: 10px;
-webkit-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
box-shadow: 0 5px 8px -6px rgba(0,0,0,.2);
}
.notice-sm {
padding: 10px;
font-size: 80%;
}
.notice-lg {
padding: 35px;
font-size: large;
}
.notice-success {
border-color: #80D651;
}
.notice-success>strong {
/*color: #80D651;*/
}
.notice-info {
border-color: #45ABCD;
}
.notice-info>strong {
color: #45ABCD;
}
.notice-warning {
border-color: #FEAF20;
}
.notice-warning>strong {
color: #FEAF20;
}
.notice-danger {
border-color: #d73814;
}
.notice-danger>strong {
/*color: #d73814;*/
}
.notice>.desc{
display:none;
}
.readMore{
cursor:pointer;
}
