<!DOCTYPE html>
<html>
<head>
<title>Calculadora Rosa</title>
<style>
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 300px; /* Para que se vea en el blog */
background-color: #ffe4e1; /* Rosa claro de fondo */
}
.calculadora {
background-color: #ff69b4; /* Rosa más fuerte para la calculadora */
border-radius: 10px;
padding: 20px;
box-shadow: 5px 5px 10px #888888;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
.pantalla {
grid-column: 1 / 5;
background-color: #f0f0f0;
color: #333;
padding: 15px;
text-align: right;
font-size: 1.5em;
border-radius: 5px;
margin-bottom: 10px;
border: 2px solid #ffd700; /* Borde amarillo */
}
button {
background-color: #fff;
color: #333;
border: 1px solid #ffd700; /* Borde amarillo */
border-radius: 5px;
padding: 15px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #eee;
}
.operador {
background-color: #ffd700; /* Botones de operador amarillos */
color: #fff;
}
.operador:hover {
background-color: #e6c000;
}
.igual {
grid-column: 3 / 5;
background-color: #adff2f; /* Verde claro para el igual */
color: #fff;
}
.igual:hover {
background-color: #98e629;
}
/* Decoraciones amarillas */
.decoracion-arriba {
position: absolute;
top: 10px;
left: 10px;
width: 30px;
height: 30px;
background-color: #ffd700;
border-radius: 50%;
}
.decoracion-abajo {
position: absolute;
bottom: 10px;
right: 10px;
width: 20px;
height: 20px;
background-color: #ffd700;
border-radius: 50%;
}
</style>
</head>
<body>
<div style="position: relative;">
<div class="decoracion-arriba"></div>
<div class="decoracion-abajo"></div>
<div class="calculadora">
<div class="pantalla">0</div>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="operador">/</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operador">*</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="operador">-</button>
<button>0</button>
<button>.</button>
<button class="igual">=</button>
<button class="operador">+</button>
</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario