Pure CSS One Page Scroll Effect/Pure CSS one page vertical navigation

Hi all,
The smooth and fullscreen one page scroll effect for your single page is very attractive web application in HTML and CSS. There we use pure CSS and HTML. No need to apply javascript or jquery files.
Table Of Content
Pure HTML
Pure CSS
HTML
The HTML helps to specify the page content for website. It’s very important part in website.

  

    
    
    
    
    
    

      
        

          
Section 1
        
      
      
        

          
Section 2
        
      
      
        

          
Section 3
  
        
      
      
        

          
Section 4
        
      
	  
        

          
Section 5
        
      
    
  

CSS

The CSS helps to styling HTML page.

.main_div {
  width: 100vw;
  height: 100vh;
  background: red;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.main_div form {
  box-sizing: border-box;
  text-align: center;
  padding: 22px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.main_div form input {
  height: 0;
  margin: 12px 0;
  z-index: 1;
}

.main_div form input:checked {
  outline: 0;
  border: 0;
}

.main_div form input:before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.81);
  border-radius: 11px;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.main_div form input:checked:before { background-color: white; }

.main_div form input:after {
  content: "" attr(title) "";
  position: relative;
  left: 30px;
  opacity: 0;
  color: white;
  font-size: 9px;
  display: block;
  min-width: 80px;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}

.main_div form input:checked:after {
  opacity: 1;
  left: 20px;
}
.main_div form input:hover:after:not(label) {
 opacity: 1;
}

.main_div form input:nth-of-type(1):checked ~ .labels label {
  -webkit-transform: translateY(-0%);
  transform: translateY(-0%);
}

.main_div form input:nth-of-type(2):checked ~ .labels label {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.main_div form input:nth-of-type(3):checked ~ .labels label {
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
}

.main_div form input:nth-of-type(4):checked ~ .labels label {
  -webkit-transform: translateY(-300%);
  transform: translateY(-300%);
}

.main_div form input:nth-of-type(5):checked ~ .labels label {
  -webkit-transform: translateY(-400%);
  transform: translateY(-400%);
}

.main_div form input:nth-of-type(6):checked ~ .labels label {
  -webkit-transform: translateY(-500%);
  transform: translateY(-500%);
}

.main_div form input:nth-of-type(7):checked ~ .labels label {
  -webkit-transform: translateY(-600%);
  transform: translateY(-600%);
}

.main_div form .labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.main_div form .labels label {
  min-width: 100vw;
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #2B2B38;
  z-index: 0;
  -webkit-transition: all 0.75s cubic-bezier(0.75, 0.25, 0, 1.05);
  transition: all 0.75s cubic-bezier(0.75, 0.25, 0, 1.05);
}

.main_div form .labels label:nth-child(odd) {
  background-color: #F5004F;
  color: white !important;
}

Full Code

  

    
    
    
    
    
    

      
        

          
Section 1
        
      
      
        

          
Section 2
        
      
      
        

          
Section 3
  
        
      
      
        

          
Section 4
        
      
	  
        

          
Section 5
        
      
    
  

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.