"Bootstrap Timeline!"
Bootstrap 3.0.0 Snippet by kjuvekar

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="page-header"> <h1 id="timeline">Timeline</h1> </div> <ul class="timeline"> <li > <div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title"><a href="http://digitalmarketing.suvenconsultants.com/">Google Certification in Digital Marketing</a></h4> <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11 hours ago via Twitter</small></p> </div> <div class="timeline-body"> <p>The world is now online. This has made digital marketing channels and social media the most widespread, interactive and essential of all modern marketing tools. Any effective marketing campaign will include them in its strategy. We believe that Digital Marketing is now the most important part of the marketing mix. It has grown rapidly in the past few years as more and more businesses are realizing the importance of a good online presence. Digital Marketing includes many advertising channels including SEO, email marketing, social Media marketing, pay per click advertising , Google Adwords, mobile marketing. (Discover More....)</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title"><a href="http://monster.suvenconsultants.com/">Web Training</a></h4> </div> <div class="timeline-body"> <p>The swelling wave of e-Commerce dominance fueling the need for organizations to establish their online presence has led to the emergence of Web Development as an important organizational function. More and more organizations are recruiting internal Web Dev teams or are employing external agencies to dish out professional and functional websites for them. To fulfill industry requirements we train on most needed Web Development Technologies (in short called WT). WT is all about the HTML5, CSS, Javascript, Python , PHP & MySQL ,JQuery etc. WT includes the core concept, methods and libraries. You will be able to create the cross platform hybrid mobile applications as well with these technologies.(Discover More....)</p> </div> </li> <li> <div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title"><a href="http://android.suvenconsultants.com/">Android Training</a></h4> </div> <div class="timeline-body"> <p>The future is bright, but it not just about development anymore. Android apps does not need many people to develop unlike many enterprise products. Any good individual with top skills with Android SDK & API, can develop it. With this comes the risk of being a cog in the wheel - when you are in a app development team. After you release the app, what will you do. Unless you develop many apps, you will not learn enough to be an awesome Android developer. So, apart from being an android app developer, you need to start learning about the ecosystem. Smartphones & mobile devices have introduced the whole new dimension to the business, so "Mobility" of the business has become very essential in order to connect to your customers effectively. Android App Development in India is an administration that no company can ignore. The Android application development sees high return on investment. Using Android immensely reduces the development cycle. And their development tools are easy to use.(Discover More....)</p> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title"><a href="http://ocpjp.suvenconsultants.com/">Java Training</a></h4> </div> <div class="timeline-body"> <p>When we talk of programming languages and technologies, Java is the most popular platform, which is used to develop several applications for the systems as well as embedded devices like mobile, laptops, tablets and many more. It is an object oriented programming language and has a simple object model, as it has derived from C and C++. It provides a virtual machine, which is accumulated with byte-code and can run on any system. JAVA is a great learning language because you can learn all of the principles of Object Oriented Programming without the headaches of manual memory management. I'd say start your adventure with JAVA and see where it takes you. It would be time best utilized. The scope of Java is from the smallest embedded systems, like Java ME and Android, to the largest clusters and Big Data systems.(Discover More....)</p> </div> </div> </li> <li> <div class="timeline-badge info"><i class="glyphicon glyphicon-floppy-disk"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title"><a href="http://db.suvenconsultants.com/">Database Training</a></h4> </div> <div class="timeline-body"> <p>The scope of Oracle is in abundance. Most of the Databases that we use are of Oracle. Under database training we train on SQL and PL/SQL. SQL is used across all databases and is useful and necessary in every project that needs to store data (i.e. 99% of all). PL/SQL is a niche programming language used for writing code inside the Oracle database. It fills that role supremely well, but PL/SQL skills are only useful for a small subset of tasks (database logic) and only with a small subset of organizations (large organizations who need and can afford expensive Oracle databases)(Discover More....)</p> <hr> <div class="btn-group"> <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-cog"></i> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> </li> <li class="timeline-inverted"> <div class="timeline-badge success"><i class="glyphicon glyphicon-thumbs-up"></i></div> <div class="timeline-panel"> <div class="timeline-heading"> <h4 class="timeline-title"><a href="http://suvenconsultants.com/recruitment.php">Lateral hiring</a></h4> </div> <div class="timeline-body"> <p>Lateral recruitment is the process of hiring an "expert" for the job that needs to be filled. In some cases, it is a specialized hiring. The expert usually is from another organization which is recognized as the leader in the field whom it would be to your advantage to employ. SCTPL's Team of HR recruiters are best in hiring talent for IT(across Verticals), Learning & Development, Real Estate and E-Commerce. When considering lateral recruitment, the SCTPL's HR team thoroughly investigates the job skills of the potential recruit, schedules interview for short-listed candidates, perform background and reference checks and last but not the least periodic follow up with the prospective Employee and Employer both.(Discover More....)</p> </div> </div> </li> </ul> </div>
.timeline { list-style: none; padding: 20px 0 20px; position: relative; } .timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 50%; margin-left: -1.5px; } .timeline > li { margin-bottom: 20px; position: relative; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li:before, .timeline > li:after { content: " "; display: table; } .timeline > li:after { clear: both; } .timeline > li > .timeline-panel { width: 46%; float: left; border: 1px solid #d4d4d4; border-radius: 2px; padding: 20px; position: relative; -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); } .timeline > li > .timeline-panel:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; } .timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " "; } .timeline > li > .timeline-badge { color: #fff; width: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 50%; margin-left: -25px; background-color: #999999; z-index: 100; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } .timeline > li.timeline-inverted > .timeline-panel { float: right; } .timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .timeline-badge.primary { background-color: #2e6da4 !important; } .timeline-badge.success { background-color: #3f903f !important; } .timeline-badge.warning { background-color: #f0ad4e !important; } .timeline-badge.danger { background-color: #d9534f !important; } .timeline-badge.info { background-color: #5bc0de !important; } .timeline-title { margin-top: 0; color: inherit; } .timeline-body > p, .timeline-body > ul { margin-bottom: 0; } .timeline-body > p + p { margin-top: 5px; }

Related: See More

Questions / Comments: