<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div transparencia con resultado</title>
</head>
<body>
<header>
<h1>¡Vamos a practicar!</h1></header>
<div class="a1">350 </div>
<div class="b1">0,35 x 1000 = presione aqui
</div>
<div id="centro1"><h2>MULTIPLICAR CON DECIMALES</h2></div>
<div class="a2">20</div>
<div class="b2">0,2 x 100 = presione aqui
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="a3">41</div>
<div class="b3">0,0041 x 10000 = presione aqui
</div>
<div id="centro1"><h2>MULTIPLICAR CON DECIMALES</h2></div>
<div class="a4">30</div>
<div class="b4">0,03 x 1000 = presione aqui
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="a5">35 </div>
<div class="b5">0,35 x 100 = presione aqui
</div>
<div id="centro1"><h2>MULTIPLICAR CON DECIMALES</h2></div>
<div class="a6">35000</div>
<div class="b6">0,35 x 100000 = presione aqui
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="a7">3485,1</div>
<div class="b7">3,4851 x 1000 = presione aqui
</div>
<div id="centro1"><h2>MULTIPLICAR CON DECIMALES</h2></div>
<div class="a8">2154</div>
<div class="b8">21,54 x 100 = presione aqui
</div>
<style type="text/css">
body{
margin: auto;
}
#centro1{
float: center;
border: solid;
margin-right: 250px;
margin-left: 250px;
padding: 30px;
overflow: hidden;
position:absolute;
width: 800px;
height: 30px;
background-image: linear-gradient(blue,black,gray);
color:white;
}
h2{
text-align: center;
font-size: 30px;
}
h1{
border: solid;
padding: 20px;
text-align: center;
background-image: linear-gradient(blue,black,gray);
color: white;
}
.a1,.b1{
color: white;
background:black;
border: solid;
}
.a1{
float:left;
width: 200px;
position: absolute; left: 0;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
font-size: 50px;color:red;
}
.b1{
float: left;
width: 200px;
position: absolute; left: 0;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
}
.a1:active,.b1:active{
opacity: 0;
transition: 1s;
font-size: 30px;color:red;
}
.a2,.b2{
color: white;
background:black;
border: solid;
}
.a2{
float:right;
width: 200px;
position: absolute; right: 0;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
font-size: 50px;color:red;
}
.b2{
float: right;
width: 200px;
position: absolute; right: 0;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
}
.a2:active,.b2:active{
opacity: 0;
transition: 1s;
font-size: 30px;color:red;
}
.a3,.b3{
color: white;
background:black;
border: solid;
}
.a3{
width: 200px;
position: absolute; letter-spacing: normal;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
font-size: 50px;color:red;
}
.b3{
float: right;
width: 200px;
position: absolute; letter-spacing: inherit;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
}
.a3:active,.b3:active{
opacity: 0;
transition: 1s;
font-size: 30px;color:red;
}
.a4,.b4{
color: white;
background:black;
border: solid;
}
.a4{
width: 200px;
position: absolute; right: 0;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
font-size: 50px;color:red;
}
.b4{
float: right;
width: 200px;
position: absolute; right: 0;inherit;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
}
.a4:active,.b4:active{
opacity: 0;
transition: 1s;
font-size: 30px;color:red;
}
.a5,.b5{
color: white;
background:black;
border: solid;
}
.a5{
float:left;
width: 200px;
position: absolute; left: 0;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
font-size: 50px;color:red;
}
.b5{
float: left;
width: 200px;
position: absolute; left: 0;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
}
.a5:active,.b5:active{
opacity: 0;
transition: 1s;
font-size: 30px;color:red;
}
.a6,.b6{
color: white;
background:black;
border: solid;
}
.a6{
float:right;
width: 200px;
position: absolute; right: 0;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
font-size: 50px;color:red;
}
.b6{
float: right;
width: 200px;
position: absolute; right: 0;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
}
.a6:active,.b6:active{
opacity: 0;
transition: 1s;
font-size: 30px;color:red;
}
.a7,.b7{
color: white;
background:black;
border: solid;
}
.a7{
width: 200px;
position: absolute; letter-spacing: normal;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
font-size: 50px;color:red;
}
.b7{
float: right;
width: 200px;
position: absolute; letter-spacing: inherit;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
}
.a7:active,.b7:active{
opacity: 0;
transition: 1s;
font-size: 30px;color:red;
}
.a8,.b8{
color: white;
background:black;
border: solid;
}
.a8{
width: 200px;
position: absolute; right: 0;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
font-size: 50px;color:red;
}
.b8{
float: right;
width: 200px;
position: absolute; right: 0;inherit;z-index: 1;
text-align: center;
padding: 20px;
height: 50px;
}
.a8:active,.b8:active{
opacity: 0;
transition: 1s;
font-size: 30px;color:red;
}
</style>
</body>
</html>