Related second itr

by Kirubel Girma

HTML

<script src="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css">
<div class="topbar">
  <div id="1lgos" class="lgospc">
    <img class="lgoim" src="http://relatedgroup.com/wp-content/themes/related/img/app/logo.svg" alt="">
    <span class="lgosttl">ATLANTA, GEORGIA</span>
  </div>
</div>
<div id="fullpage">
  <div class="section">
    <div class="pitx">
      <h1>APARTMENT RENTAL</h1>
      <span class="stpf_ln"></span>
      <p>Founded on thoughtful urban planning, provocative design and inspirational art
        <br>
        <br> Related Development, the multifamily and mixed-use division of the Related Group, is passionate about creating projects that inspire and enhance the lives of our residents. Our culture is rich in heritage, founded on thoughtful urban planning,
        provocative design and inspirational art, with an award-winning track record as one of the largest multi-family developers in the United States.
        <br>
        <br> Today, our portfolio includes over 60 completed communities with some 20,000 units in varying price ranges. Currently, the company is developing in South Florida, Tampa, Orlando and Atlanta, and has plans for continued expansion in other major
        metropolitan cities throughout the South</p>
    </div>

  </div>
  <div class="section">Three</div>
  <div class="section">Four</div>
</div>

CSS

* {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.section {
  text-align: center;
}

.lgoim {
  height: 3.631em;
  width: 16.899em;
}

.topbar {}

.lgospc {
  display: grid;
  max-width: 17em;
  margin: 0em auto;
  padding-top: 5.000em;
}

.lgosttl {
  color: #95989A;
  margin-left: 4.938em;
}

.topbar {
  height: 5em;
  position: absolute;
  z-index: 999999;
  background-color: black;
  width: 100%;
}

.stpf_ln {
  width: 13.438em;
  display: block;
  border-bottom: .1em solid #95989A;
}

.pitx {
  margin-left: 12.063em;
  color: #95989A;
  width: 44.438em;
  text-align: left;
  height: 26em;
}

.lgo_shrink {
  transform: scale(0.7);
  padding-top: 1.000em;
  
  -webkit-transition: all 0.145s ease-in-out;
  -moz-transition: all 0.145s ease-in-out;
  -ms-transition: all 0.145s ease-in-out;
  -o-transition: all 0.145s ease-in-out;
  transition: all 0.145s ease-in-out;
}

JavaScript

$('#fullpage').fullpage({
  sectionsColor: ['black', 'black', '#C0C0C0', '#ADD8E6'],
  onLeave: function(index, nextIndex, direction) {
    var leavingSection = $(this);

    //after leaving section 2
    if (index == 1 && direction == 'down') {
      $("#1lgos").addClass("lgo_shrink");
    } else if (index == 2 && direction == 'up') {
      $("#1lgos").removeClass("lgo_shrink");
    }
  }
});