<!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>
0 Comments
"Thank you for taking the time to engage with this post! We value thoughtful and constructive comments that contribute to the discussion. Please keep your comments respectful and on-topic. We encourage you to share your insights, ask questions, and participate in meaningful conversations. Note that comments are moderated, and any inappropriate or spammy content will be removed. We look forward to hearing your thoughts!"