-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
126 lines (103 loc) · 5.1 KB
/
index.html
File metadata and controls
126 lines (103 loc) · 5.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="static/css/style.css">
<title>Piano Kit</title>
</head>
<body>
<header>
<h1>Welcome to Online Piano Lessons</h1>
</header>
<marquee direction="right"><h2>It's time to learn piano!!</h2></marquee>
<br>
<br>
<br>
<br>
<div>
<img id="nav-image" src="static/images/Studio_Project.jpeg" />
<ul>
<a href="index.html">Home</a>
<a href="#about">About Us</a>
<a href="login.html">Login</a>
<a href="#contact">Contact Us</a>
</ul>
</div>
<div class="about">
<h2>About Us</h2>
<p class="para1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum beatae, perferendis voluptates est nemo incidunt possimus dolor earum adipisci accusamus mollitia deserunt? Magnam rem, ipsa necessitatibus ut debitis nostrum vero.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem, culpa distinctio illo reiciendis reprehenderit earum tenetur autem sed blanditiis fugiat pariatur quasi sit eos mollitia ab! Tenetur libero deleniti nulla.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex necessitatibus voluptatum ab beatae! Beatae odio exercitationem quo nam saepe eos est consequuntur aliquam quae, quam laborum repellat impedit ipsum assumenda.
</p>
<br>
<p style="float: left;width: 500px;background-color: #00bfff;margin-right: 10px;left: 50px;color: black;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum beatae, perferendis voluptates est nemo incidunt possimus dolor earum adipisci accusamus mollitia deserunt? Magnam rem, ipsa necessitatibus ut debitis nostrum vero.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem, culpa distinctio illo reiciendis reprehenderit earum tenetur autem sed blanditiis fugiat pariatur quasi sit eos mollitia ab! Tenetur libero deleniti nulla.
</p>
<p style="float: right;width: 500px;background-color: #00bfff;margin-right: 20px; color: black;">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum beatae, perferendis voluptates est nemo incidunt possimus dolor earum adipisci accusamus mollitia deserunt? Magnam rem, ipsa necessitatibus ut debitis nostrum vero.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem, culpa distinctio illo reiciendis reprehenderit earum tenetur autem sed blanditiis fugiat pariatur quasi sit eos mollitia ab! Tenetur libero deleniti nulla.
</p>
<div style="clear: both;"></div>
<br>
<p>
<b>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum beatae, perferendis voluptates est nemo incidunt possimus dolor earum adipisci accusamus mollitia deserunt? Magnam rem, ipsa necessitatibus ut debitis nostrum vero.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem, culpa distinctio illo reiciendis reprehenderit earum tenetur autem sed blanditiis fugiat pariatur quasi sit eos mollitia ab! Tenetur libero deleniti nulla.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex necessitatibus voluptatum ab beatae! Beatae odio exercitationem quo nam saepe eos est consequuntur aliquam quae, quam laborum repellat impedit ipsum assumenda.
</b>
</p>
<span class="info">
For more information <a href="https://w3schools.com">Click here!</a>
</span>
<br>
</div>
<div>
<div class="board" style="justify-content: center;">
<div data-key="A" class="white btn" >
<h1>A</h1>
</div>
<div data-key="Ab" class="black btn"></div>
<div data-key="B" class="white btn">
<h1>B</h1>
</div>
<div data-key="Bb" class="black btn"></div>
<div data-key="C" class="white btn">
<h1>C</h1>
</div>
<div data-key="D" class="white btn">
<h1>D</h1>
</div>
<div data-key="Db" class="black btn"></div>
<div data-key="E" class="white btn">
<h1>E</h1>
</div>
<div data-key="Eb" class="black btn"></div>
<div data-key="F" class="white btn">
<h1>F</h1>
</div>
<div data-key="G" class="white btn">
<h1>G</h1>
</div>
<div data-key="Gb" class="black btn"></div>
<div data-key="Gb" class="white btn">
<h1>Gb</h1>
</div>
</div>
</div>
<br>
<div style="margin: auto; width: fit-content;">
<iframe width="480" height="320" src="https://www.youtube.com/embed/vphWgqbF-AM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<br> <br>
<br><br><br>
</div>
<footer>
<h2>Contact Us</h2>
<div>
<p>Made with ❤️ by PASC Web Team</p>
</div>
</footer>
<script src="./static/js/app.js"></script>
</body>
</html>