Intro_basicos_HTML_CSS/home/index.html

107 lines
4.1 KiB
HTML
Raw Permalink Normal View History

2020-11-18 01:40:18 -03:00
<!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>