Skip to content

Commit ea47d1a

Browse files
yemixbnyemixbn
committed
first commit
1 parent f199911 commit ea47d1a

File tree

2 files changed

+306
-2
lines changed

2 files changed

+306
-2
lines changed

‎index.html

Lines changed: 106 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,113 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Document</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link rel="icon" type="image/x-icon" href="favicon.ico">
9+
<title>Spotify Layout</title>
810
</head>
911
<body>
10-
12+
<body>
13+
<div class="container">
14+
<nav class="sidebar">
15+
<div class="logo">Spotify</div>
16+
<ul class="menu">
17+
<li class="menu-item active">Home</li>
18+
<li class="menu-item">Search</li>
19+
<li class="menu-item">Your Library</li>
20+
</ul>
21+
<div class="playlist-section">
22+
<button class="create-playlist">+ Create Playlist</button>
23+
<ul class="playlists">
24+
<li class="playlist">Playlist 1</li>
25+
<li class="playlist">Playlist 2</li>
26+
<li class="playlist">Playlist 3</li>
27+
<li class="playlist">Playlist 4</li>
28+
</ul>
29+
</div>
30+
<div class="profile-section">
31+
<div class="profile">
32+
<img src="assets/img/profile.svg" alt="Profile Picture">
33+
<span>Faruq</span>
34+
</div>
35+
</div>
36+
</nav>
37+
<main class="main-content">
38+
<div class="header">
39+
<button class="upgrade-button">Upgrade</button>
40+
</div>
41+
<section class="recently-played">
42+
<h2>Recently Played</h2>
43+
<div class="albums">
44+
<div class="album">
45+
<img src="assets/img/aquietplace.jpeg" alt="Heavy Metal">
46+
<span class="subtitle">Heavy Metal</span>
47+
</div>
48+
<div class="album">
49+
<img src="assets/img/stranger.jpeg" alt="Stranger Things">
50+
<span class="subtitle">Kyle Dixon & Michael Stein</span>
51+
</div>
52+
<div class="album">
53+
<img src="assets/img/aquietplace.jpeg" alt="A Quiet Place">
54+
<span class="subtitle">Marco Beltrami</span>
55+
</div>
56+
<div class="album">
57+
<img src="assets/img/split.jpeg" alt="Split">
58+
<span class="subtitle">Subtitle</span>
59+
</div>
60+
<div class="album">
61+
<img src="assets/img/youg.jpeg" alt="A Cure for Wellness">
62+
<span class="subtitle">Subtitle</span>
63+
</div>
64+
<div class="album">
65+
<img src="assets/img/sinister.jpeg" alt="Sinister">
66+
<span class="subtitle">Subtitle</span>
67+
</div>
68+
</div>
69+
</section>
70+
<section class="created-for-you">
71+
<h2>Created for John Doe</h2>
72+
<div class="playlists">
73+
<div class="playlist">
74+
<img src="assets/img/radar.jpeg" alt="Release Radar">
75+
<span>Release Radar</span>
76+
</div>
77+
<div class="playlist">
78+
<img src="assets/img/mixdaily.jpeg" alt="Daily Mix 1">
79+
<span>Daily Mix 1</span>
80+
</div>
81+
</div>
82+
</section>
83+
<section class="popular-artists">
84+
<h2>Popular Artists</h2>
85+
<div class="artists">
86+
<div class="artist">
87+
<img src="" alt="Artist 1">
88+
<span>Artist 1</span>
89+
</div>
90+
<div class="artist">
91+
<img src="path/to/artist2.jpg" alt="Artist 2">
92+
<span>Artist 2</span>
93+
</div>
94+
</div>
95+
</section>
96+
</main>
97+
<footer class="player">
98+
<div class="now-playing">
99+
<img src="assets/img/sinister.jpeg" alt="Now Playing">
100+
<div class="track-info">
101+
<span class="track-name">Sinister</span>
102+
<span class="artist-name">Artist Name</span>
103+
</div>
104+
</div>
105+
<div class="controls">
106+
<button class="control-button">Play</button>
107+
<button class="control-button">Next</button>
108+
<button class="control-button">Previous</button>
109+
</div>
110+
<div class="volume-control">
111+
<input type="range" min="0" max="100">
112+
</div>
113+
</footer>
114+
</div>
11115
</body>
12116
</html>

‎styles.css

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
/* styles.css */
2+
body {
3+
font-family: 'Arial', sans-serif;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
height: 100vh;
8+
color: #fff;
9+
background-color: #121212;
10+
}
11+
12+
.container {
13+
display: grid;
14+
grid-template-columns: 200px 1fr;
15+
grid-template-rows: 1fr auto;
16+
grid-template-areas:
17+
"sidebar main"
18+
"sidebar player";
19+
height: 100%;
20+
width: 100%;
21+
}
22+
23+
.sidebar {
24+
grid-area: sidebar;
25+
background-color: #000;
26+
padding: 20px;
27+
display: flex;
28+
flex-direction: column;
29+
justify-content: space-between;
30+
}
31+
32+
.sidebar .logo {
33+
font-size: 24px;
34+
font-weight: bold;
35+
margin-bottom: 20px;
36+
}
37+
38+
.sidebar .menu {
39+
list-style: none;
40+
padding: 0;
41+
margin: 0;
42+
}
43+
44+
.sidebar .menu-item {
45+
padding: 10px 0;
46+
cursor: pointer;
47+
}
48+
49+
.sidebar .menu-item.active {
50+
color: #1db954;
51+
}
52+
53+
.sidebar .playlist-section {
54+
margin-top: 20px;
55+
}
56+
57+
.sidebar .create-playlist {
58+
background-color: #1db954;
59+
border: none;
60+
color: #fff;
61+
padding: 10px;
62+
width: 100%;
63+
cursor: pointer;
64+
}
65+
66+
.sidebar .playlists {
67+
list-style: none;
68+
padding: 0;
69+
margin: 10px 0 0 0;
70+
}
71+
72+
.sidebar .playlist {
73+
padding: 5px 0;
74+
cursor: pointer;
75+
}
76+
77+
.sidebar .profile-section {
78+
display: flex;
79+
align-items: center;
80+
}
81+
82+
.sidebar .profile {
83+
display: flex;
84+
align-items: center;
85+
}
86+
87+
.sidebar .profile img {
88+
border-radius: 50%;
89+
width: 40px;
90+
height: 40px;
91+
margin-right: 10px;
92+
}
93+
94+
.main-content {
95+
grid-area: main;
96+
padding: 20px;
97+
overflow-y: auto;
98+
}
99+
100+
.header {
101+
display: flex;
102+
justify-content: flex-end;
103+
}
104+
105+
.upgrade-button {
106+
background-color: #1db954;
107+
border: none;
108+
color: #fff;
109+
padding: 10px 20px;
110+
cursor: pointer;
111+
}
112+
113+
section {
114+
margin-bottom: 30px;
115+
}
116+
117+
.recently-played h2,
118+
.created-for-you h2,
119+
.popular-artists h2 {
120+
margin-bottom: 15px;
121+
}
122+
123+
.albums,
124+
.playlists,
125+
.artists {
126+
display: grid;
127+
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
128+
gap: 10px;
129+
}
130+
131+
.album,
132+
.playlist,
133+
.artist {
134+
text-align: center;
135+
}
136+
137+
.album img,
138+
.playlist img,
139+
.artist img {
140+
width: 100%;
141+
border-radius: 5px;
142+
}
143+
144+
.subtitle {
145+
display: block;
146+
margin-top: 5px;
147+
font-size: 12px;
148+
color: #b3b3b3;
149+
}
150+
151+
footer {
152+
grid-area: player;
153+
background-color: #282828;
154+
padding: 10px 20px;
155+
display: flex;
156+
justify-content: space-between;
157+
align-items: center;
158+
}
159+
160+
.now-playing {
161+
display: flex;
162+
align-items: center;
163+
}
164+
165+
.now-playing img {
166+
width: 60px;
167+
height: 60px;
168+
margin-right: 10px;
169+
}
170+
171+
.track-info {
172+
display: flex;
173+
flex-direction: column;
174+
}
175+
176+
.track-name {
177+
font-size: 14px;
178+
}
179+
180+
.artist-name {
181+
font-size: 12px;
182+
color: #b3b3b3;
183+
}
184+
185+
.controls {
186+
display: flex;
187+
align-items: center;
188+
}
189+
190+
.control-button {
191+
background: none;
192+
border: none;
193+
color: #fff;
194+
margin: 0 10px;
195+
cursor: pointer;
196+
}
197+
198+
.volume-control input[type="range"] {
199+
width: 100px;
200+
}

0 commit comments

Comments
 (0)