Split layout for HTML screen, content below not visible - html

Question

I am trying to create a Split Layout using https://tympanus.net/codrops/2013/10/25/split-layout/
However, I am unable to see the contents below the split view. I am able to scroll but cannot see contents of element id "services". I am not posting the CSS in order to avoid making it readable. The CSS can be found on the link above. Thank you.
<div id="splitlayout" class="splitlayout">
<div class="intro">
<div class="side side-left">
<header class="codropsheader clearfix">
<span>Blueprint <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span></span>
<h1>Split Layout</h1>
<nav>
<span>Previous Blueprint</span>
<!--a href="" class="bp-icon bp-icon-next" data-info="next Blueprint"><span>Next Blueprint</span></a-->
<span>back to the Codrops article</span>
<span>Go to the archive</span>
</nav>
<div class="demos">
<a class="current" href="index.html">Effect 1</a>
Effect 2
</div>
</header>
<div class="intro-content">
<div class="image-container">
<img class="img-fluid" src ={% static "images/teacher-4.png" %} alt="alternative">
</div>
<h1><span>Toby Blue </span><span>Web Designer</span></h1>
</div>
<div class="overlay"></div>
</div>
<div class="side side-right">
<div class="intro-content">
<div class="image-container">
<img class="img-fluid" src ={% static "images/student-2.png" %} alt="alternative">
</div>
<h1><span>Amy White </span><span>Web Developer</span></h1>
</div>
<div class="overlay"></div>
</div>
</div><!-- /intro -->
<div class="page page-right">
<div class="page-inner">
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</div><!-- /page-inner -->
</div><!-- /page-right -->
<div class="page page-left">
<div class="page-inner">
<section>
</section>
<section>
</section>
<section>
</section>
<section>
</section>
</div><!-- /page-inner -->
</div><!-- /page-left -->
→
←
</div><!-- /splitlayout -->
<!-- Services -->
<div id="services" class="cards-1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Create an eQuiz and schedule it in less than 1 minute.</h2>
<p class="p-heading p-large">Now all you need are a few clicks and your students get an eQuiz</p>
</div> <!-- end of col -->
</div> <!-- end of row -->
<div class="row">
<div class="col-lg-12">
<!-- Card -->
<div class="card">
<img class="card-image" src ={% static "images/employee.svg" %} alt="alternative">
<div class="card-body">
<h4 class="card-title">Pick Difficulty & Topic</h4>
<p>The questions and quiz comes with a level of difficulty and spread across all chapters </p>
</div>
</div>
<!-- end of card -->
<!-- Card -->
<div class="card">
<img class="card-image" src ={% static "images/quiz-icon.svg" %} alt="alternative">
<div class="card-body">
<h4 class="card-title">Random Q&A</h4>
<p>Students get random questions and options from our huge pool of questions</p>
</div>
</div>
<!-- end of card -->
<!-- Card -->
<div class="card">
<img class="card-image" src ={% static "images/quiz-2.svg" %} alt="alternative">
<div class="card-body">
<h4 class="card-title">Different Options</h4>
<p> You can test students on MCQ, True/False & Essay Type Questions </p>
</div>
</div>
<!-- end of card -->
</div> <!-- end of col -->
</div> <!-- end of row -->
</div> <!-- end of container -->
</div> <!-- end of cards-1 -->
<!-- end of services -->

Answer 1

Change the position: fixed; on .side to position: absolute;.
.side {
position: absolute;
top: 0;
z-index: 100;
width: 50%;
height: 100%;
text-align: center;
-webkit-backface-visibility: hidden;
}
Check it in action on Codepen: https://codepen.io/manaskhandelwal1/pen/YzpWvaZ