New Multi Testimonials Animation in HTML CSS

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8RXoCJjGxp2kcsvYJSTb-VXAM1UEke0aSJIpruGc0QWuF4e3xZWxb50tT6Ir-5AffbD8MC-uGFT722c_HLT-X7XGmS27-Gu6ovgzmquQmPEc_CQW4xvJ1VqYec8XIB_yu_uVAwDs-b8s/s1600-r/post.jpg
Here we Come up with another Pure HTML CSS  Testimonials with animation to show to the blogger sidebar or to use with other Websites purpose. The code uses CSS key frame animation to display multiple Testimonials with fade in fade out animation.

here is live demo

you can see live working Demo on http://acetamritsar.ac.in/

And here is source Code

<style style="text/css">
@media only screen and (max-width: 767px)  {
.new-tension {
width: 100% !important;
float:none  !important ;
}
.container-o {width:100% !important;}
}

.container-o {
    width:48%;
    margin:10px;
       height
      float:left;
background: none repeat scroll 0% 0% #FFF;
box-shadow: 0px 0px 9.75em rgba(0, 0, 0, 0.1) inset;
}


.tsl {
    border:1px solid;
    padding:1em;
}
.tsl-list {
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
    overflow:hidden;
}
.tsl-item {
    position:relative;
    top:0;
    left:100%;
    margin-left:-100%;
    width:100%;
    float:left;
    animation: tsl-fade-in-out 25s infinite;
    animation-play-state:running;
}

.tsl-item + .tsl-item {
    opacity:0;
}

.tsl-item:nth-child(2) {
    animation-delay: -20s;
}
.tsl-item:nth-child(3) {
    animation-delay: -15s;
}
.tsl-item:nth-child(4) {
    animation-delay: -10s;
}
.tsl-item:nth-child(5) {
    animation-delay: -5s;
}

@keyframes tsl-fade-in-out {
    0% {
        opacity:0;
        z-index:2;
    }
    1% {
        opacity:1;
        z-index:2;
    }
    20% {
        opacity:1;
    }
    21% {
        opacity:0;
        z-index:1;
    }
    100% {
        opacity:0;
    }
}

.tsl-list:hover .tsl-item {
    animation-play-state:paused;
}


.container-o p img {
margin-bottom: -80px;
border-radius: 53px;
position: absolute;
}
.tsl-content p {
    margin-top:0;
}
.tsl-meta {
    font: 11px/1.4 Arial;
    text-align:right;
}
.tsl-meta p {
    margin-bottom:0;
}

</style>

<div class="container" style="position:relative;z-index:0;">

<div class="container-o">
   
    <!-- testimonials begin -->
    <div class="tsl">
      <ul class="tsl-list">
        <li class="tsl-item">
          <article class="tsl-content">
                    <p><strong>Testimonials</strong> <br>Thank you so much for giving me this formal opportunity to thank   you and your entire team of CACMS.My experience and organization feedback on your students have been excellent; they come with great enthusiasm, high zeal to learn and grow.Not to forget to mention technically sound basics. I do appreciate and recognize the efforts of your academicians to groom these students.CACMS alumnae and current students;I wish all of them a bright future.</p>
                </article>
          <aside class="tsl-meta">
                    <p><img alt="top engineering college in punjab " style="width:70px;height:60px;border-radius;30px;" src="images/t1.jpg" /><a href="#">Sonal Mehra, </a><br/>
            Interglobe Technologies, Manager </p>
                </aside>
        </li>
        <li class="tsl-item">
          <article class="tsl-content">
                    <p><strong>Testimonials</strong> <br>It has been a wonderful experience at CACMS.I was able to communicate and meet some of the brilliant professionals in making and found that CACMS not only prepare their students academically but empowers them to have a professional approach so they can become successful professionals once they are out in market.I wish all the very best to the entire staff, students of CACMS and look forward to along association.</p>
                </article>
          <aside class="tsl-meta">
                    <p><img alt="best engineering college in amritsar" style="width:70px;height:60px;border-radius;30px;" src="images/t5.jpg" /><a href="#">Vivek Verma</a><br/>
            Finstem India, HR Manager</p>
                </aside>
    </li>
        <li class="tsl-item">
          <article class="tsl-content">
                    <p><strong>Testimonials</strong> <br>CACMS focuses on the overall development of students, both technically and professionally. The college prepares students to keep pace with real world, making their students industry-ready the moment they graduate. Because of the competency, skills and talent of their students, it has been a great pleasure for TT consultants to hire students from CACMS and absorb them into our esteemed organizations. I would like to thank the Training and Placement team for always being supportive.</p>
                </article>
          <aside class="tsl-meta">
                    <p><img alt="top engineering college in punjab " style="width:70px;height:60px;border-radius;30px;" src="images/t2.jpg" /><a href="#">Arushi Bhanot </a><br/>
            Talwar & Talwar Consultants,HR Manager </p>
                </aside>
        </li>

        <li class="tsl-item">
          <article class="tsl-content">
                    <p><strong>Testimonials</strong> <br>“CACMS puts in lot of effort in shaping up their students into confident,competent people with good practical industry knowledge and subjective knowledge as well. In todays competitive environment its important that the students must prepare them selves as per the industry requirements to add an advantage to the company and theirprofile,and CACMS takes an innitiative of developing their students to that level which helps in bridging up the gap between the industry requirements and a freshers expectations.</p>
                </article>
          <aside class="tsl-meta">
                    <p><img alt="best engineering college in amritsar" alt="best engineering college in amritsar" style="width:70px;height:60px;border-radius;30px;" src="images/t4.jpg" /><a href="#">Parampara Thakur</a><br/>
            Harit Dharaa Projects Pvt. Ltd, HR Managert </p>
                </aside>
        </li>
        <li class="tsl-item">
          <article class="tsl-content">
                    <p><strong>Testimonials</strong> <br>Earth infrastructures ltd would like to thank Amritsar college of engineering and technology for
giving us an opportunity to do campus placement in their prestigious college. CACMS believes in helping to develop young professionalism. The team at CACMS is incredibly helpful.Students at CACMS are proactive,young and full of energy. I would like to express my sincere appreciation to Mr.Rakesh Jaitely sir for having us and giving us this opportunity to hire such a wonderful talent.
</p>
                </article>
          <aside class="tsl-meta">
                    <p><img alt="top engineering college in punjab " style="width:70px;height:60px;border-radius;30px;" src="images/t3.jpg" /><a href="#">Aastha Jain</a><br/>Earth Infrastructure, Manager - Operations
             </p>
                </aside>
        </li>
      </ul>
    </div>
    <!-- testimonials end -->
   
</div>

<div class="clearfix"></div>
<div class="clearfix"></div>
</div>


Share this:

ABOUT THE AUTHOR

Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible

0 comments:

Post a Comment