<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<body style="background-color:#F7F7F7">
<div class="col-sm-7 match-height">
<div class="main-box col-xs-12 breath">
</div>
<div class="col-xs-9" style="margin-right: 5px">
<div class="col-xs-12 full-title breath">
</div>
<br>
<div class="col-xs-8 sub-title breath">
</div>
<div class="col-xs-7 sub-title2 breath">
</div>
</div>
<div class="circle col-xs-3 breath">
</div>
</div>
.main-box {
position: relative;
width: 100%;
padding-bottom: 50%;
overflow: hidden;
margin-bottom: 5px;
background-color: #939393;
}
.full-title {
height:46px;
margin-bottom:5px;
margin-left: -15px;
}
.sub-title {
height:32px;
margin-left: -15px;
margin-bottom:5px;
}
.sub-title2 {
height:20px;
margin-left: -15px;
}
.circle {
width: 18%;
height:0;
padding-bottom: 18%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #939393;
float: right;
}
.breath {
-webkit-animation: color_change 3s infinite alternate;
-moz-animation: color_change 3s infinite alternate;
-ms-animation: color_change 3s infinite alternate;
-o-animation: color_change 3s infinite alternate;
animation: color_change 3s infinite alternate;
}
@-webkit-keyframes color_change {
from { background-color: #939393; }
to { background-color: rgba(221,221,221,0.4); }
}
@-moz-keyframes color_change {
from { background-color: #939393; }
to { background-color: rgba(221,221,221,0.4); }
}
@-ms-keyframes color_change {
from { background-color: #939393; }
to { background-color: rgba(221,221,221,0.4); }
}
@-o-keyframes color_change {
from { background-color: #939393; }
to { background-color: rgba(221,221,221,0.4); }
}
@keyframes color_change {
from { background-color: #939393; }
to { background-color: rgba(221,221,221,0.4); }
}
@-webkit-keyframes color_change {
from { background-color: #939393; }
to { background-color: rgba(221,221,221,0.4); }
}
@-moz-keyframes color_change {
from { background-color: #939393; }
to { background-color: rgba(221,221,221,0.4); }
}
@-ms-keyframes color_change {
from { background-color: #939393; }
to { background-color: rgba(221,221,221,0.4); }
}
@-o-keyframes color_change {
from { background-color: #939393; }
to { background-color: rgba(221,221,221,0.4); }
}
@keyframes color_change {
from { background-color: #939393; }
to { background-color: rgba(221,221,221,0.4); }
}
