<!DOCTYPE html>
<html>
<head>
<title>Calculator Design</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: black;
}
.calculator{
text-align: center;
margin: 0 auto;
height: 350px;
width: 300px;
padding: 12px;
box-shadow: 15px 16px 17px 18px black;
position: relative;top: 5px;
background-color: purple;
transition: 2s;
}
.calculator:hover{
box-shadow: 17px 18px 19px 20px black;
transform: scale(1.2) skew(-45deg);
}
.calculator-inbox{
height: 45px;
width: 250px;
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 3px;
text-align: right;
padding-right: 7px;
color: wheat;
}
.btn{
height: 65px;
width: 65px;
font-weight: bold;
font-size: 1.3rem;
background-color: gray;
color: wheat;
}
.btn:hover{
background-color: yellow;
color: black;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: wheat;">Calculator</h1>
<div class="calculator">
<input type="text" class="calculator-inbox">
<div>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn" style="background-color: thistle;">DEL</button>
</div>
<div>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn" style="background-color: saddlebrown;">*</button>
</div>
<div>
<button class="btn"> 1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn" style="background-color: salmon;">+</button>
</div>
<div>
<button class="btn">0</button>
<button class="btn">.</button>
<button class="btn">EXP</button>
<button class="btn" style="background-color: blue;">Ans</button>
</div>
</div>
</body>
</html>
Comments
Post a Comment