tutti i PMV

by barbarina

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://fonts.googleapis.com/css?family=Share+Tech+Mono"></script>
<div class="container">

  <div class="panel panel-primary">
    <div class="panel-heading">
      <h4 class="panel-title">Pannelli a messaggio variabile</h4>
    </div>
    <div class="panel-body">
      
      <div class="row" style="margin-top:5px;">
        <div class="col-sm-12">
        
      <div class="PMV20x3_2IMG">
        <span class="pull-left" style="margin-right: 10px; margin-left:4px;">
          <img src="https://s13.postimg.org/dnn00gtwz/image.gif" style="width: 32px; padding:0px;"  />
          <img src="https://s13.postimg.org/dnn00gtwz/image.gif" style="width: 32px; padding:0px;"  />
        </span>
        <span class="testoPMV">
          <div>LAVORI</div>
          <div>AL KM 66</div>
          <div>XXXXXXXXXXXXXXXXXXXX</div>
        </span>
          </div>                  
        </div>
        
      </div>
      
      <div class="row" style="margin-top:5px;">
        <div class="col-sm-12">
        
          <div class="PMV15x4_0IMG">
            <span class="testoPMV">
              <div>PER ROMA</div>
              <div>CONTROLLO </div>
              <div>ELETTRONICO</div>
              <div>DELLA VELOCITAx</div>
            </span>
          </div>
                  
        </div>
      </div>
      
      <div class="row" style="margin-top:5px;">
        <div class="col-sm-12">
        
      <div class="PMV0x0_1IMG">
        <span class="pull-left" style="margin-right: 10px; margin-left:4px;">
          <img src="https://s13.postimg.org/dnn00gtwz/image.gif" style="width: 24px; padding:0px;"  />
        </span>
        <span class="testoPMV">
         
        </span>
         ...

CSS

.testoPMV{
  font-family: 'Share Tech Mono', monospace;
  line-height: 12px; 
  color: orange;
}

.PMV20x3_2IMG{
  background-color: black; border-style: solid; border-width: 4px;border-radius: 4px;  border-color: red;
                    padding: 5px; width:257px;
}

.PMV3X15IMG{
  background-color: black; border-style: solid; border-width: 4px;border-radius: 4px;  border-color: red;
                    padding: 5px; width:165px;
}

.PMV15x4_0IMG{
  background-color: black; border-style: solid; border-width: 4px;border-radius: 4px;  border-color: green;
                    padding: 5px; width:134px;
}

.PMV0x0_1IMG{
  background-color: black; border-style: solid; border-width: 4px; border-radius: 4px ; border-color: green;
                    padding: 3px; width:46px; height:41px;
}


.PMV3x15_1IMG{
  background-color: black; 
  border-style: solid; 
  border-radius: 4px; 
  border-width: 4px; 
  padding: 5px; 
  width:176px;
}

.PMV0x0_2IMG{
  background-color: black; border-style: solid; border-width: 4px; border-radius: 5px; border-color: green;
                    padding: 3px; width:79px; height:41px; padding-right:0px;
}


.PMV3x1_0IMG{
  background-color: black; border-style: solid; border-width: 4px; border-radius: 5px;  border-color: green;
                    padding: 5px; width:40px;
}

.PMV12x2_0IMG{
  background-color: black; border-style: solid; border-width: 4px; border-radius: 5px;  border-color: green;
                    padding: 5px; width:110px;padding-right:0px;
}