<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 ---------->
<section class="welcome-area" id="home">
<!-- Background Shape-->
<div class="background-shape">
<div class="circle1 wow fadeInRightBig" data-wow-duration="4000ms" style="visibility: visible; animation-duration: 4000ms; animation-name: fadeInRightBig;"></div>
<div class="circle2 wow fadeInRightBig" data-wow-duration="4000ms" style="visibility: visible; animation-duration: 4000ms; animation-name: fadeInRightBig;"></div>
<div class="circle3 wow fadeInRightBig" data-wow-duration="4000ms" style="visibility: visible; animation-duration: 4000ms; animation-name: fadeInRightBig;"></div>
<div class="circle4 wow fadeInRightBig" data-wow-duration="4000ms" style="visibility: visible; animation-duration: 4000ms; animation-name: fadeInRightBig;"></div>
</div>
<!-- Background Animation-->
<div class="background-animation">
<div class="star-ani"></div>
<div class="cloud-ani"></div>
<div class="triangle-ani"></div>
<div class="circle-ani"></div>
<div class="box-ani"></div>
</div>
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-between">
<!-- Welcome Content-->
<div class="col-12 col-md-6 col-lg-5">
<div class="welcome-content">
<h2 class="wow fadeInUp" data-wow-duration="1000ms" style="visibility: visible; animation-duration: 1000ms; animation-name: fadeInUp;">Big Creative Agency.</h2>
<p class="mb-4 wow fadeInUp" data-wow-duration="1000ms" data-wow-delay="200ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 200ms; animation-name: fadeInUp;">It's crafted with the latest trend of design & coded with all modern approaches. It's a robust & multi-dimensional usable template.</p><a class="btn saasbox-btn white-btn mt-3 wow fadeInUp" href="#" data-wow-duration="1000ms" data-wow-delay="400ms" style="visibility: visible; animation-duration: 1000ms; animation-delay: 400ms; animation-name: fadeInUp;">More About Us</a>
</div>
</div>
<!-- Welcome Thumb-->
<div class="col-10 col-md-6">
<div class="welcome-thumb hero1 wow fadeInUp" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;"><img src="img/bg-img/hero-3.png" alt=""></div>
</div>
</div>
</div>
</section>
/* Hero CSS */
.welcome-thumb {
position: relative;
z-index: 1;
margin-top: 75px; }
@media only screen and (max-width: 767px) {
.welcome-thumb {
margin-top: 0; } }
.background-animation {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 70%;
height: 100%; }
.background-animation .star-ani {
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
top: 15%;
left: 45%;
z-index: -1;
-webkit-animation: rotateAnimation linear 39s infinite;
animation: rotateAnimation linear 39s infinite; }
.background-animation .star-ani::after {
position: absolute;
content: "\e950";
top: 10%;
left: 10%;
z-index: -1;
border-radius: 50%;
font-family: "LineIcons";
color: rgba(255, 255, 255, 0.26);
font-size: 22px; }
.background-animation .cloud-ani {
position: absolute;
border-radius: 50%;
width: 240px;
height: 240px;
top: 50%;
left: 60%;
z-index: -1;
-webkit-animation: rotateAnimation linear 46s infinite;
animation: rotateAnimation linear 46s infinite; }
.background-animation .cloud-ani::after {
position: absolute;
content: "\e950";
top: 10%;
left: 10%;
z-index: -1;
border-radius: 50%;
font-family: "LineIcons";
color: rgba(255, 255, 255, 0.26);
font-size: 2.5rem; }
.background-animation .circle-ani {
position: absolute;
border-radius: 50%;
-webkit-animation: rotateAnimation linear 34s infinite;
animation: rotateAnimation linear 34s infinite;
width: 180px;
height: 180px;
left: 10%;
top: 10%;
z-index: -1; }
.background-animation .circle-ani::after {
width: 20px;
height: 20px;
position: absolute;
content: "";
top: 10%;
left: 10%;
border: 3px solid rgba(255, 255, 255, 0.2);
z-index: -1;
border-radius: 50%; }
.background-animation .triangle-ani {
position: absolute;
border-radius: 50%;
-webkit-animation: rotateAnimation linear 40s infinite;
animation: rotateAnimation linear 40s infinite;
width: 20%;
height: 20%;
left: 30%;
top: 50%;
z-index: -1; }
.background-animation .triangle-ani::after {
width: 0;
height: 0;
position: absolute;
content: "";
border-top: 14px solid rgba(255, 255, 255, 0.16);
border-bottom: 14px solid transparent;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
z-index: -1; }
.background-animation .box-ani {
position: absolute;
border-radius: 50%;
-webkit-animation: rotateAnimation linear 37s infinite;
animation: rotateAnimation linear 37s infinite;
width: 15%;
height: 18%;
left: 7%;
top: 70%;
z-index: -1; }
.background-animation .box-ani::after {
width: 26px;
height: 26px;
position: absolute;
content: "";
z-index: -1;
background-color: transparent;
border-radius: 4px;
border: 3px solid rgba(255, 255, 255, 0.2); }
@-webkit-keyframes rotateAnimation {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
@keyframes rotateAnimation {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.welcome-area {
position: relative;
z-index: 2;
height: 100vh;
background-color: #0811fb;
overflow: hidden; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.welcome-area {
height: 750px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.welcome-area {
height: 650px; } }
@media only screen and (max-width: 767px) {
.welcome-area {
height: 820px; } }
.welcome-area .background-shape .circle1 {
width: 2200px;
height: 2200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
position: absolute;
z-index: -30;
top: -1100px;
right: -1100px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.welcome-area .background-shape .circle1 {
width: 1700px;
height: 1700px;
top: -850px;
right: -850px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.welcome-area .background-shape .circle1 {
width: 1700px;
height: 1700px;
top: -850px;
right: -850px; } }
@media only screen and (max-width: 767px) {
.welcome-area .background-shape .circle1 {
width: 1700px;
height: 1700px;
top: -850px;
right: -850px; } }
.welcome-area .background-shape .circle2 {
width: 1700px;
height: 1700px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
position: absolute;
z-index: -20;
top: -850px;
right: -850px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.welcome-area .background-shape .circle2 {
width: 1200px;
height: 1200px;
top: -600px;
right: -600px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.welcome-area .background-shape .circle2 {
width: 1200px;
height: 1200px;
top: -600px;
right: -600px; } }
@media only screen and (max-width: 767px) {
.welcome-area .background-shape .circle2 {
width: 1200px;
height: 1200px;
top: -600px;
right: -600px; } }
.welcome-area .background-shape .circle3 {
width: 1200px;
height: 1200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
position: absolute;
z-index: -10;
top: -600px;
right: -600px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.welcome-area .background-shape .circle3 {
width: 700px;
height: 700px;
top: -350px;
right: -350px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.welcome-area .background-shape .circle3 {
width: 700px;
height: 700px;
top: -350px;
right: -350px; } }
@media only screen and (max-width: 767px) {
.welcome-area .background-shape .circle3 {
width: 700px;
height: 700px;
top: -350px;
right: -350px; } }
.welcome-area .background-shape .circle4 {
width: 700px;
height: 700px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
position: absolute;
z-index: -10;
top: -350px;
right: -350px; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.welcome-area .background-shape .circle4 {
width: 200px;
height: 200px;
top: -100px;
right: -100px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.welcome-area .background-shape .circle4 {
width: 200px;
height: 200px;
top: -100px;
right: -100px; } }
@media only screen and (max-width: 767px) {
.welcome-area .background-shape .circle4 {
width: 200px;
height: 200px;
top: -100px;
right: -100px; } }
.welcome-area .welcome-content {
position: relative;
z-index: 1;
margin-top: 75px; }
@media only screen and (max-width: 767px) {
.welcome-area .welcome-content {
margin-top: 60px; } }
.welcome-area .welcome-content h2 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
font-weight: 700;
color: #ffffff; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.welcome-area .welcome-content h2 {
font-size: 2.5rem; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.welcome-area .welcome-content h2 {
font-size: 2rem; } }
@media only screen and (max-width: 767px) {
.welcome-area .welcome-content h2 {
font-size: 1.75rem; } }
.welcome-area .welcome-content p {
font-size: 1.25rem;
color: #ffffff; }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.welcome-area .welcome-content p {
font-size: 1.15rem; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.welcome-area .welcome-content p {
font-size: 1rem; } }
@media only screen and (max-width: 767px) {
.welcome-area .welcome-content p {
font-size: 1rem; } }
