CodePen

HTML

            
              <section class="post">
  <header class="post-header">
    <h2 class="post-title"><a href="#3" title="Part 3" rel="bookmark">Part 3</a></h2>
  </header>
  <section class="f-img">
    <a href="#3" title="Part 3" rel="bookmark">
      <img src="http://williamsenft.com/codepen/shirt-design-3.jpg"  alt="trr-girl" title="trr-girl" />
    </a>
  </section>
  <section class="excert">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod varius porttitor. Donec in risus enim, eu gravida felis. Praesent odio nisl, ornare ac gravida vitae, bibendum ac eros.3
    </p>
  </section>
</section>
<section class="post">
  <header class="post-header">
    <h2 class="post-title"><a href="#2" title="Part 2" rel="bookmark">Part 2</a></h2>
  </header>
  <section class="f-img">
    <a href="#3" title="Part 2" rel="bookmark">
      <img src="http://williamsenft.com/codepen/shirt-design-2.jpg"  alt="trr-girl2" title="trr-girl2" />
    </a>
  </section>
  <section class="excert">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod varius porttitor. Donec in risus enim, eu gravida felis. Praesent odio nisl, ornare ac gravida vitae, bibendum ac eros.2
    </p>
  </section>
</section><section class="post">
  <header class="post-header">
    <h2 class="post-title"><a href="#1" title="Part 1" rel="bookmark">Part 1</a></h2>
  </header>
  <section class="f-img">
    <a href="#3" title="Part 1" rel="bookmark">
      <img src="http://williamsenft.com/codepen/shirt-design-1.jpg"  alt="trr-girl1" title="trr-girl1" />
    </a>
  </section>
  <section class="excert">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In euismod varius porttitor. Donec in risus enim, eu gravida felis. Praesent odio nisl, ornare ac gravida vitae, bibendum ac eros.1
    </p>
  </section>
</section>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              img {max-width:100%; height:auto;}
p {color:#fff; }
section.post {
  width: 98%;
  overflow: hidden;
  margin: 0 auto;
  padding: 1em;
  border-bottom: 4px double #333333;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.99);
  max-height: 320px;
}

section.post header.post-header {
  width: 58%;
  float: right;
  overflow: hidden;
  border-bottom: 1px solid #333333;
}

section.post header.post-header h2.post-title {
  width: 68%;
  float: left;
}

section.post section.f-img {
  width: 40%;
  float: left;
}

section.post section.excert {
  width: 58%;
  float: right;
  margin: 1em 0;
  line-height: 1.5em;
  font-size: 1.2em;
}

@-webkit-keyframes fadeInOut {
  0% {opacity: 1;}
  22% {opacity: 1;}
  33% {opacity: 0;}
  89% {opacity: 0;}
  100% {opacity: 1;}
}

@-moz-keyframes fadeInOut {
  0% {opacity: 1;}
  22% {opacity: 1;}
  33% {opacity: 0;}
  89% {opacity: 0;}
  100% {opacity: 1;}
}

@-o-keyframes fadeInOut {
  0% {opacity: 1;}
  22% {opacity: 1;}
  33% {opacity: 0;}
  89% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fadeInOut {
  0% {opacity: 1;}
  22% {opacity: 1;}
  33% {opacity: 0;}
  89% {opacity: 0;}
  100% {opacity: 1;}
}

/* line 64, ../sass/_loop.scss */
.post {
  -webkit-animation-name: fadeInOut;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 18s;
  -moz-animation-name: fadeInOut;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 18s;
  -o-animation-name: cf4FadeInOut;
  -o-animation-timing-function: linear;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 18s;
  animation-name: fadeInOut;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 18s;
  z-index: 1;
}

.post:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

.post:nth-of-type(2) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}

.post:nth-of-type(3) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................