engagement strategies space

by Jordan Dayton

HTML

<a href="ENTER_URL_HERE" target="_top">
  <div class="header hvr-box-shadow-inset">
    <div class="header-text-wrapper">
      <img class="icon" src="https://maxcdn.icons8.com/iOS7/PNG/32/Very_Basic/opened_folder_filled-32.png" title="Open Folder Filled" width="20" />
      <span class="header-text">Community Resources</span>
    </div>
  </div>
</a>

<a href="ENTER_URL_HERE" target="_top">
  <div class="bottom-left hvr-box-shadow-inset">
    <div class="body-text">
      <p>H.Ed</p>
    </div>
  </div>
</a>

<a href="ENTER_URL_HERE" target="_top">
  <div class="bottom-right hvr-box-shadow-inset">
    <div class="body-text">
      <p>K-12</p>
    </div>
  </div>
</a>

<br />
<br />

<a href="ENTER_URL_HERE" target="_top">
  <div class="header hvr-box-shadow-inset">
    <div class="header-text-wrapper">
      <img class="icon" src="https://maxcdn.icons8.com/iOS7/PNG/32/Very_Basic/opened_folder_filled-32.png" title="Open Folder Filled" width="20" />
      <span class="header-text">Instructure Resources</span>
    </div>
  </div>
</a>

<a href="ENTER_URL_HERE" target="_top">
  <div class="bottom-left hvr-box-shadow-inset">
    <div class="body-text">
      <p>H.Ed</p>
    </div>
  </div>
</a>

<a href="ENTER_URL_HERE" target="_top">
  <div class="bottom-right hvr-box-shadow-inset">
    <div class="body-text">
      <p>K-12</p>
    </div>
  </div>
</a>

CSS

/* ///////// HEADER ///////// */

.header {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 60px;
  width: 291px;
  background-color: #58585B;
}

div.header:hover {
  filter: Alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.header-text-wrapper {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  text-align: center;
  padding-top: 20px;
}

.icon {
  vertical-align: top;
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

.header-text {
  vertical-align: middle;
  color: #fff;
  padding: 5px;
}


/* ///////// BODY ///////// */

.bottom-buttons {
  width: 291px;
  height: 30px;
}

.bottom-left {
  border-bottom-left-radius: 5px;
  height: 30px;
  width: 145px;
  background-color: #8a8a8f;
  margin-top: 1px;
  display: inline-block;
}

div.bottom-left:hover {
  filter: Alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.bottom-space {
  height: 30px;
  width: 1px;
  margin-top: 1px;
  display: inline-block;
}

.bottom-right {
  border-bottom-right-radius: 5px;
  height: 30px;
  width: 145px;
  background-color: #8a8a8f;
  margin-top: 1px;
  display: inline-block;
  margin-left: -3px;
}

div.bottom-right:hover {
  filter: Alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
}

.body-text {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #fff;
  font-size: 16px;
  text-align: center;
  margin-top: -10px;
}

a:link {
  text-decoration: none;
}


/* Box Shadow Inset */

.hvr-box-shadow-inset {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px transparent;
  /* Hack to improve aliasing on mobile/tablet devices...