<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
>
<
title
>Piano Playing</
title
>
<
link
rel
=
"stylesheet"
href
=
"style.css"
>
</
head
>
<
body
>
<
div
class
=
"container"
>
<
div
class
=
"intro-container"
>
<
h1
>
How to build a Piano using Html,
CSS and JavaScript
</
h1
>
<
h3
>
This is a 24 Key Piano, Click any
piano key to play the sound.
</
h3
>
</
div
>
<
div
class
=
"piano-container"
>
<
ul
class
=
"piano-keys-list"
>
<
li
class
=
"piano-keys white-key"
data-list
=
"01"
>
</
li
>
<
li
class
=
"piano-keys black-key"
data-list
=
"02"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"03"
>
</
li
>
<
li
class
=
"piano-keys black-key"
data-list
=
"04"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"05"
>
</
li
>
<
li
class
=
"piano-keys black-key"
data-list
=
"06"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"07"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"08"
>
</
li
>
<
li
class
=
"piano-keys black-key"
data-list
=
"09"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"10"
>
</
li
>
<
li
class
=
"piano-keys black-key"
data-list
=
"11"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"12"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"13"
>
</
li
>
<
li
class
=
"piano-keys black-key"
data-list
=
"14"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"15"
>
</
li
>
<
li
class
=
"piano-keys black-key"
data-list
=
"16"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"17"
>
</
li
>
<
li
class
=
"piano-keys black-key"
data-list
=
"18"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"19"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"20"
>
</
li
>
<
li
class
=
"piano-keys black-key"
data-list
=
"21"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"22"
>
</
li
>
<
li
class
=
"piano-keys black-key"
data-list
=
"23"
>
</
li
>
<
li
class
=
"piano-keys white-key"
data-list
=
"24"
>
</
li
>
</
ul
>
</
div
>
</
div
>
<
script
src
=
"script.js"
></
script
>
</
body
>
</
html
>