<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);
};
