Based on https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d
A Pen by anthony rivera on CodePen.
<!-- 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> | |
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.