Footer Offers

by Jordan Dayton

HTML

<div style="padding-top: 60px;"></div>
    
<div class="cards-wrapper">

  <div class="cards-container hvr-shrink">
     <a href="/community-central/">
      <div class="cards hvr-glow" id="card-community">
          <div>
            <img class="img-pos" src="https://png.icons8.com/ios/64/666666/certificate-filled.png">
          </div>
          <div class="cards-title">Community Central</div>
      </div>
     </a>
  </div>
  <div class="cards-container hvr-shrink">
    <a href="/questions-discussions/">
      <div class="cards hvr-glow" id="card-questions">
          <div>
            <img class="img-pos" src="https://png.icons8.com/ios/64/666666/ledger-filled.png">
          </div>
          <div class="cards-title">Questions & Discussions</div>
      </div>
      </a>
  </div>
  <div class="cards-container hvr-shrink">
    <a href="/resources-shared-practices/">
      <div class="cards hvr-glow" id="card-resources">
          <div>
            <img class="img-pos" src="https://png.icons8.com/ios/64/666666/book-shelf-filled.png">
          </div>
          <div class="cards-title">Resources & Shared Practices</div>
      </div>
      </a>
  </div>
  
</div>

CSS

.cards-wrapper {
  text-align: center;
  margin-top: 0;
}

.cards-container {
  display: inline-block;
  width: 300px;
  height: 200px;
  padding: 5px;
  vertical-align: top;
}

.cards {
  width: 300px;
  height: 260px;
  background: #ffffff;
  border-radius: 5px;
  vertical-align: top;
  margin: 0 auto;
  position: relative;
  box-shadow: 0px 12px 53px -11px rgba(0, 0, 0, 0.3);
}

.cards:active {
    opacity: .8;
}

.cards-title {
  padding-top: 50px;
  font-size: 18px;
  color: #666666;
}

.img-pos {
  padding-top: 70px;
}


a:link {
  color: #0080CC;
  text-decoration: none;
}

a:hover {
  color: #58585B;
  text-decoration: underline;
}

a:visited {
  color: #0080CC;
}

/* Shrink */
.hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

/* Glow */
.hvr-glow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}