Skip to content

Commit bf884de

Browse files
Mu-WahajMu-Wahaj
committed
second commit
1 parent 3794de6 commit bf884de

File tree

3 files changed

+165
-2
lines changed

3 files changed

+165
-2
lines changed

‎app.css

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,500;0,700;1,400&display=swap');
2+
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,500;0,700;1,400&family=Varela+Round&display=swap');
3+
4+
* {
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body {
10+
background-color: #262626;
11+
}
12+
13+
.section-padding {
14+
padding: 0 2rem;
15+
}
16+
17+
a {
18+
text-decoration: none;
19+
color: unset;
20+
21+
}
22+
23+
.header {
24+
display: flex;
25+
flex-direction: row;
26+
align-items: center;
27+
font-family: "Roboto", sans-serif;
28+
background-color: black;
29+
color: white;
30+
height: 70px;
31+
}
32+
33+
.logo-section {
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
}
38+
39+
.header .nav-link {
40+
display: flex;
41+
flex-direction: row;
42+
}
43+
44+
45+
.nav-link .nav-links-items {
46+
list-style-type: none;
47+
padding: 0 2rem;
48+
}
49+
50+
.header img {
51+
width: 45px;
52+
}
53+
54+
.Logo {
55+
font-size: 1.5rem;
56+
font-weight: 600;
57+
}
58+
59+
.nav-links-items:hover {
60+
text-decoration: underline;
61+
cursor: pointer;
62+
color: rgb(154, 150, 150);
63+
transform: scale(1.06);
64+
transition: 0.5s;
65+
outline: none;
66+
67+
}
68+
69+
.container {
70+
min-height: 75vh;
71+
background-color: rgb(67, 64, 64);
72+
color: white;
73+
font-family: "Varela Round", sans-serif;
74+
display: flex;
75+
margin: 23px auto;
76+
width: 70%;
77+
border-radius: 12px;
78+
padding-top: 15px;
79+
background-image: url(assets/bg-2.jpg);
80+
background-repeat: no-repeat;
81+
background-size: cover;
82+
}
83+
84+
.songItems {
85+
height: 50px;
86+
display: flex;
87+
background-color: transparent;
88+
width: 40%;
89+
margin: 15px 0;
90+
}
91+
92+
.bottom {
93+
position: sticky;
94+
height: 100px;
95+
background-color: black;
96+
color: white;
97+
bottom: 0;
98+
display: flex;
99+
justify-content: center;
100+
align-items: center;
101+
flex-direction: column;
102+
103+
}
104+
105+
.icons {
106+
margin-top: 15px;
107+
108+
}
109+
110+
.icons i {
111+
cursor: pointer;
112+
}
113+
114+
#myProgressbar {
115+
width: 60vw;
116+
}

‎assets/bg-2.jpg

111 KB
Loading

‎index.html

+49-2
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,58 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Document</title>
6+
<title>Spotify-Enjoy the sound</title>
77
<link rel="stylesheet" href="app.css" />
8+
<link rel="icon" href="assets/logo.png" type="imagepng" />
89
</head>
910
<body>
10-
11+
<nav class="header section-padding">
12+
<div class="logo-section">
13+
<a href="#home"> <img src="./assets/logo.png" alt="" /></a>
14+
<a href="#home"> <p class="Logo">Spotify</p></a>
15+
</div>
16+
<ul class="nav-link">
17+
<a href="#home"> <li id="#home" class="nav-links-items">Home</li></a>
18+
<a href="#about"> <li id="#About" class="nav-links-items">About</li></a>
19+
<a href="#Playlist">
20+
<li id="#Playlist" class="nav-links-items">Playlist</li></a
21+
>
22+
<a href="#library"
23+
><li id="#Library" class="nav-links-items">Library</li></a
24+
>
25+
<a href="#favourite"
26+
><li id="#favourite" class="nav-links-items">favourite</li></a
27+
>
28+
</ul>
29+
</nav>
30+
<div class="container section-padding">
31+
<div class="songs-left">
32+
<h1>Best OF Month August - Copyright sounds</h1>
33+
<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
39+
></span>
40+
</div>
41+
</div>
42+
</div>
43+
<div class="song-banner-right"></div>
44+
</div>
45+
<div class="bottom">
46+
<input type="range" name="range" id="myProgressbar" min="0" max="100" />
47+
<div class="icons">
48+
<!-- 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>
52+
</div>
53+
</div>
54+
<script
55+
src="https://kit.fontawesome.com/a1c2bc47d2.js"
56+
crossorigin="anonymous"
57+
></script>
1158
<script src="index.js"></script>
1259
</body>
1360
</html>

0 commit comments

Comments
 (0)