CB Stick v2

by pphheerroonn

HTML

<section class="intro">
<div class="fullHeight">
  <div class="sticky-twocol">
  <div class="non-stick">
    <div class="stat">
      <h3><span class="emph-number">25</span><br />
      Ireland’s only dedicated Apple Authorised Education Specialist</h3>
    </div>
    <div class="stat">
      <h3><span class="emph-number">7</span><br />
      convenient nationwide community hubs</h3>
    </div>
    <div class="stat">
      <h3><span class="emph-number">350</span><br />
      Apple dedicated staff</h3>
    </div>
   </div>
    <div class="text stick">
      <p>Compu b’s experts are available nationwide in our 7 convenient community hubs in Limerick, Cork, Galway, Grafton Street, Dundrum Town Centre, Pavilions Swords and Ballymount, Dublin.  <br /><a class="button" href="#cta">Download Now</a></p>
    </div>
  </div>
 
  

</div>
</section>

CSS

*{
  border:red 1px solid;
}
.intro{height:200vh}
.sticky-twocol {display: flex;}
.sticky-twocol .stick{
  position: sticky;
  padding-top: 40px;
  padding-bottom: 40px;
  width: 25%;
  height: 200px;
  top : 50vh;
  transform: translateY(-50%);
}

.non-stick{
  padding-top: 50vh;
}
.fixed-text{
  position: fixed;
  padding-left: 40%;
}
.stat{
  padding-top: 50vh;
  padding-bottom: 50vh;
}

.emph-number {font-size: 100px;}
 h3 {text-align: center;}