Skip to content

Commit 5d00a75

Browse files
committed
Add the styles for music player
1 parent 14fa618 commit 5d00a75

File tree

1 file changed

+86
-0
lines changed

1 file changed

+86
-0
lines changed

Source-Code/MusicPlayer/style.css

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* styles.css */
2+
body {
3+
font-family: Arial, sans-serif;
4+
background-color: #1e1e2f;
5+
color: #fff;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
margin: 0;
11+
}
12+
13+
.music-player {
14+
text-align: center;
15+
background: #29293d;
16+
padding: 20px;
17+
border-radius: 10px;
18+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
19+
width: 300px;
20+
}
21+
22+
.player h2 {
23+
font-size: 18px;
24+
margin-bottom: 20px;
25+
}
26+
27+
.controls {
28+
display: flex;
29+
justify-content: center;
30+
gap: 15px;
31+
margin-bottom: 15px;
32+
}
33+
34+
.controls button {
35+
background: #3b3b57;
36+
color: white;
37+
border: none;
38+
padding: 10px 15px;
39+
border-radius: 5px;
40+
cursor: pointer;
41+
font-size: 16px;
42+
}
43+
44+
.add-song button {
45+
background: #3b3b57;
46+
color: white;
47+
border: none;
48+
padding: 10px;
49+
margin-top: 10px;
50+
border-radius: 5px;
51+
cursor: pointer;
52+
}
53+
54+
.controls button:hover {
55+
background: #50506b;
56+
}
57+
58+
#volume {
59+
width: 100%;
60+
}
61+
62+
.song-list ul {
63+
list-style: none;
64+
padding: 0;
65+
margin: 0;
66+
}
67+
68+
.song-list li {
69+
background: #3b3b57;
70+
padding: 10px;
71+
margin: 5px 0;
72+
border-radius: 5px;
73+
cursor: pointer;
74+
}
75+
76+
.song-list li:hover {
77+
background: #50506b;
78+
}
79+
80+
.add-song input {
81+
margin-top: 10px;
82+
}
83+
84+
.add-song button:hover {
85+
background: #50506b;
86+
}

0 commit comments

Comments
 (0)