"CKAN menu"
Bootstrap 3.3.0 Snippet by xrozix

<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 ----------> <div class="container"> <div class="row"> <div class="col-lg-12"> <h3 class="text-center">The source for knowledge about publishing open data using ckan</h3> <p> We have put tugether a series of courses on how why publish open data, how to do it, how to engage people to come and create fantastic stuff based on your open data. </p> <ul class="timeline"> <li> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/1" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Step One</h4> <h4 class="subheading">Getting started with open data</h4> </div> <div class="timeline-body"> <p class="text-muted"> The getting started courses give you the basics about open data, how to publish and how to prepare data for publication. </p> </div> </div> <div class="line"></div> </li> <li class="timeline-inverted"> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/2" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Step Two</h4> <h4 class="subheading">Working with open data in ckan</h4> </div> <div class="timeline-body"> <p class="text-muted"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="line"></div> </li> <li> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/3" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Step Three</h4> <h4 class="subheading">Visualizing data</h4> </div> <div class="timeline-body"> <p class="text-muted"> When data becomes pretty. </p> </div> </div> <div class="line"></div> </li> <li class="timeline-inverted"> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/4" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Step Three</h4> <h4 class="subheading">Working with private data in ckan</h4> </div> <div class="timeline-body"> <p class="text-muted"> Not all data can be open data. </p> </div> </div> <div class="line"></div> </li> <li> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/5" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Step 4</h4> <h4 class="subheading">Tailoring ckan</h4> </div> <div class="timeline-body"> <p class="text-muted"> Your portal is a part of your internet presence and needs to have the same look as your other websites. ckan extensions give our open data portal more functionality. </p> </div> </div> <div class="line"></div> </li> <li> <div class="timeline-image"> <img class="img-circle img-responsive" src="http://lorempixel.com/250/250/cats/5" alt=""> </div> <div class="timeline-panel"> <div class="timeline-heading"> <h4>Step 5</h4> <h4 class="subheading">CKAN in production</h4> </div> <div class="timeline-body"> <p class="text-muted"> Skalering og sikker drift. Vi går gjennom hvordan CKAN kan settes i produksjon på egen infrastruktur. Hvordan sette opp CKAN på skytjenester som Amazon, Azure og Bluemix med bruk av Docker. </p> </div> </div> </li> </ul> </div> </div> </div>
.timeline { position: relative; padding:4px 0 0 0; margin-top:22px; list-style: none; } .timeline>li:nth-child(even) { position: relative; margin-bottom: 50px; height: 180px; right:-100px; } .timeline>li:nth-child(odd) { position: relative; margin-bottom: 50px; height: 180px; left:-100px; } .timeline>li:before, .timeline>li:after { content: " "; display: table; } .timeline>li:after { clear: both; min-height: 170px; } .timeline > li .timeline-panel { position: relative; float: left; width: 41%; padding: 0 20px 20px 30px; text-align: right; } .timeline>li .timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .timeline>li .timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .timeline>li .timeline-image { z-index: 100; position: absolute; left: 50%; border: 7px solid #3b5998; border-radius: 100%; background-color: #3b5998; box-shadow: 0 0 5px #4582ec; width: 200px; height: 200px; margin-left: -100px; } .timeline>li .timeline-image h4 { margin-top: 12px; font-size: 10px; line-height: 14px; } .timeline>li.timeline-inverted>.timeline-panel { float: right; padding: 0 30px 20px 20px; text-align: left; } .timeline>li.timeline-inverted>.timeline-panel:before { right: auto; left: -15px; border-right-width: 15px; border-left-width: 0; } .timeline>li.timeline-inverted>.timeline-panel:after { right: auto; left: -14px; border-right-width: 14px; border-left-width: 0; } .timeline>li:last-child { margin-bottom: 0; } .timeline .timeline-heading h4 { margin-top:22px; margin-bottom: 4px; padding:0; color: #b3b3b3; } .timeline .timeline-heading h4.subheading { margin:0; padding:0; text-transform: none; font-size:18px; color:#333333; } .timeline .timeline-body>p, .timeline .timeline-body>ul { margin-bottom: 0; color:#808080; } /*Style for even div.line*/ .timeline>li:nth-child(odd) .line:before { content: ""; position: absolute; top: 60px; bottom: 0; left: 690px; width: 4px; height:340px; background-color: #3b5998; -ms-transform: rotate(-44deg); /* IE 9 */ -webkit-transform: rotate(-44deg); /* Safari */ transform: rotate(-44deg); box-shadow: 0 0 5px #4582ec; } /*Style for odd div.line*/ .timeline>li:nth-child(even) .line:before { content: ""; position: absolute; top: 60px; bottom: 0; left: 450px; width: 4px; height:340px; background-color: #3b5998; -ms-transform: rotate(44deg); /* IE 9 */ -webkit-transform: rotate(44deg); /* Safari */ transform: rotate(44deg); box-shadow: 0 0 5px #4582ec; } /* Medium Devices, .visible-md-* */ @media (min-width: 992px) and (max-width: 1199px) { .timeline > li:nth-child(even) { margin-bottom: 0px; min-height: 0px; right: 0px; } .timeline > li:nth-child(odd) { margin-bottom: 0px; min-height: 0px; left: 0px; } .timeline>li:nth-child(even) .timeline-image { left: 0; margin-left: 0px; } .timeline>li:nth-child(odd) .timeline-image { left: 690px; margin-left: 0px; } .timeline > li:nth-child(even) .timeline-panel { width: 76%; padding: 0 0 20px 0px; text-align: left; } .timeline > li:nth-child(odd) .timeline-panel { width: 70%; padding: 0 0 20px 0px; text-align: right; } .timeline > li .line { display: none; } } /* Small Devices, Tablets */ @media (min-width: 768px) and (max-width: 991px) { .timeline > li:nth-child(even) { margin-bottom: 0px; min-height: 0px; right: 0px; } .timeline > li:nth-child(odd) { margin-bottom: 0px; min-height: 0px; left: 0px; } .timeline>li:nth-child(even) .timeline-image { left: 0; margin-left: 0px; } .timeline>li:nth-child(odd) .timeline-image { left: 520px; margin-left: 0px; } .timeline > li:nth-child(even) .timeline-panel { width: 70%; padding: 0 0 20px 0px; text-align: left; } .timeline > li:nth-child(odd) .timeline-panel { width: 70%; padding: 0 0 20px 0px; text-align: right; } .timeline > li .line { display: none; } } /* Custom, iPhone Retina */ @media only screen and (max-width: 767px) { .timeline > li:nth-child(even) { margin-bottom: 0px; min-height: 0px; right: 0px; } .timeline > li:nth-child(odd) { margin-bottom: 0px; min-height: 0px; left: 0px; } .timeline>li .timeline-image { position: static; width: 150px; height: 150px; margin-bottom:0px; } .timeline>li:nth-child(even) .timeline-image { left: 0; margin-left: 0; } .timeline>li:nth-child(odd) .timeline-image { float:right; left: 0px; margin-left:0; } .timeline > li:nth-child(even) .timeline-panel { width: 100%; padding: 0 0 20px 14px; } .timeline > li:nth-child(odd) .timeline-panel { width: 100%; padding: 0 14px 20px 0px; } .timeline > li .line { display: none; } }

Related: See More


Questions / Comments: