full-screen responsive scrolling page

full-screen-responsive-scrolling-page.markdown

full-screen responsive scrolling page

A Pen by khuongyolo on CodePen.

License.

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="fullpage">
  <div class="section" id="section1">
    <div class="section-content">
      <h1><i class="fa fa-check-circle-o"></i></h1>
      <h1>Welcome to My SITE</h1>
    </div>
  </div>
  <div class="section" id="section2">section2</div>
  <div class="section" id="section3">
    <div class="slide" id="slide1"> Slide 1 </div>
    <div class="slide" id="slide2"> Slide 2 </div>
    <div class="slide" id="slide3"> Slide 3 </div>
    <div class="slide" id="slide4"> Slide 4 </div>
  </div>
  <div class="section" id="section4">section4</div>
</div>

script.js

$(document).ready(function() {
    $('#fullpage').fullpage({
      navigation: true,
      navigationPosition: 'right',
      navigationTooltips: ['section1', 'section2','section3','section4',],
      showActiveTooltip: true,
      slidesNavigation: true,
        slidesNavPosition: 'bottom',
      controlArrows:false,
    });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.js"></script>

style.css

#section1{
background-color:#0FF; 
}
.section-content{
/*border:1px solid #F00;*/
  width:80%;
  margin:0 auto;
  text-align:center;
}
h1{
  margin:0;
  color:#333;
}
h1 i.fa{
font-size:3em;
color:#FFF;
transition:all 0.3s ease-in-out;
}
i.fa:hover{
color:#f00;
cursor:pointer;
transform:scale(1.2) rotate(10deg);
}  
#section2{
background-color:#0F0; 
}
#section3{
background-color:#0ff; 
}
.slide{
background-size:cover;
  background-position:center;
}  
#slide1{
background-image:url(http://sites.psu.edu/siowfa15/wp-content/uploads/sites/29639/2015/10/cat.jpg);
}  
#section4{
background-color:#999; 
}
#fp-nav ul li a span {
  background-color: #f00;
}

.fp-slidesNav ul li a span {
  background-color: #fff;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.4/jquery.fullPage.min.css" rel="stylesheet" />