<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Play with bootstrap</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template jumbotron">
<h1>Ready to fork: Bootstrap 3 pen</h1>
<p class="lead">Fork this pen to start messing with bootstrap 3</p>
<p>Need help? Here you have a link to the official guide: <a id="example" data-toggle="tooltip" data-placement="right" title="JS works just fine" href="https://getbootstrap.com/getting-started/" target="_blank">Getting started with bootstrap</a></p>
</div>
<div class="main">
<div class="row">
<div class="row">
<div class="col-md-12">
<div class="col-md-6 m-50">
<div class="post-left">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit harum ipsum velit quas qui quia atque! Quo id accusamus ex facilis corrupti temporibus vel aliquam autem nisi qui quos voluptate!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero ab dolor veritatis sit pariatur illo debitis esse commodi quam et tenetur nihil ipsam natus sed deleniti consequuntur maxime officia laudantium.</p>
<div class="date left">20</div>
</div>
</div>
<div class="col-md-6 m-50">
<div class="post-right m-100">
<p>Odit architecto adipisci enim non accusamus eveniet nam doloribus suscipit pariatur reprehenderit voluptates iusto deserunt incidunt odio asperiores atque voluptatibus aliquam molestias? Architecto vero soluta hic repellat neque voluptatem corporis?</p>
<div class="date right">25</div>
</div>
</div>
<div class="clearfix"></div>
<div class="col-md-6 clearfix">
<div class="post-left">
<p>Rem recusandae animi ducimus molestias quod quisquam quae vitae maiores maxime at quaerat sapiente qui architecto. Nostrum soluta tenetur praesentium sed numquam molestiae placeat ipsa itaque. Nobis tempore ratione explicabo!</p>
<div class="date left">5</div>
</div>
</div>
<div class="col-md-6">
<div class="post-right m-100">
<p>Et expedita nesciunt saepe vel porro laudantium est labore maxime rerum dolor deleniti inventore odio veritatis delectus eligendi sint tempore repudiandae aliquid autem unde sequi nisi dolorem quia fugiat harum.</p>
<div class="date right">15</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- End of Main -->
</div>
*{
box-sizing: border-box;
}
body {
padding-top: 50px;
background: url('http://uxmas.com/assets/img/timeline-line.png') center repeat-y;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
.post-right.m-100{
margin-top: 100px;
}
.post-left, .post-right{
padding: 20px;
border: 1px solid #999;
margin: 10px 50px;
border-bottom: 8px solid #8cc540;
position: relative;
min-height: 300px;
}
.post-left:after, .post-left:before
{
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.post-left:after {
border-color: rgba(255, 255, 255, 0);
border-left-color: #fff;
border-width: 30px;
margin-top: -30px;
}
.post-left:before {
border-color: rgba(153, 153, 153, 0);
border-left-color: #999;
border-width: 31px;
margin-top: -31px;
}
.post-right:after, .post-right:before
{
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.post-right:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 30px;
margin-top: -30px;
}
.post-right:before {
border-color: rgba(153, 153, 153, 0);
border-right-color: #999;
border-width: 31px;
margin-top: -31px;
}
.date{
position: absolute;
top: 50%;
-webkit-border-radius: 1000px;
-moz-border-radius: 1000px;
border-radius: 1000px;
-moz-box-shadow: 0 0 0 1px #dcdacf;
-webkit-box-shadow: 0 0 0 1px #dcdacf;
box-shadow: 0 0 0 1px #dcdacf;
display: block;
position: absolute;
top: 40%;
height: 50px;
width: 50px;
color: #232323;
padding: 7px 0;
text-align: center;
font-family: "Montserrat", "Helvetica", Arial, sans-serif;
font-weight: 400;
font-size: 0.9em;
line-height: 32px;
background: #dcdacf;
border: 3px solid #ffffff;
}
.date.left{ right: -91px; /* 15 + 50 + 1 + 25 ; col-md + post padding + border + itself's width/2 */}
.date.right{ left: -91px; /* 15 + 50 + 1 + 25 ; col-md + post padding + border + itself's width/2 */}
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
.clear{ clear: both;}
.m-50{
margin: 50px 0;
}
/* inspiration */
/*
http://daverupert.com/about.html
http://uxmas.com/
*/
/* arrow */
/* http://cssarrowplease.com/ */
/* http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/ */