Skip to content

Commit 4c972fd

Browse files
shubrauttshubrautt
committed
Files Added
1 parent e15469a commit 4c972fd

File tree

5 files changed

+124
-0
lines changed

5 files changed

+124
-0
lines changed

‎Music Player Desing/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# loading-Animation
2+
HTML CSS
3+
<br>
4+
<img src="demo.png" width="150px" height="150px">
5+

‎Music Player Desing/Sia - Cheap Thrills.jpg‎

27 KB
Loading

‎Music Player Desing/demo.png‎

42.9 KB
Loading

‎Music Player Desing/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css">
8+
<script src="https://kit.fontawesome.com/f6816dd194.js" crossorigin="anonymous"></script>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<i class="fas fa-chevron-down fa-2x"></i>
13+
<img src="Sia - Cheap Thrills.jpg" alt="">
14+
<p class="songName">Sia - Cheap Thrills</p>
15+
<div class="controls-container center">
16+
<div class="range">
17+
<p style="float: left; margin: 15px 0 0 10px;">00:00</p>
18+
<p style="float: right; margin: 15px 10px 0 0;">39:45</p>
19+
<input type="range" name="" id="range" max="100" min="0" value="10">
20+
</div>
21+
<div class="controls center">
22+
<i class="fas fa-step-backward fa-2x"></i>
23+
<i class="fas fa-play fa-2x" id="btn" onclick="changeClass();"></i>
24+
<i class="fas fa-step-forward fa-2x"></i>
25+
</div>
26+
</div>
27+
</div>
28+
29+
<script>
30+
document.getElementById("range").disabled = true;
31+
const btn = document.getElementById("btn");
32+
function changeClass(){
33+
if(btn.classList.contains("fa-play")){
34+
btn.classList.remove("fa-play");
35+
btn.classList.add("fa-pause");
36+
}else{
37+
btn.classList.add("fa-play");
38+
}
39+
}
40+
</script>
41+
</body>
42+
</html>

‎Music Player Desing/style.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap');
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
}
6+
body{
7+
width: 100px;
8+
height: 100vh;
9+
background: #0F2027; /* fallback for old browsers */
10+
background: -webkit-linear-gradient(to right, #2C5364, #203A43, #0F2027); /* Chrome 10-25, Safari 5.1-6 */
11+
background: linear-gradient(to right, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
12+
}
13+
.container{
14+
width: 400px;
15+
height: 600px;
16+
background: rgba(255, 255, 255, 0.123);
17+
position: absolute;
18+
top: 50%;
19+
left: 50%;
20+
transform: translate(-50%,-50%);
21+
border-radius: 50px;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
flex-direction: column;
26+
color: rgba(255, 255, 255, 0.562);
27+
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.171);
28+
}
29+
.container img{
30+
width: 250px;
31+
height: 250px;
32+
border-radius: 50px;
33+
}
34+
i{
35+
cursor: pointer;
36+
margin: 30px;
37+
}
38+
.songName{
39+
font-size: 1.2rem;
40+
margin: 15px;font-family: 'Yusei Magic', sans-serif;
41+
}
42+
input[type="range"]{
43+
width: 250px;
44+
margin: 20px;
45+
/* -webkit-appearance: none; */
46+
outline: none;
47+
}
48+
input[type="range"]::-webkit-slider-runnable-track {
49+
border-radius: 4px;
50+
width: 100%;
51+
height: 2px;
52+
}
53+
54+
input[type="range"]::-webkit-slider-thumb {
55+
-webkit-appearance: none;
56+
height: 12px;
57+
width: 12px;
58+
background: rgb(255, 255, 255);
59+
border-radius: 50%;
60+
margin-top: -7px;
61+
}
62+
.center{
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
}
67+
.controls-container{
68+
width: 300px;
69+
background: rgba(255, 255, 255, 0.137);
70+
border-radius: 20px;
71+
flex-direction: column;
72+
margin-bottom: 50px;
73+
box-shadow: 0 0 50px rgba(0, 0, 0, 0.171);
74+
}
75+
.controls{
76+
width: 350px;
77+
}

0 commit comments

Comments
 (0)