CodePen Embed - another tricks

<div data-scroll-container>
  <section class="top" data-scroll-section id="pin2">
    
    <div class="top-description">
      <h1 data-scroll data-scroll-speed="3">An absolute <span class="gold">blank</span> Section!</h1>
      <p class="disappear" data-scroll data-scroll-class="appear" data-scroll-repeat="true">except for the texts atleast</p>
       <svg  width="449" height="157" viewBox="0 0 549 157" fill="none" xmlns="http://www.w3.org/2000/svg" >
<path d="M9.55568 33.819C105.754 212.873 467.187 -29.5023 542.273 101.507" stroke="#FDC65D" stroke-width="5"/>
</svg>
    </div>
  </section>
 
  <section class="bottom" id="pin" data-scroll-section>
    <div class="container">
      <div class="sign-in">
        <h1>Find & hire the <br>best <span class="gold">talent<span></h1>

          <p>Lorem ipsum dolor <span class="grey">sit epicurus in animis nostres <br>inesse notionem ut voluptates</span></p>

        <div class="form">
        <input type="email" placeholder="Your email...">
        <button>join the beta</button>
      </div>
      </div>
          <div class="hires">
            <div class="applicant">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1485921040253-3601b55d50aa?ixlib=rb-1.2.1&auto=format&fit=crop&w=564&q=80" alt="">
              </div>
              <h3 class="applicant-name">Nelson Michael</h3>
              <p class="job-title">front-end developer</p>
            </div>
            
            <div class="applicant">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1554780336-390462301acf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
              </div>
              <h3 class="applicant-name">Cynthia Rice</h3>
              <p class="job-title">Product designer</p>
            </div>
                        <div class="applicant" data-scroll data-scroll-direction="horizontal" data-scroll-speed="3">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
              </div>
              <h3 class="applicant-name">Ahmed Tijani</h3>
              <p class="job-title">flutter developer</p>
            </div>
            
                        <div class="applicant"  data-scroll data-scroll-direction="horizontal" data-scroll-speed="-3">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
              </div>
              <h3 class="applicant-name">Mary Duncan</h3>
              <p class="job-title">UI designer</p>
            </div>
            <div class="applicant"  data-scroll data-scroll-direction="horizontal" data-scroll-speed="3">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1571442463800-1337d7af9d2f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80" alt="">
              </div>
              <h3 class="applicant-name">Joyce jenkins</h3>
              <p class="job-title">Brand designer</p>
            </div>
              
            <div class="applicant"  data-scroll data-scroll-direction="horizontal" data-scroll-speed="-3">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1506956191951-7a88da4435e5?ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" alt="">
              </div>
              <h3 class="applicant-name">Riyah Juhn</h3>
              <p class="job-title">Fullstack developer</p>
            </div>
            
            <div class="applicant"  data-scroll data-scroll-direction="horizontal" data-scroll-speed="3">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1522529599102-193c0d76b5b6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
              </div>
              <h3 class="applicant-name">Josh helewud</h3>
              <p class="job-title">Web developer</p>
            </div>
            
            <div class="applicant"  data-scroll data-scroll-direction="horizontal" data-scroll-speed="-3">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
              </div>
              <h3 class="applicant-name">Bolu michael</h3>
              <p class="job-title">UI/UX designer</p>
            </div>
            
            <div class="applicant"  data-scroll data-scroll-direction="horizontal" data-scroll-speed="3">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1561055657-b9e0bf0fa360?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
              </div>
              <h3 class="applicant-name">Aro hakeem</h3>
              <p class="job-title">Web developer</p>
            </div>
            
            <div class="applicant"  data-scroll data-scroll-direction="horizontal" data-scroll-speed="-3">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1512413316925-fd4b93f31521?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="">
              </div>
              <h3 class="applicant-name">Hailey adams</h3>
              <p class="job-title">Product manager</p>
            </div>
            
            <div class="applicant"  data-scroll data-scroll-direction="horizontal" data-scroll-speed="-3">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1558266786-828039fddb36?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="">
              </div>
              <h3 class="applicant-name">Favor michael</h3>
              <p class="job-title">Backend developer</p>
            </div>
            
            <div class="applicant"  data-scroll data-scroll-direction="horizontal" data-scroll-speed="3">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1566492031773-4f4e44671857?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="">
              </div>
              <h3 class="applicant-name">Victor ohagwasi</h3>
              <p class="job-title">Designer</p>
            </div>
            
            <div class="applicant" >
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1558224523-1c255516fddf?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="">
              </div>
              <h3 class="applicant-name">Lekan awe</h3>
              <p class="job-title">Python developer</p>
            </div>
            
            <div class="applicant">
              <div class="image-holder">
                <img src="https://images.unsplash.com/photo-1596075780750-81249df16d19?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="">
              </div>
              <h3 class="applicant-name">Mark ruiz</h3>
              <p class="job-title">IOS developer</p>
            </div>
          </div>    
   </div>      
  </section>
</div>

body{
  margin:0;
  padding:0;
  height:100vh;
  background-color:#010101;
  font-family: 'Poppins', sans-serif;
}
.top{
  height:100vh;
  color:#ffffff;
  text-align:center;
}
.top-description{
  position:relative;
  top:30%;
}
.top-description h1{
  font-weight:900;
  font-size:5em;
  margin-bottom:-0.1em;
}
.gold{
  color:#fdc65d;
}
.top-description p, .grey{
  color: #aeaead;
}
.disappear{
   opacity:0;
  transition: opacity 5s;
}
.appear{
  opacity:1;
}
.bottom{
  color:white;
}
.container{
  position:relative;
  top:20%;
  width:70%;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
}
.sign-in{
  width:45%;
}
.sign-in h1{
  font-size:3.5em;
}
.form input{
  width:50%;
  margin-right:2em;
  padding:.75em .75em .75em 1em;
  color: #0a0a09;
  background-color:#424242;
  border:none;
  outline:none;
  border-radius:20px;
  font-family: 'Poppins', sans-serif;
  font-weight:600;
  font-size:12px;
}
.form button{
  width:30%;
  padding:.75em .75em .75em 1em;
  color: #010101;
  background-color:#fdc65d;
  border:none;
  outline:none;
  border-radius:20px;
  font-family: 'Poppins', sans-serif;
  font-weight:900;
  font-size:13px;
}
.hires{
  width:33%;
  padding:2em;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}

.applicant{
  width:40%;
  padding:1em;
  background-color:#0a0a09;
  border-radius:15px 30px 15px 15px;
  margin-bottom:1em;
}
.image-holder{
  width:80px;
  height:80px;
  
}
img{
  width:100%;
  height:100%;
  object-fit:cover;
   object-position:50% 50%;
  border-radius:40%;
}

.applicant h3{
  font-size:14px;
  padding-top:4em;
  margin:0;
}

.applicant p{
  font-size:12px;
  margin:0;
  color:#aeaead;
  padding-bottom:1em;
}


/*! locomotive-scroll v3.1.7 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
html.has-scroll-smooth {
  overflow: hidden;
}
html.has-scroll-dragging,
html.has-scroll-dragging * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.has-scroll-smooth body {
  overflow: hidden;
}
.c-scrollbar {
  position: absolute;
  right: 0;
  top: 0;
  width: 11px;
  height: 100vh;
  transform-origin: center right;
  transition: transform 0.3s, opacity 0.3s;
  opacity: 0;
}
.c-scrollbar:hover {
  transform: scaleX(1.45);
}
.c-scrollbar:hover,
.has-scroll-dragging .c-scrollbar,
.has-scroll-scrolling .c-scrollbar {
  opacity: 1;
}
.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fdc65d;

  width: 7px;

  margin: 2px;
  cursor: -webkit-grab;
  cursor: grab;
}
.has-scroll-dragging .c-scrollbar_thumb {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}


const scroller = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

Run Pen

This Pen is owned by King nelson on CodePen.

See more by @D_kingnelson on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.min.js