<div data-scroll-container>
  <section data-scroll-section>
    <h4>This is</h4>
    <h1>Studio by interior</h1>
    <div class="container">
      <div class="getting-started">
        <h4>Feel the style</h4>
        <p>We create ergonomic <br>spaces with individual designs.</p>
          <button>Get Started</button>
      </div>
      <div class="image-holder">
        <img src="https://images.unsplash.com/photo-1537726235470-8504e3beef77?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="">
      </div>
    </div>
  </section>
  
  <section class="gallery" data-scroll-section id="pin">
    <div class="image-pop" id="one" data-scroll data-scroll-sticky data-scroll-target="#pin" data-scroll-speed="3">
      <img src="https://images.unsplash.com/photo-1499955085172-a104c9463ece?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
    </div>
    <div class="image-pop" id="two" data-scroll data-scroll-speed="7">
      <img src="https://images.unsplash.com/photo-1493809842364-78817add7ffb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
    </div>
    <div class="image-pop" id="three" data-scroll data-scroll-speed="10">
      <img src="https://images.unsplash.com/photo-1494203484021-3c454daf695d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
    </div>
    <div class="image-pop" id="four" data-scroll data-scroll-speed="6" >
      <img src="https://images.unsplash.com/photo-1503174971373-b1f69850bded?ixlib=rb-1.2.1&auto=format&fit=crop&w=1087&q=80" alt="">
    </div>
    <div class="image-pop" id="five" data-scroll data-scroll-speed="6">
      <img src="https://images.unsplash.com/photo-1516455590571-18256e5bb9ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt="">
    </div>
  </section>
</div>

body{
  margin:0;
  padding:0;
  font-family: 'Quicksand', sans-serif;
  color:#010101;
}
h4,h1{
  text-align:center
}
h4{
  font-weight:600;
  font-size:2em;
  margin-bottom:0;
}
h1{
  font-weight:300;
  font-size:4em;
  margin:0;
}
.container{
  display:flex;
  width:100%;
  height:58vh;
  margin-top:19em;
}
.getting-started{
  background-color:#e8e5e6;
  width:30%;
  padding:3em;
}
.getting-started h4{
  text-align:left;
}
.getting-started p{
  font-size:1.5em;
}
button{
  padding:1.4em;
  width:40%;
  background-color:#010101;
  color:#ffffff;
  border:none;
  outline:none;
}

.image-holder{
  width:70%;
}
img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}
.gallery{
  padding:2em;
  height:200vh;
}
.image-pop{
  width:20%;
  height:30vh;
  position:relative;
}
#one{
  top:3em;
  left:5em;
}
#two{
  top:4em;
  left:60%;
}
#three{
  top:8em;
  left:10%;
}
#four{
  top:3em;
  left:70%;
}
#five{
  top:6em;
  left:30%;
}

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