"Untitled"
Bootstrap 4.1.1 Snippet by dkstudio

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

Related: See More


Questions / Comments: