Simple Calculator design use Html and css:
.png)
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<style>
body{
background-color: rgb(49, 49, 74);
}
.calculator{
display: flex;
flex-direction: column;
border:none;
padding: 20px;
width: 300px;
background-color:white;
border-radius: 9px;
box-shadow: 3px 3px 3px 3px rgba(45, 43, 43, 0.7);
margin-top: 80px;
margin-left: 500px;
}
.Numbers{
display: grid;
grid-template-columns: repeat(4, 1fr); /* Creates 3 equally sized columns */
gap: 10px;
}
p{
text-align: end;
color: black;
font-size: 25px;
font-weight: bold;
}
button{
padding: 20px;
border: none;
border-radius: 10px;
background-color: white;
font-weight: bold;
font-size: 18px;
cursor: pointer;
box-shadow: 3px 3px 3px 3px rgba(228, 225, 225, 0.7);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover{
background-color: rgb(229, 226, 226);
color: black;
}
.operators{
padding: 20px;
border: none;
border-radius: 10px;
background-color: white;
font-weight: bold;
color: orange;
font-size: 18px;
cursor: pointer;
box-shadow: 3px 3px 3px 3px rgba(216, 213, 213, 0.7);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.zero{
padding: 20px;
border: none;
border-radius: 10px;
background-color: white;
font-weight: bold;
font-size: 18px;
cursor: pointer;
box-shadow: 3px 3px 3px 3px rgba(198, 195, 195, 0.7);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.zero:hover{
background-color: rgb(229, 226, 226);
color: black;
}
</style>
</head>
<body>
<div class="CalculatorBorder">
<div class="calculator">
<p>0</p>
<div class="Numbers">
<button>AC</button>
<button>+/-</button>
<button>%</button>
<button class="operators">/</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button class="operators">x</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button class="operators">-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button class="operators">+</button>
<button class="zero">0</button>
<button>.</button>
<button class="operators">=</button>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment