Slider Section

In this example below you will see how to do a Slider Section with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by afasanistan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright afasanistan ©
  • HTML
  • CSS
  • JavaScript
    <section id="home-landing" class="current" style="background-position: 50% 0px;background-image:url(http://squaredesigns.net/prime/prime/img/backgrounds/bg-home-fullscreen.jpg);">
  <div class="home-container text-center op-1" style="bottom: 0rem; opacity: 1;">
    <div class="home-title">
      <div class="wow fadeInDown animated" style="visibility: visible;">
        <h1 class="text-rotate white" style="opacity: 1;"> Launch Your Startup</h1>
        <p class="home-subheading wow fadeInDown animated" style="visibility: visible;">Ultimate landing page saves you tons of time to design your website</p>
      </div>
    </div>
    <div class="home-signin wow fadeInDown animated" style="visibility: visible;">
      <a href="#team" class="btn btn-primary btn-scroll">
            MEET THE TEAM
         </a>
    </div>
  </div>
  <div class="home-bottom">
    <div class="container text-center">
      <div class="move bounce">
        <a href="#features" class="fa fa-chevron-down btn-scroll op-3" style="opacity: 1;">
        </a>
      </div>
    </div>
  </div>
</section>

/*Downloaded from https://www.codeseek.co/afasanistan/slider-section-XKVOgQ */
    @import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900);


/*----- General ----*/
html, 
body {
	height: 100%;
    min-height: 100%;
}
html { -webkit-font-smoothing: antialiased; }
body {
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	color: #12252d;
}

/*----- Home Sections -----*/
#home-parallax-fullscreen{
   background-position: 50% 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	width: 100%;
	height: auto;
	overflow-x: hidden;
	overflow-y: hidden;
	vertical-align: middle;
	z-index: 1;
    display: block;
    position: relative;
}
#home-parallax-fullwidth {
    background-position: center 0%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed; 
	display: table;
	width: 100%; 
	min-height: 400px;
	overflow-x: hidden;
	overflow-y: hidden;
	vertical-align: middle;
	z-index: 1;
}
@media (min-width:768px) {
    #home-parallax-fullwidth {
        height: 600px;
    }
}
@media (max-width:768px) {
    #home-parallax-fullwidth {
        height: 400px;
    }
}
#home-parallax-fullscreen:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;   
}
#home-parallax-fullwidth:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;   
}
.tp-banner li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0!important;   
}  
.tp-banner-video li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2!important;
}
#page-hero {
    height: 400px;
}
#home-landing {
  background-position: center 0%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	display: table;
	width: 100%;
	height: 100%;
	min-height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	vertical-align: middle;
	z-index: 1;
}
#home-parallax-fullscreen {
	display: table;
}   
.home-container {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	z-index: 3;
}
.home-title {
	position: relative;
    text-transform: uppercase;
	color: #1c1c1c;
	z-index: 3;
	margin-left: auto;
	margin-right: auto; 
}
#home-parallax-fullwidth .home-title {
    margin-top: 130px;
}
.home-title h1 {
	letter-spacing: 2px; 
  color:#fff;
}
.home-heading {
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #fff;
}
@media (min-width:992px) {
    .home-heading {
        font-size: 72px;
    }
}
@media (min-width:768px) and (max-width:992px) {
    .home-heading {
        font-size: 55px;
    }
}
@media (max-width:600px) {
    .tp-banner .home-subheading {
        display: none;
    }
}
@media (max-width:500px) { 
    .tp-banner .btn {
        display: none;
    }
}
.home-subheading {
    font-size: 14px;
    letter-spacing: .5px; 
    font-weight: 400;
    color: #fff; 
    z-index:999!important;
}
.tp-banner .home-subheading {
    line-height: 40px!important;
}
.home-button {
	margin-top: 80px;
}
.home-bottom {
	position: absolute;
	z-index: 99;
	width: 100%;
	left: 0;
	bottom: 0;
	text-align: center;
	opacity: 0.9;
} 
.move {
	width: 40px;
	margin-left: auto;
	margin-right: auto;
    margin-bottom: 15px;
}
.bounce {
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -ms-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
.home-bottom a {
	padding-top: 7px;
	padding-bottom: 17px;
	padding-left: 7px;
	padding-right: 7px;
	color: #FFFFFF;	
	
	-webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
} 
.home-bottom a:hover {
    opacity: .9; 
}
.home-bottom a { 
    font-size: 22px;
}



/*Downloaded from https://www.codeseek.co/afasanistan/slider-section-XKVOgQ */
    

Comments