105 lines
4.1 KiB
HTML
105 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - CasioPT-1.css</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<!-- tutorials on https://fossheim.io/writing/ -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap" rel="stylesheet">
|
|
|
|
|
|
<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>
|
|
|
|
<!--
|
|
If you like my work:
|
|
https://www.buymeacoffee.com/fossheim
|
|
https://www.patreon.com/fossheim
|
|
-->
|
|
<!-- partial -->
|
|
|
|
</body>
|
|
</html>
|