<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<style>
.calculator{
background-color:whitesmoke;
height:350px ;
width: 200px;
border: black;
padding: 20px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
button{
background-color:rgb(243, 239, 233);
width: 45px;
height: 43px;
border-radius: 50%;
font-size: large;
cursor: pointer;
transition: 0.3s;
border: double;
box-shadow:0 0 12px black;
}
button:hover{
background-color:rgb(205, 195, 195);
border-radius: 8px;
box-shadow:0 0 30px yellow;
}
.akash{
background-color: orange;
}
.operator{
background-color: aqua;
}
.operator:hover{
background-color:rebeccapurple;
border: radius 15px;
box-shadow: 0 0 30px salmon;
}
#display{
height: 35px;
width: 200px;
padding:0px;
font-size: 20px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
#display:hover
{
border-radius: 10px;
box-shadow: 0 0 30px cornflowerblue;
}
</style>
</head>
<div class="calculator">
<input type="text" id="display" readonly>
<br><br>
<button onclick="display.value += '7'">7</button>
<button onclick="display.value += '8'">8</button>
<button onclick="display.value += '9'">9</button>
<button onclick="display.value += '/'">/</button>
<br><br>
<button onclick="display.value += '4'">4</button>
<button onclick="display.value += '5'">5</button>
<button onclick="display.value += '6'">6</button>
<button onclick="display.value += '*'">*</button>
<br><br>
<button onclick="display.value += '1'">1</button>
<button onclick="display.value += '2'">2</button>
<button onclick="display.value += '3'">3</button>
<button onclick="display.value += '-'">-</button>
<br><br>
<button onclick="display.value += '0'">0</button>
<button onclick="display.value += '.'">.</button>
<button onclick="display.value = eval(display.value)" class="operator">=</button>
<button onclick="display.value += '+'">+</button>
<br><br>
<button onclick="display.value = ''">C</button>
</div>
</html>
</body>
</html>
OTP
<html>
<body>
<style>
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}
#input1{
width: 32px;
border: none;
border-bottom: 1.5px solid black;
background-color: rgb(218, 209, 209);
}
#input2{
width: 32px;
border: none;
border-bottom: 1.5px solid black;
background-color: rgb(218, 209, 209);
}
#input3{
width: 32px;
border: none;
border-bottom: 1.5px solid black;
background-color: rgb(218, 209, 209);
}
#input4{
width: 32px;
border: none;
border-bottom: 1.5px solid black;
background-color: rgb(218, 209, 209);
}
button{
height: 30px;
width: 80px;
background-color: blue;
box-shadow: 0 0 30px blue;
border-radius: 5px;
cursor: pointer;
}
button:hover{
box-shadow: 0 0 30px yellow;
background-color: yellow;
color: white;
}
.form{
height: 200px;
width: 230px;
background-color: rgb(218, 209, 209);
}
</style>
<form class="form">
<h3>OTP verification</h3>
<p>we are verified by the otp</p>
<div class="inputs">
<input id="input1" type="text" maxlength="1" />
<input id="input2" type="text" maxlength="1" />
<input id="input3" type="text" maxlength="1" />
<input id="input4" type="text" maxlength="1" /><br><br>
<button><b>verify me</b></button>
</div>
</form>
</body>
</html>
GLOWING BUTTONS
<html>
<body>
<style>
button{
height: 30px;
width: 80px;
background-color: blue;
box-shadow: 0 0 30px blue;
border-radius: 5px;
cursor: pointer;
}
button:hover{
box-shadow: 0 0 30px yellow;
background-color: yellow;
color: white;
}
</style>
<button>CODING</button>
</body>
</html>
<html>
<body>
<style>
button{
background-color: aqua;
border: none;
height: 50px;
width: 100px;
box-shadow: 0 0 50px aqua;
}
button:hover{
background-color: aquamarine;
box-shadow: 0 0 50px wheat;
}
</style>
<button>CODING</button>
</body>
</html>
