<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 style = "background-image:url(http://aspostanddesign.com/wp-content/uploads/2013/11/blackLowPolycg-copy.png);"class="container">
<div class="row">
<h2>Time Line</h2>
</div>
<div class="qa-message-list" id="wallmessages">
<div class="message-item">
<div class="message-inner">
<div class="message-head clearfix">
<div class="user-detail">
<h3 class="handle">UT Business Contracts (Extension Project)</h3>
<blockquote>May 2014 - Present <br>
Team Member: Colin Murray(Team Leader), Calvin Aisenbrey, Alex Landaverde, Christ Metcalf
</blockquote>
<div class="post-meta">
</div>
</div>
</div>
</div></div>
<div class="message-item">
<div class="message-inner">
<div class="message-head clearfix">
<div class="user-detail">
<h5 class="handle">A few students continued working on the Business Contracts project over the summer.
We met with the Business Contracts people regularly to make sure certain features
were implemented and to make sure we were up to date with their needs.</h5>
<div class="post-meta">
</div>
</div>
</div>
</div></div>
</div>
</div>
blockquote {
border:none;
}
.message-item {
margin-bottom: 25px;
margin-left: 40px;
position: relative;
color: white;
}
.message-item .message-inner {
background: rgba(255, 255, 255, .1);
border-radius: 3px;
padding: 10px;
position: relative;
}
.message-item .message-inner:before {
color: rgba(0,0,0,0);
content: "";
display: block;
height: 0;
position: absolute;
left: -20px;
top: 6px;
width: 0;
}
.message-item .message-inner:after {
border-right: 10px solid rgba(255, 255, 255, .1);
border-style: solid;
border-width: 10px;
color: rgba(0,0,0,0);
content: "";
display: block;
height: 0;
position: absolute;
left: -20px;
top: 6px;
width: 0;
}
.message-item:before {
background: #fff;
border-radius: 2px;
bottom: -33px;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
content: "";
height: 100%;
left: -30px;
position: absolute;
width: 3px;
}
.message-item:after {
background: -webkit-radial-gradient(#04B404, #088A29 );
border: 2px solid #ccc;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
content: "";
height: 20px;
left: -38px;
position: absolute;
top: 10px;
width: 20px;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.message-item .message-head .avatar {
margin-right: 20px;
}
.message-item .message-head .user-detail {
overflow: hidden;
}
.message-item .message-head .user-detail h5 {
font-size: 16px;
font-weight: bold;
margin: 0;
}
.message-item .message-head .post-meta {
float: left;
padding: 0 15px 0 0;
}
.message-item .message-head .post-meta >div {
color: #333;
font-weight: bold;
text-align: right;
}
.post-meta > div {
color: #777;
font-size: 12px;
line-height: 22px;
}
.message-item .message-head .post-meta >div {
color: #333;
font-weight: bold;
text-align: right;
}
.post-meta > div {
color: #777;
font-size: 12px;
line-height: 22px;
}
img {
min-height: 40px;
max-height: 40px;
}
