<a target="_blank" href="https://www.behance.net/doonnnx">
<section class="slider">
  <div class="flexslider">
    <ul class="slides">
      <li>
  	    	   <img src="https://s25.postimg.org/ixkuf0yfz/slide01.jpg" />
           <div class="flex-caption">
             <span class="date">Thursday, July 16, 2015</span>
             <h1>Adventurer Cheesecake Brownie</h1>
             <p>Eu solum mazim sit, elitr utroque at vim. An nam vide solet saepe, eam in erant equidem omittantur. Brute postulant ocurreret sed cu, id eum malis saperet argumentum, adhuc everti ad mei.
</p>
           </div>
           <div class="card-outmore">
              <h5>Read more</h5>
              <i id="outmore-icon" class="fa fa-angle-right"></i>
           </div>
  	     		</li>
  	    		<li>
  	    	   <img src="https://s25.postimg.org/6k80848rj/slide02.jpg" />
         <div class="flex-caption">
           <span class="date">Thursday, July 16, 2015</span>
           <h1>Lorem ipsum dolor sit amet at sed essent maiorum</h1>
           <p>Eu solum mazim sit, elitr utroque at vim. An nam vide solet saepe, eam in erant equidem omittantur. Brute postulant ocurreret sed cu, id eum malis saperet argumentum, adhuc everti ad mei. Intellegat moderatius voluptatibus ad mei.</p>
         </div>
         <div class="card-outmore">
              <h5>Read more</h5>
              <i id="outmore-icon" class="fa fa-angle-right"></i>
          </div>
  	    		</li>
  	    		<li>
  	    	   <img src="https://s25.postimg.org/f3re5vh3z/slide03.jpg" />
         <div class="flex-caption">
           <span class="date">Thursday, July 16, 2015</span>
           <h1>Gubergren rationibus sea at etiam nostrud reprimique ne vim</h1>
           <p>Eu solum mazim sit, elitr utroque at vim. An nam vide solet saepe, eam in erant equidem omittantur. Brute postulant ocurreret sed cu, id eum malis saperet argumentum, adhuc everti ad mei. Intellegat moderatius voluptatibus ad mei.</p>
         </div>
         <div class="card-outmore">
              <h5>Read more</h5>
              <i id="outmore-icon" class="fa fa-angle-right"></i>
         </div>
  	    		</li>
     </ul>
    </div>
 </section>
</a>

body {
  background: rgba(94,190,235,1);
  font-family: 'Open Sans', sans-serif;
  color: #222;
}

a {
  color: currentColor;
  text-decoration: none;
}

p {
  font-size: 14px;
  line-height: 19px;
}

.flex-caption {
  position: relative;
  background: #fff;
  color: #333;
  max-width: 310px;
  display: table;
  padding: 30px;
  border-radius: 4px;
}

.flex-caption p {
  color: #777;
}

li.css a {
      border-radius: 0;
}

.flex-viewport {
  max-height: 450px;
  max-width: 800px;
}

section.slider {
  width: 800px;
  margin: 5% auto;
}

.flexslider .slides img {
  height: auto;
  max-width: 490px;
  border-radius: 4px 0px 0px 4px;
  float: left;
}

.flexslider {
  border: 0px solid #ffffff;
  box-shadow: 0 1px 30px rgba(0,0,0,.4);
  transition: 400ms ease;
}

span.date {
  font-size: 11px;
}

.flex-control-nav {
  bottom: 5px;
}

.flex-control-paging li a {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.flex-control-paging li a:hover {
  background: #4183D7;
}

.flex-control-paging li a.flex-active {
  background: #4183D7;
}

.flex-control-nav {
  text-align: left;
  margin-left: 20px;
}

.flexslider .slides > li {
  position: relative;
}

.card-outmore {
  padding: 10px 30px 10px 30px;
  border-radius: 0px 0px 4px 0px;
  border-top: 1px solid #e0e0e0;
  background: #efefef;
  color: #222;
  display: inline-table;
  width: 100%;
  max-width: 310px;
  transition: 400ms ease;
  position: absolute;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
}
.card-outmore h5 {
  float: left;
  margin: 0px;
}
.card-outmore i {
  float: right;
}
#outmore-icon {
  border:1px solid ;
  padding: 1px 6px;
  border-radius: 50em;
}

.flex-direction-nav a:before {
  font-family: "FontAwesome";
  font-size: 38px;
  display: inline-block;
  content: '\f104';
  color: #fff;
}

.flex-direction-nav a.flex-next:before {
  content: '\f105';
  color: #333;
}

a:hover .card-outmore {
  background: #2C3E50;
  color: #fff;
}

a:hover .flexslider {
  box-shadow: 0 10px 50px rgba(0,0,0,.6);
}

$(function(){
      SyntaxHighlighter.all();
    });
    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });