Quicklinks to Telligent Strategy Applications

by Jordan Dayton

HTML

<body>

<div style="padding-top: 45px;"></div>

<div class="cards-wrapper">

  <div class="cards-container hvr-shrink">
    <div>
     <a href="https://community.telligent.com/strategy/f/forum">
      <div class="cards hvr-glow" id="card-canopy">
        <div>
          <div>
            <img class="img-pos" src="https://png.icons8.com/dusk/80/ffffff/chat.png">
          </div>
          <div class="cards-title">Questions/Discussions</div>
        </div>
      </div>
     </a>
    </div>
  </div>
  <div class="cards-container hvr-shrink">
    <div>
    <a href="https://community.telligent.com/strategy/b/thinktank">
      <div class="cards hvr-glow" id="card-canopy">
        <div>
          <div>
            <img class="img-pos" src="https://png.icons8.com/dusk/80/ffffff/edit-property.png">
          </div>
          <div class="cards-title">Think Tank Blog</div>
        </div>
      </div>
      </a>
    </div>
  </div>
  <div class="cards-container hvr-shrink">
    <div>
    <a href="https://community.telligent.com/strategy/b/thinktank">
      <div class="cards hvr-glow" id="card-canopy">
        <div>
          <div>
            <img class="img-pos" src="https://png.icons8.com/dusk/80/ffffff/edit-property.png">
          </div>
          <div class="cards-title">Think Tank Blog</div>
        </div>
      </div>
      </a>
    </div>
  </div>
  <div class="cards-container hvr-shrink">
    <div>
    <a href="https://community.telligent.com/strategy/b/thinktank">
      <div class="cards hvr-glow" id="card-canopy">
        <div>
          <div>
            <img class="img-pos" src="https://png.icons8.com/dusk/80/ffffff/edit-property.png">
          </div>
          <div class="cards-title">Think Tank Blog</div>
        </div>
      </div>
      </a>
    </div>
  </div>
  <div class="cards-container hvr-shrink">
    <div>
    <a href="https://community.telligent.com/strategy/b/thinktank">
      <div class="cards hvr-glow" id="card-canopy">
        <div>
         ...

CSS

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

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

.cards {
  width: 200px;
  height: 200px;
  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;
}

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

.cards-title {
  padding-top: 30px;
  font-size: 18px;
  color: #886F9C;
}

#card-canopy {
  background: linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(240,240,240,1) 100%);
}

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

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

a:visited {
  color: #0080CC;
}

.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 20px rgba(0, 0, 0, 0.6);
}