Gradient background owl carousel

In this example below you will see how to do a Gradient background owl carousel with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by abulkhoyer69, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright abulkhoyer69 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Gradient background owl carousel</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css'>
<link rel='stylesheet prefetch' href='http:////netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title Here</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- font-awesome -->
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <!-- owl-carousel -->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <!-- style css -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- style css -->
    <link rel="stylesheet" href="assets/css/responsive.css">
</head>

<body>
    <!-- Service section start -->
    <div class="welcome-area">
        <div class="header-area">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="logo">
                        <a href=""><i class="fa fa-home"></i>HR Advisor</a>
                        </div>
                    </div>
                    
                    <div class="col-md-5">
                        <div class="main-menu">
                            <ul>
                                <li><a href="">Home</a></li>
                                <li><a href="">Pages</a></li>
                                <li><a href="">Features</a></li>
                                <li><a href="">Blog</a></li>
                                <li><a href="">Contact Us</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="header-right-content text-right">
                            <a href="" class="header-phone"><i class="fa fa-phone">+434542242423342</i></a>
                            
                            <span class="social-links">
                                <a href=""><i class="fa fa-facebook"></i></a>
                                <a href=""><i class="fa fa-twitter"></i></a>
                                <a href=""><i class="fa fa-google-plus"></i></a>
                            </span>
                            
                            <span class="search-icon"><i class="fa fa-serach"></i></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="homepage-slides">
                        <div class="single-slide-item slide-bg-1">
                            <div class="slide-inner">
                               <div class="slide-text">
                                   <h4>Lorem ipsum dolor.</h4>
                                   <h2>Lorem ipsum <br/> dolor sit amet.</h2>
                                   <a href="" class="boxed-btn">More info</a>
                               </div>
                            </div>
                        </div>
                           
                        <div class="single-slide-item slide-bg-2">
                            <div class="slide-inner">
                               <div class="slide-text">
                                   <h4>Lorem ipsum dolor.</h4>
                                   <h2>Lorem ipsum <br/> dolor sit amet.</h2>
                                   <a href="" class="boxed-btn">More info</a>
                               </div>
                            </div>
                        </div>
                           
                        <div class="single-slide-item slide-bg-3">
                            <div class="slide-inner">
                               <div class="slide-text">
                                   <h4>Lorem ipsum dolor.</h4>
                                   <h2>Lorem ipsum <br/> dolor sit amet.</h2>
                                   <a href="" class="boxed-btn">More info</a>
                               </div>
                            </div>     
                        </div>
                          
                           <div class="single-slide-item slide-bg-4">
                            <div class="slide-inner">
                               <div class="slide-text">
                                   <h4>Lorem ipsum dolor.</h4>
                                   <h2>Lorem ipsum <br/> dolor sit amet.</h2>
                                   <a href="" class="boxed-btn">More info</a>
                               </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- service section end  -->
    <!-- jquery core -->
    <script src="assets/js/jquery.js"></script>
    <!-- bootstrap js -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- owl carousel -->
    <script src="assets/js/owl.carousel.min.js"></script>
    <!-- main js -->
    <script src="assets/js/main.js"></script>
</body>

</html>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/abulkhoyer69/gradient-background-owl-carousel-qXbpVM */
/* Base CSS */

a:focus {
    outline: 0 solid;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
}

html,
body {
    height: 100%
}

body {}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

.section-padding {
    padding: 80px 0;
}

.slide-bg-1 {
    background-image: url(http://faker.im/800x800)
}

.slide-bg-2 {
    background-image: url(http://faker.im/800x800)
}

.slide-bg-3 {
    background-image: url(http://faker.im/800x800)
}

.boxed-btn, .welcome-area:after {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#005a98+0,0077aa+50,0096bd+100 */
    background: #005a98;
    /* Old browsers */
    background: -moz-linear-gradient(top, #005a98 0%, #0077aa 50%, #0096bd 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #005a98 0%, #0077aa 50%, #0096bd 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #005a98 0%, #0077aa 50%, #0096bd 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005a98', endColorstr='#0096bd', GradientType=0);
    /* IE6-9 */
}

.welcome-area {
    position: relative;
    z-index: 1;
    padding-bottom: 100px;
}

.welcome-area:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 65%;
    height: 100%;
    content: "";
    z-index: -1;
}

.logo a, .main-menu a {
    color: #fff;
}

.logo {
    font-size: 28px;
    text-transform: uppercase;
    font-weight: 700;
    padding-top: 9px;
}

.main-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-menu li {
    display: inline-block;
    position: relative;
}

.main-menu li a {
    display: block;
    padding: 18px 17px;
    text-transform: uppercase;
    font-size: 12px;
}

.header-right-content {
    color: #333;
}

.social-links {
    display: inline-block;
    margin-right: 50px;
    border: 1px solid #e8e8e8;
    padding-left: 20px;
    margin-left: 20px;
}

.social-links a {
    font-size: 14px;
    display: inline-block;
    padding: 0 4px;
}

.header-right-content {
    padding-top: 16px;
}

.header-area {
    padding: 30px 0;
}

.single-slide-item {
    height: 500px;
    background-size: cover;
    background-position: center;
    background-color: #fff;
    display: table;
    width: 100%;
}

.slide-inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.slide-text {
    max-width: 700px;
    color: #fff;
    padding: 130px;
}

.slide-text h4 {
    color: #0086fb;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 9px;
}

.slide-text h2 {
    color: #333;
    font-size: 50px;
    font-weight: 400;
    margin-bottom: 50px;
}

.boxed-btn {
    text-transform: uppercase;
    font-size: 12px;
    padding: 18px 40px;
    display: inline-block;
    color: #fff;
}

/*Downloaded from https://www.codeseek.co/abulkhoyer69/gradient-background-owl-carousel-qXbpVM */
$(document).ready(function($){

	$(".homepage-slides").owlCarousel({
		items:1,
		loop:true,
		loop:true,
		nav:true,
		navText:['<i class="fa fa-long-arrow-left"></i>', '<i class="fa fa-long-arrow-right"></i>']
  	});

});

Comments