Skip to content

Commit 7fc0102

Browse files
Mu-WahajMu-Wahaj
committed
update page
1 parent bf884de commit 7fc0102

File tree

11 files changed

+430
-17
lines changed

11 files changed

+430
-17
lines changed

‎app.css

+134-8
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,11 @@ a {
2727
font-family: "Roboto", sans-serif;
2828
background-color: black;
2929
color: white;
30-
height: 70px;
30+
height: 60px;
31+
position: fixed;
32+
width: 100%;
33+
top: 0;
34+
3135
}
3236

3337
.logo-section {
@@ -72,7 +76,7 @@ a {
7276
color: white;
7377
font-family: "Varela Round", sans-serif;
7478
display: flex;
75-
margin: 23px auto;
79+
margin: 70px auto;
7680
width: 70%;
7781
border-radius: 12px;
7882
padding-top: 15px;
@@ -81,17 +85,44 @@ a {
8185
background-size: cover;
8286
}
8387

84-
.songItems {
88+
.songItemContainer {
89+
margin-top: 74px;
90+
}
91+
92+
.songItem {
8593
height: 50px;
8694
display: flex;
8795
background-color: transparent;
88-
width: 40%;
89-
margin: 15px 0;
96+
color: #fff;
97+
margin: 12px 0;
98+
justify-content: flex-start;
99+
align-items: center;
100+
/* border-radius: 34px; */
101+
}
102+
103+
.songItem img {
104+
width: 43px;
105+
margin: 0 20px;
106+
/* border-radius: 34px; */
107+
}
108+
109+
.songlistplay {
110+
display: flex;
111+
align-items: center;
112+
113+
}
114+
115+
.timestamp {
116+
margin: 0 15px;
117+
}
118+
119+
.timestamp i {
120+
cursor: pointer;
90121
}
91122

92123
.bottom {
93124
position: sticky;
94-
height: 100px;
125+
height: 70px;
95126
background-color: black;
96127
color: white;
97128
bottom: 0;
@@ -103,7 +134,7 @@ a {
103134
}
104135

105136
.icons {
106-
margin-top: 15px;
137+
margin-top: 10px;
107138

108139
}
109140

@@ -112,5 +143,100 @@ a {
112143
}
113144

114145
#myProgressbar {
115-
width: 60vw;
146+
width: 80vw;
147+
height: 7px;
148+
cursor: pointer;
149+
}
150+
151+
.songInfo {
152+
position: absolute;
153+
left: 10vw;
154+
font-family: 'Varela Round', sans-serif;
155+
margin-top: 10px;
156+
}
157+
158+
.songInfo img {
159+
opacity: 0;
160+
transition: opacity 0.4s ease-in;
161+
}
162+
163+
.icons i {
164+
font-size: 2rem;
165+
}
166+
167+
168+
@media screen and (max-width:900px) {
169+
.songInfo {
170+
display: flex;
171+
flex-direction: column;
172+
}
173+
174+
#masterSongName {
175+
font-size: 0.8rem;
176+
}
177+
}
178+
179+
@media screen and (max-width:768px) {
180+
.header .nav-link {
181+
display: none;
182+
}
183+
184+
.header {
185+
padding: 0;
186+
}
187+
188+
.container .songs-left h1 {
189+
font-size: 1.5rem;
190+
}
191+
192+
.songs-left-items {
193+
font-size: 0.7rem;
194+
}
195+
}
196+
197+
@media screen and (max-width:768px) {
198+
.header {
199+
display: flex;
200+
flex-direction: row;
201+
align-items: center;
202+
justify-content: space-around;
203+
204+
}
205+
206+
.nav-link .nav-links-items {
207+
208+
padding: 0 1rem;
209+
}
210+
211+
#myProgressbar {
212+
width: 60vw;
213+
}
214+
215+
.songInfo {
216+
left: 0;
217+
padding-left: 16px;
218+
}
219+
220+
.icons i {
221+
font-size: 1.5rem;
222+
}
223+
}
224+
225+
@media screen and (max-width:580px) {
226+
#myProgressbar {
227+
width: 50vw;
228+
}
229+
230+
.songInfo {
231+
width: 90px;
232+
}
233+
234+
#masterSongName {
235+
font-size: 0.6rem;
236+
}
237+
238+
.name-time {
239+
display: flex;
240+
flex-direction: column;
241+
}
116242
}

‎index.html

+132-9
Original file line numberDiff line numberDiff line change
@@ -31,24 +31,147 @@
3131
<div class="songs-left">
3232
<h1>Best OF Month August - Copyright sounds</h1>
3333
<div class="songs-left-items">
34-
<div class="songItems">
35-
<img src="covers/1.jpg" alt="Cover" />
36-
<span class="song-name">Let Me Love You</span>
37-
<span class="song-list-play"
38-
><span>5a:34</span><i class="far fa-play-circle"></i
34+
<div class="songItem">
35+
<img alt="cover" />
36+
<span class="songName">song name from js</span>
37+
<span class="songlistplay"
38+
><span class="timestamp"
39+
>05:34
40+
<i id="0" class="far songItemPlay fa-play-circle"></i> </span
3941
></span>
4042
</div>
43+
<div class="songItem">
44+
<img alt="cover" />
45+
<span class="songName">song name from js</span>
46+
<span class="songlistplay"
47+
><span class="timestamp"
48+
>05:34
49+
<i id="1" class="far songItemPlay fa-play-circle"></i> </span
50+
></span>
51+
</div>
52+
<div class="songItem">
53+
<img alt="cover" />
54+
<span class="songName">song name from js</span>
55+
<span class="songlistplay"
56+
><span class="timestamp"
57+
>05:34
58+
<i id="2" class="far songItemPlay fa-play-circle"></i> </span
59+
></span>
60+
</div>
61+
<div class="songItem">
62+
<img alt="cover" />
63+
<span class="songName">song name from js</span>
64+
<span class="songlistplay"
65+
><span class="timestamp"
66+
>05:34
67+
<i id="3" class="far songItemPlay fa-play-circle"></i> </span
68+
></span>
69+
</div>
70+
<div class="songItem">
71+
<img alt="cover" />
72+
<span class="songName">song name from js</span>
73+
<span class="songlistplay"
74+
><span class="timestamp"
75+
>05:34
76+
<i id="4" class="far songItemPlay fa-play-circle"></i> </span
77+
></span>
78+
</div>
79+
<div class="songItem">
80+
<img alt="cover" />
81+
<span class="songName">song name from js</span>
82+
<span class="songlistplay"
83+
><span class="timestamp"
84+
>05:34
85+
<i id="5" class="far songItemPlay fa-play-circle"></i> </span
86+
></span>
87+
</div>
88+
<div class="songItem">
89+
<img alt="cover" />
90+
<span class="songName">song name from js</span>
91+
<span class="songlistplay"
92+
><span class="timestamp"
93+
>05:34
94+
<i id="6" class="far songItemPlay fa-play-circle"></i> </span
95+
></span>
96+
</div>
97+
<div class="songItem">
98+
<img alt="cover" />
99+
<span class="songName">song name from js</span>
100+
<span class="songlistplay"
101+
><span class="timestamp"
102+
>05:34
103+
<i id="7" class="far songItemPlay fa-play-circle"></i> </span
104+
></span>
105+
</div>
106+
<div class="songItem">
107+
<img alt="cover" />
108+
<span class="songName">song name from js</span>
109+
<span class="songlistplay"
110+
><span class="timestamp"
111+
>05:34
112+
<i id="8" class="far songItemPlay fa-play-circle"></i> </span
113+
></span>
114+
</div>
115+
<div class="songItem">
116+
<img alt="cover" />
117+
<span class="songName">song name from js</span>
118+
<span class="songlistplay"
119+
><span class="timestamp"
120+
>05:34
121+
<i id="9" class="far songItemPlay fa-play-circle"></i> </span
122+
></span>
123+
</div>
124+
<div class="songItem">
125+
<img alt="cover" />
126+
<span class="songName">song name from js</span>
127+
<span class="songlistplay"
128+
><span class="timestamp"
129+
>05:34
130+
<i id="10" class="far songItemPlay fa-play-circle"></i> </span
131+
></span>
132+
</div>
133+
<div class="songItem">
134+
<img alt="cover" />
135+
<span class="songName">song name from js</span>
136+
<span class="songlistplay"
137+
><span class="timestamp"
138+
>05:34
139+
<i id="11" class="far songItemPlay fa-play-circle"></i> </span
140+
></span>
141+
</div>
142+
<div class="songItem">
143+
<img alt="cover" />
144+
<div class="name-time">
145+
<span class="songName">song name from js</span>
146+
<span class="songlistplay"
147+
><span class="timestamp"
148+
>05:34
149+
<i id="12" class="far songItemPlay fa-play-circle"></i> </span
150+
></span>
151+
</div>
152+
</div>
41153
</div>
42154
</div>
43155
<div class="song-banner-right"></div>
44156
</div>
45157
<div class="bottom">
46-
<input type="range" name="range" id="myProgressbar" min="0" max="100" />
158+
<input
159+
type="range"
160+
name="range"
161+
id="myProgressbar"
162+
value="0"
163+
min="0"
164+
max="100"
165+
/>
47166
<div class="icons">
48167
<!-- fontawsome icons -->
49-
<i class="fa-solid fa-3x fa-backward-step"></i>
50-
<i class="far fa-3x fa-play-circle"></i>
51-
<i class="fa-solid fa-3x fa-forward-step"></i>
168+
<i class="fa-solid fa-backward-step" id="previous"></i>
169+
<i class="far fa-play-circle" id="masterPlay"></i>
170+
<i class="fa-solid fa-forward-step" id="next"></i>
171+
</div>
172+
<div class="songInfo">
173+
<img src="assets/playing.gif" width="42px" alt="cover" id="gif" />
174+
<span id="masterSongName">Warriyo - Mortals [NCS Release]</span>
52175
</div>
53176
</div>
54177
<script

0 commit comments

Comments
 (0)