<style>
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
.container {
background-color: rgba(0, 0, 0, 0.3);
width: 270px;
height: 100px;
border-radius: 15px;
border:1px solid #444;
}
.container img {
width: 85px;
height: 85px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
float: left;
}
.batt {
padding-right: 20px;
padding-top: 15px;
float: right;
}
.info {
padding-top: 10px;
height: 80px;
}
.name {
font-size: 130%;
font-family: fantasy;
}
.loc {
font-size: 100%;
padding-top: 10px;
padding-bottom: 10px;
}
.time {
font-size: 60%;
color:grey;
}
</style>
<div class="container">
<img src="%sergey.icon%">
<div class="batt">
%sergey.BattLevel% % <span class="batt_icon fa fa-%sergey.battPic%" style="color: %sergey.BattColor%" aria-hidden="true"></span>
</div>
<div class="info">
<div class="name">%sergey.fullName%</div>
<div class="loc"><span class="loc_icon fa fa-map-marker" aria-hidden="true"></span> %sergey.atHome%</div>
<div class="time"><span class="ref_icon fa fa-refresh fa-spin" aria-hidden="true"></span> %sergey.CoordinatesUpdated%</div>
</div>
</div>
<div class="container">
<img src="%elena.icon%">
<div class="batt">
%alena.BattLevel% % <span class="batt_icon fa fa-%elena.battPic%" style="color: %elena.BattColor%" aria-hidden="true"></span>
</div>
<div class="info">
<div class="name">%elena.fullName%</div>
<div class="loc"><span class="loc_icon fa fa-map-marker" aria-hidden="true"></span> %elena.atHome%</div>
<div class="time"><span class="ref_icon fa fa-refresh fa-spin" aria-hidden="true"></span> %elena.CoordinatesUpdated%</div>
</div>
</div>