Skip to content

Commit 9f24f85

Browse files
Bhumika-00Bhumika-00
authored
Create style.css
Added Spotify Clone
1 parent 0396efb commit 9f24f85

File tree

1 file changed

+292
-0
lines changed

1 file changed

+292
-0
lines changed

‎SpotifyClone/style.css‎

Lines changed: 292 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,292 @@
1+
*{
2+
font-family: "Montserrat", sans-serif;
3+
font-optical-sizing: auto;
4+
font-weight:500;
5+
font-style: normal;
6+
}
7+
body{
8+
background-color: black;
9+
color: white;
10+
margin: 0;
11+
overflow: hidden;
12+
}
13+
.main{
14+
display: flex;
15+
height: 100vh;
16+
padding: 0.5rm;
17+
}
18+
.sidebar{
19+
background-color:black;
20+
width: 300px;
21+
border-radius: 1rem;
22+
margin: 0.5rem;
23+
}
24+
.main-content{
25+
background-color:rgb(34, 33, 33);
26+
flex:1;
27+
border-radius: 1rem;
28+
overflow: auto;
29+
padding: 0 1.5rem 0 1.5rem;
30+
}
31+
.music-player{
32+
background-color: black;
33+
height: 72px;
34+
width: 100%;
35+
bottom: 0;
36+
position: fixed;
37+
border-radius: 1rem;
38+
}
39+
a{
40+
text-decoration: none;
41+
color: white;
42+
}
43+
.nav{
44+
background-color: rgb(34, 33, 33);
45+
border-radius: 15px;
46+
height: 100px;
47+
display: flex;
48+
flex-direction: column;
49+
padding: 0.5rem 0.75rem;
50+
}
51+
.nav-option{
52+
line-height:2.5rem;
53+
opacity: 0.75;
54+
padding: 0.5rem;
55+
}
56+
.nav-option:hover{
57+
58+
opacity: 1;
59+
}
60+
.nav-option i{
61+
font-size: 1.75 rem;
62+
}
63+
.nav-option a{
64+
font-size: 1rem;
65+
margin-left: 1rem;
66+
}
67+
.option{
68+
display: flex;
69+
justify-content: space-between;
70+
align-items: center;
71+
}
72+
.library{
73+
border-radius: 1rem;
74+
background-color: rgb(34, 33, 33);
75+
height: 100%;
76+
margin-top: 0.74rem;
77+
padding: 0.5rem 0.75rem;
78+
}
79+
.icons{
80+
font-size: 1rem;
81+
opacity:0.7;
82+
margin:1rem
83+
}
84+
.icons i{
85+
opacity:0.7;
86+
margin-right: 1rm;
87+
}
88+
.icons i:hover{
89+
opacity:1;
90+
91+
}
92+
.box{
93+
background-color: rgb(71, 70, 70);
94+
height: 8.125rem;
95+
border-radius: 0.813rem;
96+
margin-top: 1rem;
97+
}
98+
.box-p1{
99+
line-height:2.5rem;
100+
margin-left: 1rem;
101+
}
102+
.box-p2{
103+
line-height:2.5rem;
104+
margin-left: 1rem;
105+
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
106+
font-weight: 300;
107+
}
108+
.badge{
109+
margin-left: 20px;
110+
background-color: white;
111+
border:none;
112+
border-radius: 100px;
113+
padding: 0.25rem 1rem;
114+
font-weight: 700;
115+
}
116+
.sticky-nav{
117+
position: sticky;
118+
top:0;
119+
background-color:rgb(34, 33, 33) ;
120+
display: flex;
121+
justify-content: space-between;
122+
align-items: center;
123+
margin-top: 10px;
124+
margin-left: 7px;
125+
z-index: 10;
126+
}
127+
.sticky-nav-icons{
128+
margin-left: 0.75rem;
129+
}
130+
.sticky-nav-options{
131+
margin-left: 0.75rem;
132+
display: flex;
133+
justify-content: center;
134+
align-items: center;
135+
}
136+
.nav-items{
137+
margin-right: 1rem;
138+
}
139+
@media(max-width:1000px){
140+
.hide{
141+
display: none;
142+
}
143+
}
144+
.card{
145+
background-color: rgb(71, 70, 70);
146+
width:150px;
147+
border-radius:0.5rem;
148+
padding :0.5rem;
149+
margin:1.5rem
150+
}
151+
.card-container{
152+
display:flex;
153+
flex-wrap: wrap;
154+
}
155+
.card-image{
156+
width:100%;
157+
}
158+
.card-title{
159+
font-weight: 600;
160+
}
161+
.card-info{
162+
opacity:0.8;
163+
font-size: 0.75rem;
164+
}
165+
.footer{
166+
height: 300px;
167+
display: flex;
168+
align-items: center;
169+
justify-content: center;
170+
}
171+
.line{
172+
height: 50%;
173+
width: 90%;
174+
border-top:1px solid white ;
175+
opacity: 0.4;
176+
}
177+
.music-player{
178+
display: flex;
179+
justify-content: space-between;
180+
align-items: center;
181+
}
182+
.album{
183+
width: 25%;
184+
}
185+
.player{
186+
width: 50%;
187+
}
188+
.control{
189+
width: 25%;
190+
}
191+
.player-control{
192+
display: flex;
193+
justify-content: center;
194+
align-items: center;
195+
}
196+
.player-control-icon{
197+
height: 1rem;
198+
199+
margin-right: 2rem;
200+
margin-bottom: 0.1rem;
201+
opacity: 0.7;
202+
}
203+
.player-control-icon:hover{
204+
opacity:1;
205+
}
206+
.playback-bar{
207+
display: flex;
208+
justify-content: center;
209+
align-items: center;
210+
}
211+
.progress-bar{
212+
width: 70%;
213+
appearance: none;
214+
background-color: transparent;
215+
cursor: pointer;
216+
}
217+
.progress-bar::-webkit-slider-runnable-track{
218+
background-color: #ddd;
219+
border-radius: 100px;
220+
height: 0.2rem;
221+
}
222+
.progress-bar::-webkit-slider-thumb{
223+
appearance: none;
224+
height: 1rem;
225+
width: 1rem;
226+
background-color: #1bd760;
227+
border-radius: 50%;
228+
margin-top: -6px;
229+
}
230+
.volume{
231+
appearance: none;
232+
background-color: transparent;
233+
cursor: pointer;
234+
}
235+
.volume::-webkit-slider-runnable-track{
236+
background-color: #ddd;
237+
border-radius: 100px;
238+
height: 0.2rem;
239+
}
240+
.volume::-webkit-slider-thumb{
241+
appearance: none;
242+
height: 1rem;
243+
width: 1rem;
244+
background-color: #1bd760;
245+
border-radius: 50%;
246+
margin-top: -6px;
247+
}
248+
.first-line {
249+
display: flex; /* Align items in the same line */
250+
align-items: center; /* Center items vertically */
251+
}
252+
253+
.first-line img {
254+
margin-right: 10px; /* Space between image and text */
255+
}
256+
257+
.first-line p {
258+
margin-right: 10px;
259+
font-weight: 600;/* Space between text and icons */
260+
}
261+
262+
.artist-name {
263+
margin-top: 5px; /* Space above the artist name */
264+
}
265+
266+
.image-inside{
267+
268+
height: 50px;
269+
width: 50px;
270+
}
271+
#first{
272+
margin-left: 5px;
273+
}
274+
#second{
275+
margin-left: 5px;
276+
}
277+
#f1{
278+
margin-left: 2px;
279+
}
280+
#f2{
281+
margin-left: 2px;
282+
}
283+
#f3{
284+
margin-left: 2px;
285+
}
286+
#f4{
287+
margin-left: 2px;
288+
}
289+
#f5{
290+
margin-left: 2px;
291+
}
292+

0 commit comments

Comments
 (0)