SharePoint WebPart

index.html

<!-- For SharePoint WebPart
Design: Anthony Rivera 
-->
<script src="https://kit.fontawesome.com/6349215832.js" crossorigin="anonymous"></script>

<table>
  <tr>
    <td style="width: 120px;"></td>
    <td style="width: 220px;"></td>
    <td style="width: 600px;">
      <p>
        <span class="labels">VTEL</span>
        <span class="labels1">Conference<br />Phone</span>
        <span class="labels2">Projector</span>
        <span class="labels3">Room<br/>Monitor</span>
        <span class="labels4">Capacity</span>
      </p>
    </td>
  </tr>  
  <tr>
    <td><div class="card-1"><a><img width="120" src="https://vectorified.com/images/conference-room-icon-10.png"></a></div></td>
    <td><div class="card-2"><p>Bldg. Room</p><p>Floor</p><p>POC:</p></div></td>
    <td>
      <div class="card-3">
      <p>
        <span class="blue"><i class="fal fa-webcam fa-4x"></i></span>
       
        <span class="red"><i class="fal fa-phone-square-alt fa-4x"></i></span>
        
        <span class="green"><i class="fal fa-projector fa-4x"></i></span>
       
        <span class="orange"><i class="fal fa-tv fa-4x"></i></span>
        
        <a style="font-size: 60px; text-decoration: none; line-height: 1em;">10</a>
      </p>
      </div>
        
   </td>
  </tr>  
</table>  

sharepoint-webpart.markdown

SharePoint WebPart

Based on https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d

A Pen by anthony rivera on CodePen.

License.

style.css

body {
  background: whitesmoke;
  text-align: center;
  font-family: Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif; 
}

.card-1 {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 120px;
  margin: .5rem;
  position: relative;
  width: 120px;

}

.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-2 {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 120px;
  margin: .5rem;
  position: static;
  width: 220px;
  text-align: left;
  padding-left: 20px;
}

.card-2 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-2:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-3 {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  height: 105px;
  margin: .5rem;
  position: static;
  width: 600px;
  padding-bottom: 5px;
  padding-top: 10px;
  
  
}

.card-3 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-3:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.labels {
  float: left; 
  text-align: center; 
  margin-left: 55px;
}

.labels1 {
  float: left; 
  text-align: center; 
  margin-left: 46px;
}
.labels2 {
    float: left; 
  text-align: center; 
  margin-left: 50px;
}
.labels3 {
    float: left; 
  text-align: center; 
  margin-left: 65px;
}
.labels4 {
    float: left; 
  text-align: center; 
  margin-left: 60px;
}

i.fal {
  padding-left: 38px;
  padding-right: 10px;
  float: left;
}

.grey {
  color: #A9A9A9;
}

.blue {
  color: dodgerblue;
  text-shadow: 1px 1px 2px #00BFFF;
}

.red {
  color: red;
  text-shadow: 1px 1px 2px #DC143C;
}

.green {
  color:#008000;
  text-shadow: 1px 1px 2px #32CD32;
}

.orange {
  color:#FF4500;
  text-shadow: 1px 1px 2px #FFA500;
}

Just place on SharePoint Script Editor. Feel free to make enhancements.