cex 3x3

by mrjordy

HTML

<div class="ThreeByThreeContainer">
  <div class="ThreeByThree">
  
    <div class="ThreeByThreeCard Card1">
      <a href="#"><div class="xAudio NoAudioFile"></div></a>
      <div class="xPortrait">
        <img src="#">
      </div>
      <div class="xPersonalInfo">
        <p class = "xName">Barrett Tucker</p>
        <p class = "xLocation">Washington, D.C.</p>
        <p class = "xNumber">(202) 433-0849</p>
        <p class = "xEmail">[email protected]</p>
      </div>
      <div class="LineBreak"></div>
      <div class="xCommands">BUMED, NAVFAC, ONR</div>
    </div>
    <div class="ThreeByThreeCard Card2">
      <a href="#"><div class="xAudio NoAudioFile"></div></a>
      <div class="xPortrait">
        <img src="#">
      </div>
      <div class="xPersonalInfo">
        <p class = "xName">Carmen Cruz</p>
        <p class = "xLocation">Peal Harbor, Hawaii</p>
        <p class = "xNumber">(808) 472-2550</p>
        <p class = "xEmail">[email protected]</p>
      </div>
      <div class="LineBreak"></div>
      <div class="xCommands">PACOM</div>
    </div>
    <div class="ThreeByThreeCard Card3">
      <a href="#"><div class="xAudio NoAudioFile"></div></a>
      <div class="xPortrait">
        <img src="#">
      </div>
      <div class="xPersonalInfo">
        <p class = "xName">Mike Filkins</p>
        <p class = "xLocation">Washington, D.C.</p>
        <p class = "xNumber">(202) 433-7315</p>
        <p class = "xEmail">[email protected]</p>
      </div>
      <div class="LineBreak"></div>
      <div class="xCommands">NAVSEA</div>
    </div>
    <div class="ThreeByThreeCard Card4">
      <a href="#"><div class="xAudio NoAudioFile"></div></a>
      <div class="xPortrait">
        <img src="#">
      </div>
      <div class="xPersonalInfo">
        <p class = "xName">Machelle Hamme</p>
        <p class = "xLocation">Pearl Harbor, Hawaii</p>
        <p class = "xNumber">(808) 471-8676</p>
        <p class =...

CSS

.ThreeByThreeContainer {
  position: relative;
}
.ThreeByThree {
  position: relative;
  font-size: 13px;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.ThreeByThreeCard {
  height: 300px;
  width: 200px;
  background: white;
  border-radius: 30px;
  border-bottom: 2px solid #333;
  border-top: 1px solid #ccc;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}
.xAudio {
  position: absolute;
    background-image: url('https://navy.deps.mil/peoeis/sites/nen/res/CEX_3x3_VolumeIcon.png');
    width: 18px;
    height: 17px;
    background-position-y: 0;
    margin-left: 150px;
    margin-top: 60px;
}
.xAudio:hover {
    background-position-y: 100%;
}
.xAudio.NoAudioFile {
    background-position-y: 250%;
    cursor: not-allowed;
}
.xPortrait {
  border-top: 1px solid #ddd;
  border-left: 1px solid #eee;
  border-radius: 5px;
  height: 100px;
  width: 100px;
  margin-top: 15px;
  margin-left: 15px;
  overflow: hidden;
}
.xPortrait > img {
  width: 100%;
  height: auto;
}
.xPersonalInfo > p {
  line-height: 6px;
  padding-left: 10px;
}
.xName {
  font-weight: bold;
}
.xCommands {
  text-align: center;
  margin-top: 4px;
  color: navy;
  font-weight: bold;
}
.LineBreak {
  width: 100%;
  height: 1px;
  background: #ddd;
}