Hi I want to create my own buttons background and more with customizations with html. Is any body there who knows about html.
Here is my created html. But not properly working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Gradient Keyboard</title>
<style>
body {
margin: 0;
background: linear-gradient(to right, cyan, seagreen, maroon);
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.keyboard {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 10px;
padding: 20px;
max-width: 700px;
width: 95vw;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
.key {
background-color: #1e1e1e;
color: yellow;
font-weight: bold;
text-align: center;
padding: 16px 0;
font-size: 1rem;
border-radius: 20px;
box-shadow: 0 3px 6px rgba(0,0,0,0.4);
user-select: none;
}
.space {
grid-column: span 3;
background-color: #2c2c2c;
font-size: 1.1rem;
}
.empty {
visibility: hidden;
}
</style>
</head>
<body>
<div class="keyboard">
<!-- Row 1 (7 keys) -->
<div class="key">❎</div>
<div class="key">❎</div>
<div class="key">Tt</div>
<div class="key">📋</div>
<div class="key">📄</div>
<div class="key">Del</div>
<div class="key">Esc</div>
<div class="empty"></div><div class="empty"></div><div class="empty"></div>
<!-- Row 2 (10 keys) -->
<div class="key">1</div><div class="key">2</div><div class="key">3</div>
<div class="key">4</div><div class="key">5</div><div class="key">6</div>
<div class="key">7</div><div class="key">8</div><div class="key">9</div>
<div class="key">0</div>
<!-- Row 3 (10 keys) -->
<div class="key">q</div><div class="key">w</div><div class="key">e</div>
<div class="key">r</div><div class="key">t</div><div class="key">y</div>
<div class="key">u</div><div class="key">i</div><div class="key">o</div>
<div class="key">p</div>
<!-- Row 4 (9 keys) -->
<div class="key">a</div><div class="key">s</div><div class="key">d</div>
<div class="key">f</div><div class="key">g</div><div class="key">h</div>
<div class="key">j</div><div class="key">k</div><div class="key">;</div>
<div class="empty"></div>
<!-- Row 5 (9 keys) -->
<div class="key">⇧</div><div class="key">z</div><div class="key">x</div>
<div class="key">c</div><div class="key">v</div><div class="key">b</div>
<div class="key">n</div><div class="key">m</div><div class="key">←</div>
<div class="empty"></div>
<!-- Row 6 (6 keys with wide space) -->
<div class="key space">English(India)</div>
<div class="key">.</div>
<div class="key">🔍</div>
<div class="key">🎤</div>
<div class="key">🔎</div>
<div class="key">,</div>
</div>
</body>
</html>
