<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header class="banner-content"> <div class="item"> <img src="https://cdn.pixabay.com/photo/2016/03/09/09/22/workplace-1245776_960_720.jpg" alt="images not found"> <div class="cover"> <div class="container"> <div class="header-content"> <div class="line"></div> <h2>Teimagine Digital Experience with</h2> <h1>Start-ups and solutions</h1> <h4>We help entrepreneurs, start-ups and enterprises shape their ideas into products</h4> </div> </div> </div> </div> </header>

.banner-content .item { height: 100vh; position: relative; } .banner-content .item img { width: 100%; height: 100%; object-fit: cover; } .banner-content .item .cover { padding: 75px 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; } .banner-content .item .cover .header-content { position: relative; padding: 56px; overflow: hidden; } .banner-content .item .cover .header-content .line { content: ""; display: inline-block; width: 100%; height: 100%; left: 0; top: 0; position: absolute; border: 9px solid #fff; -webkit-clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%); clip-path: polygon(0 0, 60% 0, 36% 100%, 0 100%); } .banner-content .item .cover .header-content h2 { font-weight: 300; font-size: 35px; color: #fff; } header .item .cover .header-content h1 { font-size: 56px; font-weight: 600; margin: 5px 0 20px; word-spacing: 3px; color: #fff; } .banner-content .item .cover .header-content h4 { font-size: 24px; font-weight: 300; line-height: 36px; color: #fff; } .banner-content .owl-item.active h1 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInDown; animation-delay: 0.3s; } .banner-content .owl-item.active h2 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInDown; animation-delay: 0.3s; } .banner-content .owl-item.active h4 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInUp; animation-delay: 0.3s; } .banner-content .owl-item.active .line { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-name: fadeInLeft; animation-delay: 0.3s; }