<section>
  <div class="container">
    <div class="content">
      <div class="title">
        <h1><span>Before After</span> image change slider</h1>
        <p>A pen by <a target="_blank" href="http://qrolic.com/">Qrolic Technologies</a></p>
      </div>
      <div class="box">
        <div class="box__inner">
          <div id="before_after">
            <img src="https://i.ibb.co/F8rDyhv/before.jpg">
          <img src="https://i.ibb.co/0shfDNN/after.jpg">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

body{
  font-family: 'Poppins', sans-serif;
  background-color: #EDF2F4;
}

.container{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box__inner{
  width: 600px;
}
.title span{
  color: #EF233C;
}
.title{
  padding-bottom: 50px;
  text-align: center;
}
p{
  color: #2B2D42;
  font-size: 20px;
  line-height: 25px;
}
a{
  color: #EF233C;
}
a:hover{
  color: #8D99AE;
}
h1 {
  text-align: center;
  font-size: 35px;
  line-height: 40px;
  color: #2B2D42;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

$(window).load(function() {
  $("#before_after").twentytwenty();
});