Skip to content

Commit f66c129

Browse files
Riyaskh123Riyaskh123
committed
audio
1 parent 246df10 commit f66c129

19 files changed

+10963
-73
lines changed

‎.DS_Store

10 KB
Binary file not shown.

‎College/.DS_Store

8 KB
Binary file not shown.

‎College/assets/css/audio.css

+307
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,307 @@
1+
*:focus {
2+
outline: none;
3+
}
4+
5+
#app-cover {
6+
position: relative;
7+
width: 100%;
8+
height: 100px;
9+
}
10+
11+
/* #bg-artwork {
12+
position: fixed;
13+
top: -30px;
14+
right: -30px;
15+
bottom: -30px;
16+
left: -30px;
17+
background-image: url("https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_1.jpg");
18+
background-repeat: no-repeat;
19+
background-size: cover;
20+
background-position: 50%;
21+
filter: blur(40px);
22+
-webkit-filter: blur(40px);
23+
z-index: 1;
24+
} */
25+
26+
/* #bg-layer {
27+
position: fixed;
28+
top: 0;
29+
right: 0;
30+
bottom: 0;
31+
left: 0;
32+
background-color: #fff;
33+
opacity: 0.51;
34+
z-index: 2;
35+
} */
36+
37+
#player {
38+
position: relative;
39+
height: 100%;
40+
z-index: 3;
41+
}
42+
43+
#player-track {
44+
position: absolute;
45+
top: 0;
46+
right: 15px;
47+
left: 15px;
48+
padding: 13px 22px 25px 184px;
49+
background-color: #78C48C88;
50+
backdrop-filter: blur(5px);
51+
-webkit-backdrop-filter: blur(5px);
52+
border-radius: 15px 15px 0 0;
53+
transition: 0.3s ease top;
54+
z-index: 1;
55+
}
56+
57+
#player-track.active {
58+
top: -82px;
59+
}
60+
61+
#album-name {
62+
color: #54576f;
63+
font-size: 17px;
64+
font-weight: bold;
65+
}
66+
67+
#track-name {
68+
color: #acaebd;
69+
font-size: 13px;
70+
margin: 2px 0 5px 0;
71+
}
72+
73+
#track-time {
74+
height: 12px;
75+
margin-bottom: 3px;
76+
overflow: hidden;
77+
}
78+
79+
#current-time {
80+
float: left;
81+
}
82+
83+
#track-length {
84+
float: right;
85+
}
86+
87+
#current-time,
88+
#track-length {
89+
color: transparent;
90+
font-size: 11px;
91+
background-color: #a3ffba;
92+
border-radius: 10px;
93+
transition: 0.3s ease all;
94+
}
95+
96+
#track-time.active #current-time,
97+
#track-time.active #track-length {
98+
color: #ffffff;
99+
background-color: transparent;
100+
}
101+
102+
#s-area,
103+
#seek-bar {
104+
position: relative;
105+
height: 4px;
106+
border-radius: 4px;
107+
}
108+
109+
#s-area {
110+
background-color: #ffe8ee;
111+
cursor: pointer;
112+
}
113+
114+
#ins-time {
115+
position: absolute;
116+
top: -29px;
117+
color: #fff;
118+
font-size: 12px;
119+
white-space: pre;
120+
padding: 5px 6px;
121+
border-radius: 4px;
122+
display: none;
123+
}
124+
125+
#s-hover {
126+
position: absolute;
127+
top: 0;
128+
bottom: 0;
129+
left: 0;
130+
opacity: 0.2;
131+
z-index: 2;
132+
}
133+
134+
#ins-time,
135+
#s-hover {
136+
background-color: #3b3d50;
137+
}
138+
139+
#seek-bar {
140+
content: "";
141+
position: absolute;
142+
top: 0;
143+
bottom: 0;
144+
left: 0;
145+
width: 0;
146+
background-color: #fd6d94;
147+
transition: 0.2s ease width;
148+
z-index: 1;
149+
}
150+
151+
#player-content {
152+
position: relative;
153+
height: 100%;
154+
background-color: #fff;
155+
box-shadow: 0 10px 10px #65656533;
156+
border-radius: 0 0 15px 15px;
157+
z-index: 2;
158+
}
159+
160+
#album-art {
161+
position: absolute;
162+
top: -40px;
163+
width: 115px;
164+
height: 115px;
165+
margin-left: 40px;
166+
transform: rotateZ(0);
167+
transition: 0.3s ease all;
168+
box-shadow: 0 0 0 10px #fff;
169+
border-radius: 50%;
170+
overflow: hidden;
171+
}
172+
173+
#album-art.active {
174+
top: -60px;
175+
box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
176+
}
177+
178+
#album-art:before {
179+
content: "";
180+
position: absolute;
181+
top: 50%;
182+
right: 0;
183+
left: 0;
184+
width: 20px;
185+
height: 20px;
186+
margin: -10px auto 0 auto;
187+
background-color: #d6dee7;
188+
border-radius: 50%;
189+
box-shadow: inset 0 0 0 2px #fff;
190+
z-index: 2;
191+
}
192+
193+
#album-art img {
194+
display: block;
195+
position: absolute;
196+
top: 0;
197+
left: 0;
198+
width: 100%;
199+
height: 100%;
200+
opacity: 0;
201+
z-index: -1;
202+
}
203+
204+
#album-art img.active {
205+
opacity: 1;
206+
z-index: 1;
207+
}
208+
209+
#album-art.active img.active {
210+
z-index: 1;
211+
animation: rotateAlbumArt 3s linear 0s infinite forwards;
212+
}
213+
214+
@keyframes rotateAlbumArt {
215+
0% {
216+
transform: rotateZ(0);
217+
}
218+
219+
100% {
220+
transform: rotateZ(360deg);
221+
}
222+
}
223+
224+
#buffer-box {
225+
position: absolute;
226+
top: 50%;
227+
right: 0;
228+
left: 0;
229+
height: 13px;
230+
color: #1f1f1f;
231+
font-size: 13px;
232+
font-family: Helvetica;
233+
text-align: center;
234+
font-weight: bold;
235+
line-height: 1;
236+
padding: 6px;
237+
margin: -12px auto 0 auto;
238+
background-color: rgba(255, 255, 255, 0.19);
239+
opacity: 0;
240+
z-index: 2;
241+
}
242+
243+
#album-art img,
244+
#buffer-box {
245+
transition: 0.1s linear all;
246+
}
247+
248+
#album-art.buffering img {
249+
opacity: 0.25;
250+
}
251+
252+
#album-art.buffering img.active {
253+
opacity: 0.8;
254+
filter: blur(2px);
255+
-webkit-filter: blur(2px);
256+
}
257+
258+
#album-art.buffering #buffer-box {
259+
opacity: 1;
260+
}
261+
262+
#player-controls {
263+
width: 250px;
264+
height: 100%;
265+
margin: 0 5px 0 141px;
266+
float: right;
267+
overflow: hidden;
268+
}
269+
270+
.control {
271+
width: 33.333%;
272+
float: left;
273+
padding: 12px 0;
274+
}
275+
276+
.button {
277+
width: 26px;
278+
height: 26px;
279+
margin: 25px;
280+
background-color: #fff;
281+
border-radius: 6px;
282+
cursor: pointer;
283+
}
284+
285+
.button i {
286+
display: block;
287+
color: #d6dee7;
288+
font-size: 26px;
289+
text-align: center;
290+
line-height: 1;
291+
}
292+
293+
.button,
294+
.button i {
295+
transition: 0.2s ease all;
296+
}
297+
298+
/* .button:hover {
299+
background-color: #d6d6de;
300+
color: #949494;
301+
302+
} */
303+
304+
.button:hover i {
305+
color: #949494;
306+
307+
}

‎College/assets/css/style.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -1106,7 +1106,7 @@ section {
11061106
}
11071107

11081108
.portfolio-details .portfolio-description {
1109-
padding-top: 30px;
1109+
padding: 15px;
11101110
}
11111111

11121112
.portfolio-details .portfolio-description h2 {
@@ -1117,6 +1117,7 @@ section {
11171117

11181118
.portfolio-details .portfolio-description p {
11191119
padding: 0;
1120+
text-align: justify;
11201121
}
11211122

11221123
/*--------------------------------------------------------------

0 commit comments

Comments
 (0)