<!--For our animations to look good, the animated elements need to be able to be scrolled to. For this example I've added dummy content to the top --> <div class="main-container"> <div class="container"> <h1>Slide in from the left </h1> <p>This animation will focus on sliding an element from the left once it enters the view of the user</p> </div> <div class="container"> <h2> Our Testimonials <i class="fa fa-comment"></i></h2> <p> We have worked in the industry for 15 years and have provided services to a wide range of clients.</p> <p>Come and see what our clients are saying about our services. </p> </div> <div class="container cf"> <!-- testimonial one --> <div class="animation-element slide-left testimonial"> <div class="header"> <div class="left"> <img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjVTdZcktRTWhNamM" /> </div> <div class="right"> <h3>Johnathon Richard Smith</h3> <h4>CEO / Manager - Auto Incorporated</h4> </div> </div> <div class="content"><i class="fa fa-quote-left"></i> When I started using their service I was skeptical. They promised me a 300% return on my initial investment. However they came through on their word and now my business is flourishing.. <i class="fa fa-quote-right"></i> </div> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> </div> </div> <!--testimonial two --> <div class="animation-element slide-left testimonial"> <div class="header"> <div class="left"> <img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjV3BseTMtcEU1T2M" /> </div> <div class="right"> <h3>Joanna Hammerlton</h3> <h4>Marketing Manager - Omega Creative</h4> </div> </div> <div class="content"><i class="fa fa-quote-left"></i> Our company first enlisted their services when we had a down-turn in sales and revene. They outlined a series of steps we could take to improve our position and within a year we are making signifcant improvements.. <i class="fa fa-quote-right"></i> </div> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> </div> </div> <!--testimonial three --> <div class="animation-element slide-left testimonial"> <div class="header"> <div class="left"> <img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjTURta0pyMEtoUmc " /> </div> <div class="right"> <h3>Mark Jamerson</h3> <h4>CEO - Generic Business</h4> </div> </div> <div class="content"><i class="fa fa-quote-left"></i> We entered into a 12 month period of service with this company in the hopes to improve our returns. After this period we have a return of double our initial investment.. <i class="fa fa-quote-right"></i> </div> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> </div> <!--testimonial four --> <div class="animation-element slide-left testimonial"> <div class="header"> <div class="left"> <img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjb1dxcGZEYUc0Z3M" /> </div> <div class="right"> <h3>Susan Hilton</h3> <h4>Financial Officer - People Tech</h4> </div> </div> <div class="content"><i class="fa fa-quote-left"></i> Our involvement in this company has been mutually beneficial. We were hoping for slightly higher returns, however the current level of returns are sufficient.. <i class="fa fa-quote-right"></i> </div> <div class="rating"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> <i class="fa fa-star-o"></i> </div> </div> </div>
