# HTML

CODE:

* { 
direction: rtl; 
box-sizing: border-box;            

}
 
body {
 margin: 0;            
padding: 20px 40px;            
background:#fff;    
font-family: Calibri;            
font-size: 14px;   
}
              
.panel {  
margin: 0;           
padding: 4px;            
width: 25%;            
height: 260px;     
float:right;   
}
        
.card {            
margin: 0;            
padding: 0px 12px;            
width: 100%;           
 height: 260px;                 
}
        
.card-header {            
margin:0 auto;          
padding: 6px;            
width: 100%;            
height: 30px;            
line-height: 30px;            

 }

.card-header h2 {           
 margin: 0;           
 font-size: 20px;            
color: #fff;       
 }
        
.card-body {            
margin:0;           
padding: 6px ;            
width: 100%;            
height: 200px; 
background:white;
}
 
.card-body h3 {
margin:0;
padding:0;
color:#333;

}   

.card-body p {   
margin: 0;
padding:2px 4px  6px 6px;
border-bottom:1px solid #ccc;
color:#444;
 }      

.card-body  p.first{
color:blue;
}
.card-body p span{
width:100px;
color:green;
}   

.card-footer {            
margin: 0 ;            
padding: 6px 0;            
width: 100%;            
height: 30px;            
line-height: 30px;            

}
        
.button {            
margin: 0;            
padding: 2px 6px;            
width: 90px;            
height: 20px;            
background: #bbb;            
color: #333;
text-decoration: none;
font-weight: bold;
text-align: center;       
}
        
.button:hover {            
background: #aaa; 
color:#fff       
}
        
.green {            
background: teal;            
color: white ;      
}
        
.red {            
background: #ff0000;            
color: white  ;      
}
        
.orange {
 background: #ffa500 ;            
color: white  ;      
}
        
.blue {            
background: #191970;            
color: white  ;      
}

.gray {            
background: gray;            
color: white  ;      
}
    
.black {
background: black;            
color: white  ;      
}

.small {            
width: 100%;        
}
        
.medium {           
 width: 50%;        
}
        
.large {            
width: 33.333%;       
 }

.xlarge {            
width: 25%;        
}




