<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.key {
width: 60px;
height: 40px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius:8px;
margin:1px auto;
background:white;
box-shadow:3px 3px 3px black;
}
.mbody{
width:230px;
height:600px;
border:2px solid blue;
padding:4px;
text-align:center;
border-radius:18px 18px 40px 40px;
background:cyan;
box-shadow:10px 10px 10px black;
}
.display{
width:180px;
height:240px;
border:3px solid blue;
margin:24px 21px;
background:blue;
box-shadow:-5px -5px -5px black;
margin-bottom:1px;
}
#navkey2{
width:70px;
height:65px;
border:2px solid blue;
float:center;
margin:10px auto;
border-radius:8px;
background:white;
box-shadow:3px 3px 3px black;
}
#navkey1{
width:55px;
height:65px;
border:2px solid green;
float:center;
margin:10px auto;
border-radius:8px;
background:white;
box-shadow:3px 3px 3px black;
background:lightgreen;
}
#navkey3{
width:55px;
height:65px;
border:2px solid red;
margin:10px auto;
border-radius:8px;
background:white;
box-shadow:3px 3px 3px black;
background:tomato;
}
.nav-key {
display:flex;
flex-wrap:wrap;
padding:2px auto;
}
.speaker{
width:80px;
height:4px;
border:2px solid blue;
margin:5px auto;
background:white;
border-radius:3px;
}
.key1 {
width:60px;
height:40px;
border:1px solid black;
border-radius:8px 8px 8px 28px;
background:white;
margin-top:0px;
box-shadow:3px 3px 3px black;
margin:1px auto;
}
.key2 {
border:1px solid black;
border-radius:8px 8px 28px 8px;
background:white;
box-shadow:3px 3px 3px black;
width:60px;
height:40px;
margin:1px auto;
}
.mbody:hover {
background:yellow;
}
</style>
<title>Mobile Keypad</title>
</head>
<body>
<div class="mbody">
<div class="speaker"></div>
<div class="display">
<span>📶📶✉️                          <span style="width:8px;height:5px; background:green">🟩🟩</span>
</span>
<h3 style="color:#fff;">Vodafone IN  </h3>
<h1 style="color:white;">8:48 PM</h1>
<h3 style="color:#fff;">27/01/2024 Saturday</h3>
<h3 style="color:#fff;">VAISHNAVI</h3>
<h3 style="color:#fff; margin:30px auto; word-spacing:65px;">Menu Contacts</h3>
</div>
<h3 style="margin-top:3px;margin-bottom:2px;font-weight:900;color:#000;">NOKIYA</h3>
<div class="nav-key">
<div id="navkey1">➖<br><br>📞</div>
<div id="navkey2">
<p style="text-align:center;margin:1px;font-size:25px">^</p>
<p style="margin:-10px;word-spacing:10px; font-size:25px;"><  ></p>
<p style="text-align:center;margin:8px;font-size20px">v</p>
</div>
<div id="navkey3">➖<br><br>📞</div>
</div>
<div class="keypad">
<div class="key">1<br>abc</div>
<div class="key">2<br>def</div>
<div class="key">3<br>ghi</div>
<div class="key">4<br>jkl</div>
<div class="key">5<br>mno</div>
<div class="key">6<br>pqr
</div>
<div class="key">7<br>stu
</div>
<div class="key">8<br>vwx
</div>
<div class="key">9<br>yz
</div>
<div class="key1">*<br>🔓
</div>
<div class="key">0<br>abc
</div>
<div class="key2">#<br>abc
</div>
</div>
</div>
</body>
</html>
