Altered Tutorial not working properly

[vizz]

I have altered and little simplified this tutorial CSS-ONLY RESPONSIVE LAYOUT WITH SMOOTH TRANSITIONS. But it is not working properly.

Here, radio buttons are used as menus. When I try to put them inside <div></div> it stops smooth scrolling.

• I want to put radio buttons(menus) inside navigation div and inside <ul><li></li></ul>
• I want smooth scrolling using only CSS(CSS3) like used in this tutorial.

My code

HTML

<div class="container">  

    <input type="radio" name="radio-set" checked="checked" id="control1"/>
    <a href="#panel1">Home</a>                    

    <input type="radio" name="radio-set" id="control2"/>
    <a href="#panel2">About</a>                   

    <input type="radio" name="radio-set" id="control3"/>
    <a href="#panel3">Works</a>                   

    <input type="radio" name="radio-set" id="control4"/>
    <a href="#panel4">Contact</a>                


    <div class="scroll">         

        <div class="panel" id="panel1">          
            <h2>Serendipity</h2>
            <p>Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro.</p>
        </div>       

        <div class="panel color" id="panel2">            
            <h2>Happiness</h2>
            <p>Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu.</p>
        </div>       

        <div class="panel" id="panel3">
            <h2>Tranquillity</h2>
            <p>Sint aute occaecat id vice. Poironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut.</p>
        </div>   

        <div class="panel color" id="panel4">
            <h2>Positivity</h2>
            <p>Mixtape fap leggings art party, butcher authentic farm-to-table you probably haven't heard of them do labore cosby sweater.</p>
        </div>

    </div><!-- // scroll -->

</div><!-- // container -->   

CSS

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.scroll, .panel {
    position: relative;
    width: 100%;
    height: 100%;
}

.scroll {
    top: 0;
    left: 0;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;

    /* Let's enforce some hardware acceleration */
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
}

.panel{
    background: #fff;
    overflow: hidden;
} 

#control1:checked ~ .scroll {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -o-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
}
#control2:checked ~ .scroll {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}
#control3:checked ~ .scroll {
    -webkit-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -o-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    transform: translateY(-200%);
}
#control4:checked ~ .scroll {
    -webkit-transform: translateY(-300%);
    -moz-transform: translateY(-300%);
    -o-transform: translateY(-300%);
    -ms-transform: translateY(-300%);
    transform: translateY(-300%);
}

.panel h2 {
    color: #e23a6e;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
    position: absolute;
    font-size: 54px;
    font-weight: 900;
    width: 80%;
    left: 10%;
    text-align: center;
    line-height: 50px;
    margin: -70px 0 0 0;
    padding: 0;
    top: 50%;
    -webkit-backface-visibility: hidden;
}

#control1:checked ~ .scroll #panel1 h2,
#control2:checked ~ .scroll #panel2 h2,
#control3:checked ~ .scroll #panel3 h2,
#control4:checked ~ .scroll #panel4 h2{
    -webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
    animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
    0% { 
        -webkit-transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        -webkit-transform: translateY(0px);  
        opacity: 1;
    }
}

@-moz-keyframes moveDown{
    0% { 
        -moz-transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        -moz-transform: translateY(0px);  
        opacity: 1;
    }
}

@-o-keyframes moveDown{
    0% { 
        -o-transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        -o-transform: translateY(0px);  
        opacity: 1;
    }
}

@-ms-keyframes moveDown{
    0% { 
        -ms-transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        -ms-transform: translateY(0px);  
        opacity: 1;
    }
}

@keyframes moveDown{
    0% { 
        transform: translateY(-40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}

.panel p {
    position: absolute;
    text-align: center;
    font-size: 16px;
    line-height: 22px;
    color: #8b8b8b;
    z-index: 2;
    padding: 0;
    width: 50%;
    left: 25%;
    top: 50%;
    margin: 10px 0 0 0;
    -webkit-backface-visibility: hidden;
}

#control1:checked ~ .scroll #panel1 p,
#control2:checked ~ .scroll #panel2 p,
#control3:checked ~ .scroll #panel3 p,
#control4:checked ~ .scroll #panel4 p{
    -webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    -moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    -o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    -ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
    animation: moveUp 0.6s ease-in-out 0.2s backwards;
}

@-webkit-keyframes moveUp{
    0% { 
        -webkit-transform: translateY(40px); 
        opacity: 0;
    }
    100% { 
        -webkit-transform: translateY(0px);  
        opacity: 1;
    }
}

@-moz-keyframes moveUp{
    0% { 
        -moz-transform: translateY(40px); 
        opacity: 0;
    }
    100% { 
        -moz-transform: translateY(0px);  
        opacity: 1;
    }
}

@-o-keyframes moveUp{
    0% { 
        -o-transform: translateY(40px); 
        opacity: 0;
    }
    100% { 
        -o-transform: translateY(0px);  
        opacity: 1;
    }
}

@-ms-keyframes moveUp{
    0% { 
        -ms-transform: translateY(40px); 
        opacity: 0;
    }
    100% { 
        -ms-transform: translateY(0px);  
        opacity: 1;
    }
}

@keyframes moveUp{
    0% { 
        transform: translateY(40px); 
        opacity: 0;
    }
    100% { 
        transform: translateY(0px);  
        opacity: 1;
    }
}


.container input,
.container a {
  position: fixed;
  top: 0px;
  width: 20%;
  cursor: pointer;
  font-size: 16px;
  height: 34px;
  line-height: 34px;
}

.container input {
  opacity: 0;
  z-index: 1000;
}

.container a {
  z-index: 10;
  font-weight: 700;
  background: #e23a6e;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}

#control1, #control1 + a {
  left: 0;
}

#control2, #control2 + a {
  left: 20%;
}

#control3, #control3 + a {
  left: 40%;
}

#control4, #control4 + a {
  left: 60%;
}

.container input:checked + a,
.container input:checked:hover + a{
  background: #821134;
}

.container input:hover + a{
  background: #AD244F;
}

.container input:hover + a:after {
  border-bottom-color: #AD244F;
}

[LastMitch]

Here, radio buttons are used as menus. When I try to put them inside <div></div> it stops smooth scrolling.

Have you post this on there?

If you have question with this code snippet isn't it much better to post what issue you have on there?

The reason is that the author because this person wrote it and the author would have better solution because the author is familiar with the code.

You can't expect someone Daniweb to do the work.