<title>Edémédé</title>
<textarea name="the-textarea" id="write" placeholder="Pinye ma obu dezie edémédé gi ebe a...
Type or edit your work here..."autofocus></textarea>
<!--<div class ="container1">-->
<!--<div class="item1">-->
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">`</span><span class="on">~</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">1</span><span class="on">!</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">2</span><span class="on">@</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">3</span><span class="on">#</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">4</span><span class="on">$</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">5</span><span class="on">%</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">6</span><span class="on">^</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">7</span><span class="on">&</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">8</span><span class="on">*</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">9</span><span class="on">(</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">0</span><span class="on">)</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">-</span><span class="on">_</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">=</span><span class="on">+</span></button>
<button type="button" class="delete lastitem btn btn-outline-secondary" id="del-btn">delete</button>
<!--</div>-->
<!--<div class="item1">-->
<button type="button" class="tab btn btn-outline-secondary" id="tab-btn">tab</button>
<button type="button" class="letter btn btn-outline-secondary">q</button>
<button type="button" class="letter btn btn-outline-secondary">w</button>
<button type="button" class="letter btn btn-outline-secondary">e</button>
<button type="button" class="letter btn btn-outline-secondary">r</button>
<button type="button" class="letter btn btn-outline-secondary">t</button>
<button type="button" class="letter btn btn-outline-secondary">y</button>
<button type="button" class="letter btn btn-outline-secondary">u</button>
<button type="button" class="letter btn btn-outline-secondary">i</button>
<button type="button" class="letter btn btn-outline-secondary">o</button>
<button type="button" class="letter btn btn-outline-secondary">p</button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">[</span><span class="on">{</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">]</span><span class="on">}</span></button>
<button type="button" class="symbol lastitem btn btn-outline-secondary"><span class="off">\</span><span class="on">|</span></button>
<!--<li class="capslock">caps lock</li>-->
<!--</div>-->
<!--<div class="item1">-->
<button type="button" class="igletter btn btn-outline-secondary" id="a-dot">ạ</button>
<button type="button" class="igletter btn btn-outline-secondary" id="a-acute">à</button>
<button type="button" class="igletter btn btn-outline-secondary" id="a-grave">á</button>
<button type="button" class="igletter btn btn-outline-secondary" id="e-dot">ẹ</button>
<button type="button" class="igletter btn btn-outline-secondary" id="e-acute">è</button>
<button type="button" class="igletter btn btn-outline-secondary" id="e-grave">é</button>
<button type="button" class="igletter btn btn-outline-secondary" id="u-dot">ụ</button>
<button type="button" class="igletter btn btn-outline-secondary" id="u-acute">ù</button>
<button type="button" class="igletter btn btn-outline-secondary" id="u-grave">ú</button>
<button type="button" class="igletter btn btn-outline-secondary" id="i-dot">ị</button>
<button type="button" class="igletter btn btn-outline-secondary" id="i-acute">ì</button>
<button type="button" class="igletter btn btn-outline-secondary" id="i-grave">í</button>
<button type="button" class="igletter btn btn-outline-secondary" id="o-dot">ọ</button>
<button type="button" class="igletter btn btn-outline-secondary" id="o-acute">ò</button>
<button type="button" class="igletter btn btn-outline-secondary" id="o-grave">ó</button>
<!--</div>-->
<!--<div class="item1">-->
caps
a
s
d
f
g
h
j
k
l
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">;</span><span class="on">:</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">'</span><span class="on">"</span></button>
<button type="button" class="return lastitem btn btn-outline-secondary" id="return-btn">return</button>
shift
z
x
c
v
b
n
m
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">,</span><span class="on"><</span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">.</span><span class="on">></span></button>
<button type="button" class="symbol btn btn-outline-secondary"><span class="off">/</span><span class="on">?</span></button>
<button type="button" class="right-shift lastitem btn btn-outline-secondary" id="rshift-btn">shift</button>
<!--</div>-->
<!--<div>-->
<button type="button" class="space lastitem btn btn-outline-secondary"> </button>
</div>