"animate"
Bootstrap 3.0.0 Snippet by karimsharf12252

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="css/animate.css"> </head> <!--start courses menu--> <div class="what animate bounceInUp "> <div class="container"> <div class="row"> <div class="box"> <div class="col-md-4 holder"> <div class="new holder"> <div class="new color"> <p>NEW</p> </div> <div class="yoga holder"> <h2>YOGA CLASS </h2> </div> <div class="yoga detalis"> <p>Duis convallis vel urna et vestibulum. Suspendisse gravida lacinia tellus in rhoncus. Proin rutrum pulvinar nulla, ut sollicitudin lectus ...</p> </div> <button class="btn-holder yoga" >RED MORE</button> </div> </div> </div> <div class="box"> <div class="col-md-4 holder"> <div class="new holder two"> <div class="new color two"> <p>NEW</p> </div> <div class="yoga holder"> <h2>CROSSFIT CLASS </h2> </div> <div class="yoga detalis"> <p>Duis convallis vel urna et vestibulum. Suspendisse gravida lacinia tellus in rhoncus. Proin rutrum pulvinar nulla, ut sollicitudin lectus ...</p> </div> <button class="btn-holder yoga two" >RED MORE</button> </div> </div> </div> <div class="box"> <div class="col-md-4 holder"> <div class="new holder three"> <div class="new color three"> <p>JOIN US TODAY</p> </div> <div class="yoga holder"> <h2>10% DISCOUNT </h2> </div> <div class="yoga detalis"> <p>Duis convallis vel urna et vestibulum. Suspendisse gravida lacinia tellus in rhoncus. Proin rutrum pulvinar nulla, ut sollicitudin lectus ...</p> </div> <button class="btn-holder yoga three" >RED MORE</button> </div> </div> </div> </div> </div> </div>
.new.color p { color: #00BC63; font-size: 16px; font-family: electrolize, sans-serif; margin-bottom: 2px; } .yoga.holder h2 { font-size: 24px; font-weight: bold; font-family: fira-sans, sans-serif; margin-top: auto; margin-bottom: 22px; color: #fff; } .yoga.detalis p { word-spacing: 2px; } .yoga.detalis p { word-spacing: 2px; color: white; } button.btn-holder.yoga { background: #0A9C3A; color: white; margin-top: 20px; padding: 8px 45px; border: 1px solid white; word-spacing: 2px; letter-spacing: 2px; font-size: 13px; } button.btn-holder.yoga:hover { color: #0A9C3A; background:white; } .new.holder { background: #0A9C3A; padding: 25px 9px 22px 22px; } .yoga.detalis p { word-spacing: 2px; color: rgba(139, 246, 174, 0.82); } /*yoga two*/ .new.holder.two { background: #0071bc; padding: 25px 9px 22px 22px; } button.btn-holder.yoga.two { background: #0071bc; } button.btn-holder.yoga.two:hover { color: #0071bc; background:white; } .new.color.two p { color: #20b0ff; } /*yoga three*/ .new.holder.three{ background:#d4145a; padding: 25px 9px 22px 22px; } button.btn-holder.yoga.three { background:#d4145a; } button.btn-holder.yoga.three:hover { color:#d4145a; background:white; } .new.color.three p { color: #fdabb0; } .col-md-4.holder { padding: 0; position: relative; bottom: 72px; } .what.animate.bounceInUp { -webkit-animation-duration: 5s; -webkit-animation-delay: 0s; -webkit-animation-iteration-count: unset; }

Related: See More

Material Kit React
Glyphicon Animate, Rotation and Flip

Questions / Comments: