CB Stick v1

by pphheerroonn

HTML

<section class="intro">
<div class="fullHeight">
  <div class="sticky-twocol">
    <div class="stick">
      <h3><span class="emph-number">25</span><br />
      Ireland’s only dedicated Apple Authorised Education Specialist</h3>
    </div>
    <div class="text">
      <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 class="sticky-twocol">
    <div class="stick">
      <h3><span class="emph-number">7</span><br />
      convenient nationwide community hubs</h3>
    </div>
    <div class="text">
      <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 class="sticky-twocol">
    <div class="stick">
      <h3><span class="emph-number">350</span><br />
      Apple dedicated staff</h3>
    </div>
    <div class="text">
      <p>We’re always here to help on site and online and what’s more Compu b is an Apple Authorised Service Provider with Apple trained and certified technicians.  <br /><a class="button" href="#cta">Download Now</a></p>
    </div>
  </div>

</div>
</section>

CSS

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


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