I want to apply 2 company logos, one on the left side and one on the right side inside this DIV. How ?!
I can only apply one, when I will apply another one, the first one disappears.
@media (min-width: 1280px) and (max-width: 1980px) and (min-height: 1024px) and (min-height: 1080px) {
*{
font-family: Oswald;
}
.box {
margin-left: -110px;
width: 170%;
}
.box-chart {
width: 100%;
margin: 0 auto;
}
body{
background-color: #363636;
overflow: hidden;
}
.painel-principal {
width: 100%;
height: 910px;
border: 1px solid #FDCA2E;
display: inline-flex;
font-family: Oswald;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.linhaS {
width: 19.1111%;
height: 880px;
border: 1px solid red;
margin: 4px 4px 4px 4px;
padding-left: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: none;
}
.cabecalho-topo p {
width: 100%;
background: #FDCA2E;
color: #000000;
border: 1px solid #000000;
text-align: center;
font-family: Oswald;
font-size: 30px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-bottom: 10px;
margin-top: 5px;
}
.cabecalho-inferior p {
width: 100%;
background: #D3D3D3;
color: #000000;
border: 1px solid #D3D3D3;
text-align: center;
font-family: Oswald;
font-size: 30px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
margin-top: 5px;
}
.cabecalho-inferior-whs p {
width: 100%;
/*margin-bottom: 5px;*/
background: #FDCA2E;
color: #000000;
border: 1px solid #000000;
text-align: center;
font-family: Oswald;
font-size: 30px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.linha{
box-sizing: border-box;
}
.linha:before,
.linha:after {
content: " ";
display: table;
}
.linha:after {
clear: both;
}
.linha {
margin-top: 10px;
}
.linha:last-child {
margin-bottom: 0;
}
.inicio .row{
display: inline-block;
vertical-align: top;
min-height: 1px;
padding-left: 5px;
padding-right: 5px;
width: 272px;
margin-left: 7px;
*zoom: 1;
*display: inline;
border: 1px solid #FF0000;
background-color: #FF0000;
color: #FFFFFF;
margin-top: 5px;
font-size: 30px;
text-align: center;
}
.inicio .oee{
width: 282px;
margin-left: 7px;
border: 1px solid #FDCA2E;
background-color: #FDCA2E;
color: #000000;
font-size: 25px;
text-align: center;
}
.inicio .porcentagem{
margin-top: 5px;
width: 284px;
margin-left: 5px;
border: 1px solid #FFFFFF;
background-color: #FFFFFF;
color: #000000;
border-radius: 5px;
font-size: 40px;
text-align: center;
}
.controle .column{
width: 29.4333%;
background: #FDCA2E;
border: 1px solid #FDCA2E;
color: #000000;
margin: 5px;
padding: 5px;
min-height: 30px;
font-size: 20px;
text-align: center;
border-radius: 4px;
position: relative;
float: left;
display: block;
box-sizing: border-box;
}
.controle-2 .perc{
width: 29.4333%;
background: #FFFFFF;
border: 1px solid #FFFFFF;
color: #000000;
margin: 5px;
padding: 5px;
min-height: 30px;
font-size: 30px;
text-align: center;
border-radius: 4px;
position: relative;
float: left;
display: block;
box-sizing: border-box;
}
.controle-3 .rate{
width: 55%;
background: #FDCA2E;
border: 1px solid #FDCA2E;
color: #000000;
margin: 5px;
padding: 5px;
min-height: 30px;
font-size: 20px;
text-align: center;
border-radius: 4px;
position: relative;
float: left;
display: block;
box-sizing: border-box;
}
.controle-3 .head{
width: 36.5333%;
background: #FDCA2E;
border: 1px solid #FDCA2E;
color: #000000;
margin: 5px;
padding: 5px;
min-height: 30px;
font-size: 20px;
text-align: center;
border-radius: 4px;
position: relative;
float: left;
display: block;
box-sizing: border-box;
}
.controle-4{
width: 55%;
background: #FFFFFF;
border: 1px solid #FFFFFF;
color: #000000;
margin: 5px;
padding: 5px;
min-height: 30px;
font-size: 20px;
text-align: left;
border-radius: 4px;
position: relative;
float: left;
display: block;
box-sizing: border-box;
}
.controle-5{
width: 36.5333%;
background: #FFFFFF;
border: 1px solid #FFFFFF;
color: #000000;
margin: 5px;
padding: 5px;
min-height: 30px;
font-size: 20px;
text-align: center;
border-radius: 4px;
position: relative;
float: left;
display: block;
box-sizing: border-box;
}
.prod .prods{
width: 95%;
background: #D3D3D3;
border: 1px solid #D3D3D3;
color: #000000;
margin: 5px;
min-height: 30px;
font-size: 20px;
text-align: center;
border-radius: 4px;
position: relative;
float: left;
display: block;
box-sizing: border-box;
}
.grafico .plaxpro{
width: 95%;
background: #FDCA2E;
border: 1px solid #FDCA2E;
color: #000000;
font-size: 20px;
margin: 5px;
min-height: 30px;
font-size: 25px;
text-align: center;
border-radius: 4px;
position: relative;
float: left;
display: block;
box-sizing: border-box;
}
.perc-plaxpro{
width: 95%;
background: #FFFFFF;
border: 1px solid #FFFFFF;
color: #000000;
font-size: 20px;
margin: 5px;
margin-bottom: 30px;
min-height: 30px;
font-size: 25px;
text-align: center;
border-radius: 4px;
position: relative;
float: left;
display: block;
box-sizing: border-box;
}
.perc-plaxpro .pla{
color: #FF0000;
}
.perc-plaxpro .pro{
color: #FDCA2E;
}
}
<!doctype html>
<html lang="pt" class="no-js">
<head>
<meta charset="UTF-8" />
<title>DASHBOARD OEE - v1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="css/imagens/dhl_icon.ico" type="image/x-icon" />
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<script src="js/Chart.min.js"></script>
<script type="text/javascript">
var randomnb = function(){ return Math.round(Math.random()*300)};
</script>
</head>
<body>
<div class="cabecalho-topo">
<p>OEE DASHBOARD</p>
</div>
<div class="painel-principal">
<div class="linhaS"><!-- /PAINEL DA LINHA A -->
<div class="inicio">
<div class="row">LINHA A</div>
<div class="oee">OEE</div>
<div class="porcentagem">0%</div>
</div>
<div class="controle">
<div class="column">DESEMP.</div>
<div class="column">DISPONIB.</div>
<div class="column">QUALID.</div>
</div>
<div class="controle-2">
<div class="perc">0%</div>
<div class="perc">0%</div>
<div class="perc">0%</div>
</div>
<div class="controle-3">
<div class="rate">RATE</div>
<div class="head">HEAD</div>
</div>
<div class="controle-4">
<div class="meta">Meta(cx/h): </div>
<div class="real">Real(cx/h): </div>
</div>
<div class="controle-5">
<div>0</div>
<div>0</div>
</div>
<div class="prod">
<div class="prods">(Nome do produto)</div>
</div>
<div class="grafico">
<div class="plaxpro">Planejado x Produzido</div>
</div>
<div class="perc-plaxpro">
<div class="pla">Planejado:   null</div>
<div class="pro">Produzido:   null</div>
</div>
<div class="box">
<div class="box-chart">
<canvas id="GraficoDonut1" style="width:100%;"></canvas>
<script type="text/javascript">
var options = {
responsive:true
};
var data = [
{
value: randomnb(),
color:"#F7464A",
highlight: "#FF5A5E",
label: "Planejado"
},
{
value: randomnb(),
color: "#FDCA2E",
highlight: "#5AD3D1",
label: "Produzido"
}
]
var ctx = document.getElementById("GraficoDonut1").getContext("2d");
var PizzaChart1 = new Chart(ctx).Doughnut(data, options);
</script>
</div>
</div>
</div><!-- / FIM DO PAINEL DA LINHA A -->
<div class="linhaS"><!-- /PAINEL DA LINHA B -->
<div class="inicio">
<div class="row">LINHA B</div>
<div class="oee">OEE</div>
<div class="porcentagem">0%</div>
</div>
<div class="controle">
<div class="column">DESEMP.</div>
<div class="column">DISPONIB.</div>
<div class="column">QUALID.</div>
</div>
<div class="controle-2">
<div class="perc">0%</div>
<div class="perc">0%</div>
<div class="perc">0%</div>
</div>
<div class="controle-3">
<div class="rate">RATE</div>
<div class="head">HEAD</div>
</div>
<div class="controle-4">
<div class="meta">Meta(cx/h): </div>
<div class="real">Real(cx/h): </div>
</div>
<div class="controle-5">
<div>0</div>
<div>0</div>
</div>
<div class="prod">
<div class="prods">(Nome do produto)</div>
</div>
<div class="grafico">
<div class="plaxpro">Planejado x Produzido</div>
</div>
<div class="perc-plaxpro">
<div class="pla">Planejado:   null</div>
<div class="pro">Produzido:   null</div>
</div>
<div class="box">
<div class="box-chart">
<canvas id="GraficoDonut2" style="width:100%;"></canvas>
<script type="text/javascript">
var options = {
responsive:true
};
var data = [
{
value: randomnb(),
color:"#F7464A",
highlight: "#FF5A5E",
label: "Planejado"
},
{
value: randomnb(),
color: "#FDCA2E",
highlight: "#5AD3D1",
label: "Produzido"
}
]
var ctx = document.getElementById("GraficoDonut2").getContext("2d");
var PizzaChart2 = new Chart(ctx).Doughnut(data, options);
</script>
</div>
</div>
</div><!-- / FIM DO PAINEL DA LINHA B -->
<div class="linhaS"><!-- /PAINEL DA LINHA C -->
<div class="inicio">
<div class="row">LINHA C</div>
<div class="oee">OEE</div>
<div class="porcentagem">0%</div>
</div>
<div class="controle">
<div class="column">DESEMP.</div>
<div class="column">DISPONIB.</div>
<div class="column">QUALID.</div>
</div>
<div class="controle-2">
<div class="perc">0%</div>
<div class="perc">0%</div>
<div class="perc">0%</div>
</div>
<div class="controle-3">
<div class="rate">RATE</div>
<div class="head">HEAD</div>
</div>
<div class="controle-4">
<div class="meta">Meta(cx/h): </div>
<div class="real">Real(cx/h): </div>
</div>
<div class="controle-5">
<div>0</div>
<div>0</div>
</div>
<div class="prod">
<div class="prods">(Nome do produto)</div>
</div>
<div class="grafico">
<div class="plaxpro">Planejado x Produzido</div>
</div>
<div class="perc-plaxpro">
<div class="pla">Planejado:   null</div>
<div class="pro">Produzido:   null</div>
</div>
<div class="box">
<div class="box-chart">
<canvas id="GraficoDonut3" style="width:100%;"></canvas>
<script type="text/javascript">
var options = {
responsive:true
};
var data = [
{
value: randomnb(),
color:"#F7464A",
highlight: "#FF5A5E",
label: "Planejado"
},
{
value: randomnb(),
color: "#FDCA2E",
highlight: "#5AD3D1",
label: "Produzido"
}
]
var ctx = document.getElementById("GraficoDonut3").getContext("2d");
var PizzaChart3 = new Chart(ctx).Doughnut(data, options);
</script>
</div>
</div>
</div><!-- / FIM DO PAINEL DA LINHA C -->
<div class="linhaS"><!-- /PAINEL DA LINHA D -->
<div class="inicio">
<div class="row">LINHA D</div>
<div class="oee">OEE</div>
<div class="porcentagem">0%</div>
</div>
<div class="controle">
<div class="column">DESEMP.</div>
<div class="column">DISPONIB.</div>
<div class="column">QUALID.</div>
</div>
<div class="controle-2">
<div class="perc">0%</div>
<div class="perc">0%</div>
<div class="perc">0%</div>
</div>
<div class="controle-3">
<div class="rate">RATE</div>
<div class="head">HEAD</div>
</div>
<div class="controle-4">
<div class="meta">Meta(cx/h): </div>
<div class="real">Real(cx/h): </div>
</div>
<div class="controle-5">
<div>0</div>
<div>0</div>
</div>
<div class="prod">
<div class="prods">(Nome do produto)</div>
</div>
<div class="grafico">
<div class="plaxpro">Planejado x Produzido</div>
</div>
<div class="perc-plaxpro">
<div class="pla">Planejado:   null</div>
<div class="pro">Produzido:   null</div>
</div>
<div class="box">
<div class="box-chart">
<canvas id="GraficoDonut4" style="width:100%;"></canvas>
<script type="text/javascript">
var options = {
responsive:true
};
var data = [
{
value: randomnb(),
color:"#F7464A",
highlight: "#FF5A5E",
label: "Planejado"
},
{
value: randomnb(),
color: "#FDCA2E",
highlight: "#5AD3D1",
label: "Produzido"
}
]
var ctx = document.getElementById("GraficoDonut4").getContext("2d");
var PizzaChart4 = new Chart(ctx).Doughnut(data, options);
</script>
</div>
</div>
</div><!-- / FIM DO PAINEL DA LINHA D -->
<div class="linhaS"><!-- /PAINEL DA LINHA E -->
<div class="inicio">
<div class="row">LINHA E</div>
<div class="oee">OEE</div>
<div class="porcentagem">0%</div>
</div>
<div class="controle">
<div class="column">DESEMP.</div>
<div class="column">DISPONIB.</div>
<div class="column">QUALID.</div>
</div>
<div class="controle-2">
<div class="perc">0%</div>
<div class="perc">0%</div>
<div class="perc">0%</div>
</div>
<div class="controle-3">
<div class="rate">RATE</div>
<div class="head">HEAD</div>
</div>
<div class="controle-4">
<div class="meta">Meta(cx/h): </div>
<div class="real">Real(cx/h): </div>
</div>
<div class="controle-5">
<div>0</div>
<div>0</div>
</div>
<div class="prod">
<div class="prods">(Nome do produto)</div>
</div>
<div class="grafico">
<div class="plaxpro">Planejado x Produzido</div>
</div>
<div class="perc-plaxpro">
<div class="pla">Planejado:   null</div>
<div class="pro">Produzido:   null</div>
</div>
<div class="box">
<div class="box-chart">
<canvas id="GraficoDonut5" style="width:100%;"></canvas>
<script type="text/javascript">
var options = {
responsive:true
};
var data = [
{
value: randomnb(),
color:"#F7464A",
highlight: "#FF5A5E",
label: "Planejado"
},
{
value: randomnb(),
color: "#FDCA2E",
highlight: "#5AD3D1",
label: "Produzido"
}
]
var ctx = document.getElementById("GraficoDonut5").getContext("2d");
var PizzaChart5 = new Chart(ctx).Doughnut(data, options);
</script>
</div>
</div>
</div><!-- / FIM DO PAINEL DA LINHA E -->
</div><!-- /FIM DO PAINEL PRINCIPAL -->
<div class="cabecalho-inferior">
<p><marquee>Planejado(Turno):   null   Realizado(turno):   null   %Total:   null</marquee></p>
</div>
<div class="cabecalho-inferior-whs">
<p>WHS DASHBOARD</p>
</div>
<!-- <div class="desenvolvido">
<p> © Alexandre Amado </p>
</div> -->
</body>
</html>