107 lines
4.1 KiB
HTML
107 lines
4.1 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<link rel="stylesheet" href="estilo.css">
|
||
|
|
<title>Test Page</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="wrapper" aria-label="Casio PT-1 Keyboard illustration made with HTML and CSS">
|
||
|
|
<div class="casio" aria-hidden="true">
|
||
|
|
<div class="speaker"></div>
|
||
|
|
<div class="logo">
|
||
|
|
<h1><span>Casio</span> <span>PT-1</span></h1>
|
||
|
|
</div>
|
||
|
|
<div class="controls">
|
||
|
|
<div class="controls-labels">
|
||
|
|
<p>mode</p>
|
||
|
|
<p>volume</p>
|
||
|
|
<p>tone</p>
|
||
|
|
<p>tempo</p>
|
||
|
|
<p>one key play</p>
|
||
|
|
</div>
|
||
|
|
<div class="controls-bar">
|
||
|
|
<div class="mode-container">
|
||
|
|
<div class="mode-bar"></div>
|
||
|
|
<div class="mode-handle"></div>
|
||
|
|
</div>
|
||
|
|
<div class="volume-container">
|
||
|
|
<div class="volume-bar"></div>
|
||
|
|
<div class="volume-handle"></div>
|
||
|
|
</div>
|
||
|
|
<div class="tone-container">
|
||
|
|
<div class="tone-bar"></div>
|
||
|
|
<div class="tone-handle"></div>
|
||
|
|
</div>
|
||
|
|
<div class="clear btn"></div>
|
||
|
|
<div class="del btn"></div>
|
||
|
|
<div class="down btn"></div>
|
||
|
|
<div class="up btn"></div>
|
||
|
|
<div class="select btn"></div>
|
||
|
|
<div class="reset btn"></div>
|
||
|
|
<div class="demo btn"></div>
|
||
|
|
<div class="memory btn"></div>
|
||
|
|
<div class="onekey-1 bigbtn"></div>
|
||
|
|
<div class="onekey-2 bigbtn"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="keys-container">
|
||
|
|
<div class="white">
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
</div>
|
||
|
|
<div class="black">
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class=""></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class=""></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class=""></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class=""></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
<div class="key"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<footer>
|
||
|
|
<style>
|
||
|
|
.mifooter {
|
||
|
|
position: fixed;
|
||
|
|
left: 0;
|
||
|
|
bottom:0;
|
||
|
|
width: 100%;
|
||
|
|
background-color: magenta;
|
||
|
|
color: white;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="mifooter">
|
||
|
|
<p style="text-align:right; background-color:340847;"><small>thanks <a href="https://fossheim.io/" target="_blank" title="design">Fossheim</a></small></p>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|