Skip to content

Commit 9b919ff

Browse files
nisha331nisha331
authored
guitar
1 parent 63a6d97 commit 9b919ff

File tree

4 files changed

+228
-0
lines changed

4 files changed

+228
-0
lines changed

‎Guitar/README.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Guitar
2+
3+
4+
## 💻Tech Stack
5+
<br>
6+
7+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
8+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
9+
![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
10+
11+
<br>
12+
13+
### How to get the game on your local machine:
14+
15+
---
16+
17+
- Download or clone the repository
18+
19+
```
20+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
21+
```
22+
23+
- Go to the directory
24+
- Run the index.html file
25+
- click on the guitar and then hower over it to listen the sound of guitar.
26+
27+
<br>
28+
29+
### How to use
30+
1. click on the guitar and then hower over it to listen the sound of guitar.
31+
32+
33+
It somehow look like this.
34+
35+
36+
## Happy Coding!

‎Guitar/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<link rel="stylesheet" href="./style.css">
6+
<script src="script.js" defer></script>
7+
<title>Guitar</title>
8+
</head>
9+
10+
<body>
11+
<div class="container">
12+
<div align=center>
13+
<h1 style="color: white;">THE GUITAR</h1>
14+
<div class="guitar">
15+
<div id="lutemain1" align="center">
16+
<div id="lutelines" align="center">
17+
<div id="vline1" align="center" onmouseenter="play('https://raw.githubusercontent.com/212mr/m15final/master/music/lute01.mp3')" style="height:490px;"></div>
18+
19+
<div id="vline2" align="center" onmouseenter="play('https://raw.githubusercontent.com/212mr/m15final/master/music/lute02.mp3')" style="height:490px;"></div>
20+
21+
<div id="vline3" align="center" onmouseenter="play('https://raw.githubusercontent.com/212mr/m15final/master/music/lute03.mp3')" style="height:490px;"></div>
22+
23+
<div id="vline4" align="center" onmouseenter="play('https://raw.githubusercontent.com/212mr/m15final/master/music/lute02.mp3')" style="height:490px;"></div>
24+
25+
<div id="vline4" align="center" onmouseenter="play('https://raw.githubusercontent.com/212mr/m15final/master/music/lute04.mp3')" style="height:490px;"></div>
26+
27+
<div id="vline5" align="center" onmouseenter="play('https://raw.githubusercontent.com/212mr/m15final/master/music/lute05.mp3')" style="height:490px;"></div>
28+
</div>
29+
<div id="lutecircle" align="center"></div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
<script src="./script.js"></script>
35+
36+
</body>
37+
38+
</html>

‎Guitar/script.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function play(mp3_file)
2+
{
3+
var audio = new Audio(mp3_file);
4+
audio.play();
5+
}

‎Guitar/style.css

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
*, *::before, *::after
2+
{
3+
box-sizing: border-box;
4+
}
5+
6+
div#lutemain1
7+
{
8+
vertical-align: middle;
9+
margin-top: -50px;
10+
}
11+
div#lutelines
12+
{
13+
display: inline-block;
14+
height: 100%;
15+
cursor: pointer;
16+
margin-top: 100px;
17+
}
18+
19+
div#vline1
20+
{
21+
/* Each string is one div tag */
22+
width: 6px; /* string width */
23+
background-color: #ffc023; /* string color */
24+
height: 100%; /* Override in-line if you want specific height. */
25+
float: left;
26+
margin-left: 40px;
27+
}
28+
29+
div#vline2
30+
{
31+
width: 6px;
32+
background-color: #ffc023;
33+
height: 100%;
34+
float: left;
35+
margin-left: 40px;
36+
}
37+
38+
div#vline3
39+
{
40+
41+
width: 6px;
42+
background-color: #ffc023;
43+
height: 100%;
44+
float: left;
45+
cursor: pointer;
46+
margin-left: 40px;
47+
}
48+
49+
div#vline4
50+
{
51+
width: 6px;
52+
background-color: #ffc023;
53+
height: 100%;
54+
float: left;
55+
cursor: pointer;
56+
margin-left: 40px;
57+
}
58+
59+
div#vline5
60+
{
61+
width: 6px;
62+
background-color: #ffc023;
63+
height: 100%;
64+
float: left;
65+
margin-left: 40px;
66+
cursor: pointer;
67+
margin-right: 40px;
68+
}
69+
70+
div#vline1:hover
71+
{
72+
background-color: #803d1d
73+
}
74+
75+
div#vline2:hover
76+
{
77+
background-color: #803d1d
78+
}
79+
80+
div#vline3:hover
81+
{
82+
background-color: #803d1d
83+
}
84+
85+
div#vline4:hover
86+
{
87+
background-color: #803d1d
88+
}
89+
90+
div#vline5:hover
91+
{
92+
background-color: #803d1d
93+
}
94+
95+
div#lutecircle
96+
{
97+
width: 315px;
98+
height: 315px;
99+
background: #f2f2f2;
100+
border: 8px solid #ffc023;
101+
-moz-border-radius: 50%;
102+
-webkit-border-radius: 50%;
103+
border-radius: 50%;
104+
margin-top: -330px;
105+
}
106+
body
107+
{
108+
margin: 0;
109+
min-height: 100vh;
110+
display: flex;
111+
padding-top: 20px;
112+
justify-content: center;
113+
align-items: center;
114+
padding-bottom: 20px;
115+
}
116+
.container
117+
{
118+
background-color: black;
119+
height: 640px;
120+
color:white;
121+
width: 750px;
122+
text-align: center;
123+
}
124+
125+
button {
126+
border: none;
127+
border-radius: 20px;
128+
padding: 10px;
129+
color: white;
130+
letter-spacing: 1.5px;
131+
font-size: 15px;
132+
transition: 0.5s;
133+
margin-top: 20px;
134+
margin-left: 00%;
135+
}
136+
137+
button:hover,
138+
h1:hover {
139+
transform: scale(1.1);
140+
}
141+
142+
button:hover {
143+
background-color: #e21336;
144+
}
145+
146+
#btn {
147+
color: white;
148+
font-size: 25px;
149+
}

0 commit comments

Comments
 (0)