logo DevAnswer - Developers Answer

Float-in Timeline Cards

8th September

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
section {
  padding: 100px 0;
}

html, body {
  overflow-x: hidden;
}

body {
  font-family: 'Roboto';
  font-size: 17px;
  font-weight: 400;
  background-color: #eee;
}

h1 {
  font-size: 200%;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 400;
}

header {
  background: #3F51B5;
  color: #FFFFFF;
  padding: 150px 0;
}
header p {
  font-family: 'Allura';
  color: rgba(255, 255, 255, 0.2);
  margin-bottom: 0;
  font-size: 60px;
  margin-top: -30px;
}

.timeline {
  position: relative;
}
.timeline::before {
  content: '';
  background: #C5CAE9;
  width: 5px;
  height: 95%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.timeline-item {
  width: 100%;
  margin-bottom: 70px;
}
.timeline-item:nth-child(even) .timeline-content {
  float: right;
  padding: 40px 30px 10px 30px;
}
.timeline-item:nth-child(even) .timeline-content .date {
  right: auto;
  left: 0;
}
.timeline-item:nth-child(even) .timeline-content::after {
  content: '';
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 30px;
  left: -15px;
  border-width: 10px 15px 10px 0;
  border-color: transparent #f5f5f5 transparent transparent;
}
.timeline-item::after {
  content: '';
  display: block;
  clear: both;
}

.timeline-content {
  position: relative;
  width: 45%;
  padding: 10px 30px;
  border-radius: 4px;
  background: #f5f5f5;
  box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
}
.timeline-content::after {
  content: '';
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 30px;
  right: -15px;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #f5f5f5;
}

.timeline-img {
  width: 30px;
  height: 30px;
  background: #3F51B5;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  margin-top: 25px;
  margin-left: -15px;
}

a {
  background: #3F51B5;
  color: #FFFFFF;
  padding: 8px 20px;
  text-transform: uppercase;
  font-size: 14px;
  margin-bottom: 20px;
  margin-top: 10px;
  display: inline-block;
  border-radius: 2px;
  box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
}
a:hover, a:active, a:focus {
  background: #32408f;
  color: #FFFFFF;
  text-decoration: none;
}

.timeline-card {
  padding: 0 !important;
}
.timeline-card p {
  padding: 0 20px;
}
.timeline-card a {
  margin-left: 20px;
}

.timeline-item:nth-child(2) .timeline-img-header {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("http://devanswer.com/codes/files/city-1.jpg") center center no-repeat;
  background-size: cover;
}
.timeline-item:nth-child(5) .timeline-img-header {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("http://devanswer.com/codes/files/city-2.jpg") center center no-repeat;
  background-size: cover;
}
.timeline-item:nth-child(6) .timeline-img-header {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("http://devanswer.com/codes/files/city-3.jpg") center center no-repeat;
  background-size: cover;
}
.timeline-item:nth-child(8) .timeline-img-header {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("http://devanswer.com/codes/files/city-4.jpg") center center no-repeat;
  background-size: cover;
}
.timeline-item:nth-child(10) .timeline-img-header {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("http://devanswer.com/codes/files/city-5.jpg") center center no-repeat;
  background-size: cover;
}
.timeline-item:nth-child(11) .timeline-img-header {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("http://devanswer.com/codes/files/city-6.jpg") center center no-repeat;
  background-size: cover;
}

.timeline-img-header {
  height: 200px;
  position: relative;
  margin-bottom: 20px;
}
.timeline-img-header h2 {
  color: #FFFFFF;
  position: absolute;
  bottom: 5px;
  left: 20px;
}

blockquote {
  margin-top: 30px;
  color: #757575;
  border-left-color: #3F51B5;
  padding: 0 20px;
}

.date {
  background: #FF4081;
  display: inline-block;
  color: #FFFFFF;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

@media screen and (max-width: 768px) {
  .timeline::before {
    left: 50px;
  }
  .timeline .timeline-img {
    left: 50px;
  }
  .timeline .timeline-content {
    max-width: 100%;
    width: auto;
    margin-left: 70px;
  }
  .timeline .timeline-item:nth-child(even) .timeline-content {
    float: none;
  }
  .timeline .timeline-item:nth-child(odd) .timeline-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    width: 0;
    height: 0;
    top: 30px;
    left: -15px;
    border-width: 10px 15px 10px 0;
    border-color: transparent #f5f5f5 transparent transparent;
  }
}
</style>

</head>
<body>
  <section class="timeline">
    <div class="container">
      <div class="timeline-item">
        <div class="timeline-img"></div>

        <div class="timeline-content js--fadeInLeft">
          <h2>Title</h2>
       		<div class="date">1 MAY 2016</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
          <a class="bnt-more" href="#">More</a>
        </div>
      </div> 
      
      <div class="timeline-item">

        <div class="timeline-img"></div>

        <div class="timeline-content timeline-card js--fadeInRight">
        	<div class="timeline-img-header">
          	<h2>Card Title</h2>
        	</div>
        	<div class="date">25 MAY 2016</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
          <a class="bnt-more" href="#">More</a>
        </div>

      </div>   
      
      <div class="timeline-item">

        <div class="timeline-img"></div>

        <div class="timeline-content js--fadeInLeft">
        	<div class="date">3 JUN 2016</div>
          <h2>Quote</h2>
          <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!</blockquote>
        </div>
      </div>   
      
      <div class="timeline-item">

        <div class="timeline-img"></div>

        <div class="timeline-content js--fadeInRight">
        	<h2>Title</h2>
        	<div class="date">22 JUN 2016</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
          <a class="bnt-more" href="#">More</a>
        </div>
      </div>   
      
      <div class="timeline-item">

        <div class="timeline-img"></div>

        <div class="timeline-content timeline-card js--fadeInLeft">
        	<div class="timeline-img-header">
          	<h2>Card Title</h2>
        	</div>
        	<div class="date">10 JULY 2016</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
          <a class="bnt-more" href="#">More</a>
        </div>
      </div>   

      <div class="timeline-item">

        <div class="timeline-img"></div>

        <div class="timeline-content timeline-card js--fadeInRight">
        	<div class="timeline-img-header">
          	<h2>Card Title</h2>
        	</div>
        	<div class="date">30 JULY 2016</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
          <a class="bnt-more" href="#">More</a>
        </div>
      </div>  
      
      <div class="timeline-item">

        <div class="timeline-img"></div>

        <div class="timeline-content js--fadeInLeft">
        	<div class="date">5 AUG 2016</div>
          <h2>Quote</h2>
          <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta explicabo debitis omnis dolor iste fugit totam quasi inventore!</blockquote>
        </div>
      </div>   

      <div class="timeline-item">

        <div class="timeline-img"></div>

        <div class="timeline-content timeline-card js--fadeInRight">
        	<div class="timeline-img-header">
          	<h2>Card Title</h2>
        	</div>
        	<div class="date">19 AUG 2016</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
          <a class="bnt-more" href="#">More</a>
        </div>
      </div>  
      
      <div class="timeline-item">

        <div class="timeline-img"></div>

        <div class="timeline-content js--fadeInLeft">
        	<div class="date">1 SEP 2016</div>
          <h2>Title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime ipsa ratione omnis alias cupiditate saepe atque totam aperiam sed nulla voluptatem recusandae dolor, nostrum excepturi amet in dolores. Alias, ullam.</p>
          <a class="bnt-more" href="#">More</a>
        </div>
      </div>      
    </div>
  </section>
<link href="https://fonts.googleapis.com/css?family=Roboto:100i,300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Allura" rel="stylesheet">
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='http://devanswer.com/codes/files/scrollreveal.min.js'></script>
<div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
<script>
$(function(){

  window.sr = ScrollReveal();

  if ($(window).width() < 768) {

  	if ($('.timeline-content').hasClass('js--fadeInLeft')) {
  		$('.timeline-content').removeClass('js--fadeInLeft').addClass('js--fadeInRight');
  	}

  	sr.reveal('.js--fadeInRight', {
	    origin: 'right',
	    distance: '300px',
	    easing: 'ease-in-out',
	    duration: 800,
	  });

  } else {
  	
  	sr.reveal('.js--fadeInLeft', {
	    origin: 'left',
	    distance: '300px',
		  easing: 'ease-in-out',
	    duration: 800,
	  });

	  sr.reveal('.js--fadeInRight', {
	    origin: 'right',
	    distance: '300px',
	    easing: 'ease-in-out',
	    duration: 800,
	  });

  }
  
  sr.reveal('.js--fadeInLeft', {
	    origin: 'left',
	    distance: '300px',
		  easing: 'ease-in-out',
	    duration: 800,
	  });

	  sr.reveal('.js--fadeInRight', {
	    origin: 'right',
	    distance: '300px',
	    easing: 'ease-in-out',
	    duration: 800,
	  });
});
</script>

</body>
</html>                        



Other Codes