"Animation Animation-text Animation text Animation-div Animation div Animation-images Animation image"
Bootstrap 4.1.1 Snippet by ishu511

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <body> <section id="name"><h1>AYUSH THAKUR</h1></section> <section id="amintion"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text"> <!--left-animation--> <h1 class="wow wow bounceInLeft" data-wow-duration="3s"" >Amination</h1> <!--fade-animation--> <h2 class="wow wow fadeInUp" data-wow-duration="2s"">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</h2> <!--right-animation--> <a class="wow wow bounceInRight" data-wow-duration="4s"" href="#">Contact US</a> </div> </div> </div> </div> </section> <section id="box"> <div class="container"> <div class="row"> <!--box-1--> <div class="col-md-4"> <div class="box-1 wow wow bounceInRight" data-wow-duration="4s"" > <img src="https://i.pinimg.com/736x/21/23/f3/2123f3668f5149f0d191507ea82fac42.jpg"> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod </h4> <a class="Read more">Read more</a> </div> </div> <!--box-2--> <div class="col-md-4"> <div class="box-1 wow wow bounceInLeft" data-wow-duration="3s"" > <img src="https://www.flowers2bulgaria.com/FLW_StsContFiles/2609954-1-bou14_82_2-poland.jpg"> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</h4> <a class="Read more">Read more</a> </div> </div> <!--box-3--> <div class="col-md-4"> <div class="box-1 wow bounceInUp center" data-wow-duration="2s" data-wow-delay="0s"> <img src="https://img.clasf.in/2017/12/26/loving-nature-of-flowers-is-in-the-hands-of-florist-in-hyderabad-hyderabad-201712260530488949900000.png"> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</h4> <a class="Read more">Read more</a> </div> </div> </div> </div> </section> <!---java___css--> <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script> <script src="js/custome.js"></script> <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js"></script> </body>
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200,300,400,700'); body{font-family: 'Yanone Kaffeesatz', sans-serif;/* IE10+ */ background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #3366FF 100%); /* Mozilla Firefox */ background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #3366FF 100%); /* Opera */ background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #3366FF 100%); /* Webkit (Safari/Chrome 10) */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(100, #3366FF)); /* Webkit (Chrome 11+) */ background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #3366FF 100%); /* W3C Markup */ background-image: linear-gradient(to top, #FFFFFF 0%, #3366FF 100%);} #amintion { width: 100%; padding: 50px 0; } .text { margin-top: 8%; text-align: center; display: block; overflow: hidden; } .text h1 { color: white; font-size: 69px; margin-bottom: 2%; font-weight: 600; } .text h2 { color: white; font-size: 37px; word-spacing: 11px; margin-bottom: 10px; } .text a { background: red; color: white; font-size: 16px; padding: 12px 43px; margin-top: 10px; display: inline-block; border-radius: 6px; font-weight: 400; } /************************box-section***************************************/ #box { margin-bottom: 50px; display: block; overflow: hidden; } .box-1 { overflow: hidden; display: block; box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.6); text-align: center; margin-top: 100px; height: 600px; } .box-1 h4 { margin-top: 21px; font-size: 22px; word-spacing: 8px; } .Read.more { background: red; padding: 13px 0px; color: white !important; margin-top: 20px; display: block; font-size: 20px; cursor: pointer; } /*************************************SECTION-NAME*******************************************/ #name { display: block; overflow: hidden; text-align: center; margin-top: 50px; } #name h1 { color: red; font-size: 48px; font-weight: 600; }
wow = new WOW( { animateClass: 'animated', offset: 100, callback: function(box) { console.log("WOW: animating <" + box.tagName.toLowerCase() + ">") } } ); wow.init(); document.getElementById('moar').onclick = function() { var section = document.createElement('section'); section.className = 'section--purple wow fadeInDown'; this.parentNode.insertBefore(section, this); };

Related: See More


Questions / Comments:

nice

Pushpender (1) - 2 years ago - Reply 2


very nice

Gaurav Sharma (1) - 2 years ago - Reply 1


Thanks

ishu511 (1) - 2 years ago - Reply 1