<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-name"> <div class="row"> <svg viewBox="0 0 960 300"> <symbol id="s-text"> <text text-anchor="middle" x="50%" y="80%">Vara Prasad </text> </symbol> <g class = "g-ants"> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> <use xlink:href="#s-text" class="text-copy"></use> </g> </svg> </div> </div> </div> <!-- Name Anim Starts --> <div class="row nameanim"> <p>I'm </p> <b> <span1> web designer<br /> Bootstrap Theme Maker<br /> Material Web designer<br /> E-commerce Website Possesser </span1> </b> </div> <!-- Name Anim ends --> <!-- Time Line Starts --> <hr> <div class="container"> <div id="timeline"><div class="row timeline-movement timeline-movement-top"> <div class="timeline-badge timeline-future-movement"> <a href="#"> <span class="glyphicon glyphicon-plus"></span> </a> </div> <div class="timeline-badge timeline-filter-movement"> <a href="#"> <span class="glyphicon glyphicon-time"></span> </a> </div> </div> <div class="row timeline-movement"> <div class="timeline-badge"> <span class="timeline-balloon-date-day">18</span> <span class="timeline-balloon-date-month">JAN</span> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-11"> <div class="timeline-panel credits"> <ul class="timeline-panel-ul"> <li><span class="importo">Mussum ipsum cacilds</span></li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/09/2014</small></p> </li> </ul> </div> </div> </div> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-offset-1 col-sm-11"> <div class="timeline-panel debits"> <ul class="timeline-panel-ul"> <li><span class="importo">Mussum ipsum cacilds</span></li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/09/2014</small></p> </li> </ul> </div> </div> </div> </div> </div> <!--due --> <div class="row timeline-movement"> <div class="timeline-badge"> <span class="timeline-balloon-date-day">13</span> <span class="timeline-balloon-date-month">APR</span> </div> <div class="col-sm-offset-6 col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-offset-1 col-sm-11"> <div class="timeline-panel debits"> <ul class="timeline-panel-ul"> <li><span class="importo">Mussum ipsum cacilds</span></li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/09/2014</small></p> </li> </ul> </div> </div> </div> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-11"> <div class="timeline-panel credits"> <ul class="timeline-panel-ul"> <li><span class="importo">Mussum ipsum cacilds</span></li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/09/2014</small></p> </li> </ul> </div> </div> </div> </div> </div> <div class="row timeline-movement"> <div class="timeline-badge"> <span class="timeline-balloon-date-day">10</span> <span class="timeline-balloon-date-month">APR</span> </div> <div class="col-sm-offset-6 col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-offset-1 col-sm-11"> <div class="timeline-panel debits"> <ul class="timeline-panel-ul"> <li><span class="importo">Mussum ipsum cacilds</span></li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/09/2014</small></p> </li> </ul> </div> </div> </div> </div> <div class="col-sm-6 timeline-item"> <div class="row"> <div class="col-sm-11"> <div class="timeline-panel credits"> <ul class="timeline-panel-ul"> <li><span class="importo">Mussum ipsum cacilds</span></li> <li><span class="causale">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </span> </li> <li><p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11/09/2014</small></p> </li> </ul> </div> </div> </div> </div> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Montserrat); html, body{ height: 100%; font-weight: 800; } body{ background: #fff; font-family: Arial; } svg { display: block; font: 10.5em 'Montserrat'; width: 960px; height: 300px; margin: 0 auto; } .container-name{ background-color: #101928; } .text-copy { fill: none; stroke: white; stroke-dasharray: 6% 29%; stroke-width: 5px; stroke-dashoffset: 0%; animation: stroke-offset 5.5s infinite linear; } .text-copy:nth-child(1){ stroke: #4D163D; animation-delay: -1; } .text-copy:nth-child(2){ stroke: #840037; animation-delay: -2s; } .text-copy:nth-child(3){ stroke: #BD0034; animation-delay: -3s; } .text-copy:nth-child(4){ stroke: #BD0034; animation-delay: -4s; } .text-copy:nth-child(5){ stroke: #FDB731; animation-delay: -5s; } @keyframes stroke-offset{ 100% {stroke-dashoffset: -35%;} } /* Time line Css */ #timeline { list-style: none; position: relative; } #timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 2px; background-color: #2fe283; left: 50%; margin-left: -1.5px; } #timeline .clearFix { clear: both; height: 0; } #timeline .timeline-badge { color: #fff; width: 50px; height: 50px; font-size: 1.2em; text-align: center; position: absolute; top: 20px; left: 50%; margin-left: -25px; background-color: #2fe283; z-index: 100; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; } #timeline .timeline-badge span.timeline-balloon-date-day { font-size: 1.4em; } #timeline .timeline-badge span.timeline-balloon-date-month { font-size: .7em; position: relative; top: -10px; font-weight: 20px; } #timeline .timeline-badge.timeline-filter-movement { background-color: #fff; font-size: 1.7em; height: 35px; margin-left: -18px; width: 35px; top: 40px; } #timeline .timeline-badge.timeline-filter-movement a span { color: #2fe283; font-size: 1.3em; top: -1px; } #timeline .timeline-badge.timeline-future-movement { background-color: #ffffff; height: 35px; width: 35px; font-size: 1.7em; top: -16px; margin-left: -18px; } #timeline .timeline-badge.timeline-future-movement a span { color: #2fe283; font-size: .9em; top: 2px; left: 1px; } #timeline .timeline-movement { border-bottom: dashed 1px #2fe283; position: relative; } #timeline .timeline-movement.timeline-movement-top { height: 60px; } #timeline .timeline-movement .timeline-item { padding: 20px 0; } #timeline .timeline-movement .timeline-item .timeline-panel { border: 1px solid #d4d4d4; border-radius: 3px; background-color: #FFFFFF; color: #666; padding: 10px; 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 .timeline-movement .timeline-item .timeline-panel .timeline-panel-ul { list-style: none; padding: 0; margin: 0; } #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul { text-align: right; } #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li { color: #666; } #timeline .timeline-movement .timeline-item .timeline-panel.credits .timeline-panel-ul li span.importo { color: #468c1f; font-size: 1.3em; } #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul { text-align: left; } #timeline .timeline-movement .timeline-item .timeline-panel.debits .timeline-panel-ul span.importo { color: #e2001a; font-size: 1.3em; } /* Text animation */ { padding: 2em 5em; font: normal 40px/50px Arial, sans-serif; color: #999; } p { height: 50px; float: left; margin-right: 0.3em; } b { float: left; overflow: hidden; position: relative; height: 50px; } span1 { display: inline-block; color: #e74c3c; position: relative; white-space: nowrap; top: 0; left: 0; -webkit-animation: move 5s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 1s; } @keyframes move { 0% { top: 0px; } 20% { top: -50px; } 40% { top: -100px; } 60% { top: -150px; } 80% { top: -200px; } } .nameanim{ align: center; padding: 2em 7em; font: normal 40px/50px Arial, sans-serif; color: #999; }