diff --git a/images/icon_after.svg b/images/icon_after.svg new file mode 100644 index 0000000..3b6fa86 --- /dev/null +++ b/images/icon_after.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/icon_album.svg b/images/icon_album.svg new file mode 100644 index 0000000..ad5730a --- /dev/null +++ b/images/icon_album.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon_before.svg b/images/icon_before.svg new file mode 100644 index 0000000..edfc7ae --- /dev/null +++ b/images/icon_before.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/images/icon_down.svg b/images/icon_down.svg new file mode 100644 index 0000000..655face --- /dev/null +++ b/images/icon_down.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon_genre.svg b/images/icon_genre.svg new file mode 100644 index 0000000..8db32f6 --- /dev/null +++ b/images/icon_genre.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/images/icon_home.svg b/images/icon_home.svg new file mode 100644 index 0000000..e6210d4 --- /dev/null +++ b/images/icon_home.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon_pause.svg b/images/icon_pause.svg new file mode 100644 index 0000000..a7bd95a --- /dev/null +++ b/images/icon_pause.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icon_play.svg b/images/icon_play.svg new file mode 100644 index 0000000..bf47350 --- /dev/null +++ b/images/icon_play.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icon_playlist.svg b/images/icon_playlist.svg new file mode 100644 index 0000000..5a471c4 --- /dev/null +++ b/images/icon_playlist.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon_same.svg b/images/icon_same.svg new file mode 100644 index 0000000..0a12fe6 --- /dev/null +++ b/images/icon_same.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/icon_up.svg b/images/icon_up.svg new file mode 100644 index 0000000..a63308b --- /dev/null +++ b/images/icon_up.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/img_artist_1.png b/images/img_artist_1.png new file mode 100644 index 0000000..0cc6cd0 Binary files /dev/null and b/images/img_artist_1.png differ diff --git a/images/img_artist_2.png b/images/img_artist_2.png new file mode 100644 index 0000000..8266d32 Binary files /dev/null and b/images/img_artist_2.png differ diff --git a/images/img_artist_3.png b/images/img_artist_3.png new file mode 100644 index 0000000..ceaae67 Binary files /dev/null and b/images/img_artist_3.png differ diff --git a/images/img_artist_4.png b/images/img_artist_4.png new file mode 100644 index 0000000..a0974ce Binary files /dev/null and b/images/img_artist_4.png differ diff --git a/images/img_artist_5.png b/images/img_artist_5.png new file mode 100644 index 0000000..a9fd476 Binary files /dev/null and b/images/img_artist_5.png differ diff --git a/images/img_cafe.png b/images/img_cafe.png new file mode 100644 index 0000000..70787c0 Binary files /dev/null and b/images/img_cafe.png differ diff --git a/images/img_chart_1.png b/images/img_chart_1.png new file mode 100644 index 0000000..04bb15a Binary files /dev/null and b/images/img_chart_1.png differ diff --git a/images/img_chart_10.png b/images/img_chart_10.png new file mode 100644 index 0000000..28ac769 Binary files /dev/null and b/images/img_chart_10.png differ diff --git a/images/img_chart_2.png b/images/img_chart_2.png new file mode 100644 index 0000000..77ca170 Binary files /dev/null and b/images/img_chart_2.png differ diff --git a/images/img_chart_3.png b/images/img_chart_3.png new file mode 100644 index 0000000..c234ea6 Binary files /dev/null and b/images/img_chart_3.png differ diff --git a/images/img_chart_4.png b/images/img_chart_4.png new file mode 100644 index 0000000..e1fffef Binary files /dev/null and b/images/img_chart_4.png differ diff --git a/images/img_chart_5.png b/images/img_chart_5.png new file mode 100644 index 0000000..50dc3d0 Binary files /dev/null and b/images/img_chart_5.png differ diff --git a/images/img_chart_6.png b/images/img_chart_6.png new file mode 100644 index 0000000..ffe1957 Binary files /dev/null and b/images/img_chart_6.png differ diff --git a/images/img_chart_7.png b/images/img_chart_7.png new file mode 100644 index 0000000..e60d5f6 Binary files /dev/null and b/images/img_chart_7.png differ diff --git a/images/img_chart_8.png b/images/img_chart_8.png new file mode 100644 index 0000000..591636a Binary files /dev/null and b/images/img_chart_8.png differ diff --git a/images/img_chart_9.png b/images/img_chart_9.png new file mode 100644 index 0000000..0488959 Binary files /dev/null and b/images/img_chart_9.png differ diff --git a/images/img_current_song.png b/images/img_current_song.png new file mode 100644 index 0000000..5798974 Binary files /dev/null and b/images/img_current_song.png differ diff --git a/images/img_main_banner.png b/images/img_main_banner.png new file mode 100644 index 0000000..b803bfe Binary files /dev/null and b/images/img_main_banner.png differ diff --git a/images/img_playlist_1.png b/images/img_playlist_1.png new file mode 100644 index 0000000..8c644fe Binary files /dev/null and b/images/img_playlist_1.png differ diff --git a/images/img_playlist_2.png b/images/img_playlist_2.png new file mode 100644 index 0000000..4d4ddf3 Binary files /dev/null and b/images/img_playlist_2.png differ diff --git a/images/img_playlist_3.png b/images/img_playlist_3.png new file mode 100644 index 0000000..29f6002 Binary files /dev/null and b/images/img_playlist_3.png differ diff --git a/images/img_playlist_4.png b/images/img_playlist_4.png new file mode 100644 index 0000000..16f66c1 Binary files /dev/null and b/images/img_playlist_4.png differ diff --git a/images/img_playlist_5.png b/images/img_playlist_5.png new file mode 100644 index 0000000..facf54e Binary files /dev/null and b/images/img_playlist_5.png differ diff --git a/images/img_playlist_6.png b/images/img_playlist_6.png new file mode 100644 index 0000000..ede32b4 Binary files /dev/null and b/images/img_playlist_6.png differ diff --git a/images/img_playlist_7.png b/images/img_playlist_7.png new file mode 100644 index 0000000..766fe97 Binary files /dev/null and b/images/img_playlist_7.png differ diff --git a/images/img_playlist_8.png b/images/img_playlist_8.png new file mode 100644 index 0000000..bbf2ae4 Binary files /dev/null and b/images/img_playlist_8.png differ diff --git a/images/img_playlist_9.png b/images/img_playlist_9.png new file mode 100644 index 0000000..107bf32 Binary files /dev/null and b/images/img_playlist_9.png differ diff --git a/images/img_station_1.png b/images/img_station_1.png new file mode 100644 index 0000000..e5812d8 Binary files /dev/null and b/images/img_station_1.png differ diff --git a/images/img_station_2.png b/images/img_station_2.png new file mode 100644 index 0000000..31eab5a Binary files /dev/null and b/images/img_station_2.png differ diff --git a/images/img_station_3.png b/images/img_station_3.png new file mode 100644 index 0000000..3448705 Binary files /dev/null and b/images/img_station_3.png differ diff --git a/images/img_station_4.png b/images/img_station_4.png new file mode 100644 index 0000000..be3e215 Binary files /dev/null and b/images/img_station_4.png differ diff --git a/images/img_station_5.png b/images/img_station_5.png new file mode 100644 index 0000000..61507ab Binary files /dev/null and b/images/img_station_5.png differ diff --git a/images/img_station_6.png b/images/img_station_6.png new file mode 100644 index 0000000..862ccc4 Binary files /dev/null and b/images/img_station_6.png differ diff --git a/images/img_station_7.png b/images/img_station_7.png new file mode 100644 index 0000000..c8c2953 Binary files /dev/null and b/images/img_station_7.png differ diff --git a/images/img_station_8.png b/images/img_station_8.png new file mode 100644 index 0000000..5208a31 Binary files /dev/null and b/images/img_station_8.png differ diff --git a/images/img_station_9.png b/images/img_station_9.png new file mode 100644 index 0000000..01a6cc3 Binary files /dev/null and b/images/img_station_9.png differ diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..1ea54a1 --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/images/phone.png b/images/phone.png new file mode 100644 index 0000000..918bef4 Binary files /dev/null and b/images/phone.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c7fbe06 --- /dev/null +++ b/index.html @@ -0,0 +1,392 @@ + + + + + Codeit Music - Magazine + + + + + + +
+ + + +
+
+
+
+ 두바이 프레임 풍경 사진 +
+
뮤직 매거진
+

+ 여행에서
+ 다시 일상으로 +

+

+ 비행기 표를 예매하고 짐을 챙기는 순간부터 여행이 시작된 것 같은 + 기분이죠. 화려한 여행지의 추억을 뒤로하고 다시 일상으로 돌아온 + 사람들을 위한 파워풀한 음악을 준비했습니다. 여행에서 재충전한 + 에너지를 모아 모아서힘찬 한 주를 시작해보는 건 어떨까요? +

+
+
+
+
+

이달의 플레이리스트

+
+
+ +
여행을 떠나요
+
Codeit Music
+
+
+ +
금요일 저녁의 카페에서
+
Codeit Music
+
+
+ +
이제 집중할 시간
+
Codeit Music
+
+
+ +
몰디브 한 잔
+
Codeit Music
+
+
+ +
K-Pop 믹스
+
Codeit Music
+
+
+ +
공부를 위한 클래식
+
Codeit Music
+
+
+ +
한국 시티팝 20선
+
Codeit Music
+
+
+ +
편안하게 느긋하게
+
Codeit Music
+
+
+ +
고요한 밤을 위한 BGM
+
Codeit Music
+
+
+
+
+

추천 아티스트

+
+
+ +
Neon 5
+
+
+ +
곤잘레스
+
+
+ +
케이시 킹
+
+
+ +
Frake
+
+
+ +
체인스모킹
+
+
+
+
+

느낌 별 스테이션

+
+ + + + + + + + + +
+
+
+
+

이달의 Top 100

+ 모두보기 +
+
    +
  1. + 사건의 수평선 +
    +
    +
    1
    + ▲ +
    +
    +
    사건의 수평선
    +
    은하
    +
    +
    +
    2. +
  2. + FRAGILE +
    +
    +
    2
    + ▼ +
    +
    +
    FRAGILE
    +
    세라핌
    +
    +
    +
    3. +
  3. + Hype Girl +
    +
    +
    3
    + ― +
    +
    +
    Hype Girl
    +
    OldJeans
    +
    +
    +
    4. +
  4. + 사랑은 늘 찾아와 +
    +
    +
    4
    + ― +
    +
    +
    사랑은 늘 찾아와
    +
    임빌런
    +
    +
    +
    5. +
  5. + Black Venom +
    +
    +
    5
    + ▲ +
    +
    +
    Black Venom
    +
    PinkPink
    +
    +
    +
    6. +
  6. + 사건의 수평선 +
    +
    +
    6
    + ▼ +
    +
    +
    취중고백
    +
    멜로
    +
    +
    +
    7. +
  7. + Snowman +
    +
    +
    7
    + ▲ +
    +
    +
    Snowman
    +
    지아
    +
    +
    +
    8. +
  8. + Hollywood +
    +
    +
    8
    + ▲ +
    +
    +
    Hollywood
    +
    검정바지
    +
    +
    +
    9. +
  9. + I Think I Like Her +
    +
    +
    9
    + ▼ +
    +
    +
    I Think I Like Her
    +
    찰리 원더
    +
    +
    +
    10. +
  10. + London +
    +
    +
    10
    + ― +
    +
    +
    London
    +
    체인스모킹
    +
    +
    +
    11. +
+
+
+
+
+
+
+
+
+ 현재 재생 중인 곡 +
After Sunset
+
Benjamin
+
+
+ 이전 곡 + 일시정지 + 다음 곡 +
+
2:34 / 5:67
+
+
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000..d51532d --- /dev/null +++ b/style.css @@ -0,0 +1,330 @@ +* { + box-sizing: border-box; +} + +html { + font-family: Pretendard, sans-serif; + word-break: keep-all; +} + +body { + margin: 0; + background-color: #000; + color: #fff; + font-size: 16px; + line-height: 24px; +} + +main { + margin-left: 240px; + margin-bottom: 100px; +} + +.sidebar { + padding: 16px; + background-color: #161519; + color: #8c8993; + width: 240px; + position: fixed; + top: 0; + bottom: 0; + left: 0; +} + +.logo { + padding: 24px 28px; + font-weight: 900; +} + +.menu-items { + margin: 0; + margin-bottom: 48px; + padding: 0; + list-style: none; +} + +.menu-item { + padding: 8px 24px; +} + +.menu-item.active { + background-color: rgba(205, 187, 255, 0.1); + color: #ffffff; +} + +.progress-bar { + height: 6px; + background: linear-gradient(0deg, #4d4d54, #4d4d54), + linear-gradient(0deg, #4d4d54, #4d4d54), #4d4d54; +} + +.progress { + width: 70%; + height: 100%; + background-color: #7000ff; +} + +.player { + height: 100px; + position: fixed; + left: 0; + bottom: 0; + right: 0; + display: flex; + flex-direction: column; +} + +.player-main { + display: flex; + align-items: center; + flex: 1 0 auto; + justify-content: space-between; + padding: 16px 40px; + background-color: rgba(48, 48, 55, 0.7); + backdrop-filter: blur(15px); +} + +.info, +.time { + flex-basis: 300px; +} + +.info { + display: flex; + align-items: center; + gap: 16px; +} + +.current { + border-radius: 14px; +} + +.title { + color: #d9d9d9; +} + +.artist { + color: #8c8993; +} + +.playing { + width: 48px; + height: 48px; +} + +.icon { + width: 24px; + height: 24px; +} + +.time { + color: #8c8993; + display: flex; + justify-content: flex-end; +} + +section { + max-width: 1120px; + width: 100%; + margin: 80px auto; + padding: 0 36px; +} + +.section-title { + font-weight: 700; + font-size: 32px; + line-height: 38px; + margin: 40px 0; +} + +.featured { + display: flex; + gap: 40px; +} + +.featured-thumb { + flex-shrink: 0; + border-radius: 24px; +} + +.featured-content { + display: flex; + gap: 24px; + flex-direction: column; +} + +.featured-tag { + width: fit-content; + background-color: #18181b; + border-radius: 16px; + padding: 8px 16px; + font-weight: 500; + font-size: 20px; + line-height: 24px; + color: #565662; +} + +.featured-title { + font-weight: 700; + font-size: 40px; + line-height: 48px; + color: #d9d9d9; + margin: 0; +} + +.featured-description { + margin: 0; + color: #868686; +} + +.playlists { + display: flex; + flex-wrap: wrap; + gap: 24px; +} + +.playlist { + flex-basis: 23%; +} + +.playlist-thumb { + width: 100%; + border-radius: 16px; +} + +.playlist-title { + font-weight: 700; + font-size: 24px; + line-height: 29px; + margin: 16px 0 8px; +} + +.playlist-artist { + color: #868686; + margin: 0; +} + +.artists { + display: flex; + gap: 32px; +} + +.artist { + width: 120px; + text-align: center; + border-radius: 50%; +} + +.artist-profile { + width: 100%; + border-radius: 50%; +} + +.artist-name { + font-weight: 500; + font-size: 24px; + line-height: 29px; + margin: 24px 0 0; +} + +.stations { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px; +} + +.station { + width: 100%; + aspect-ratio: 1; + border-radius: 16px; +} + +.charts { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-auto-rows: 160px; + list-style: none; + padding: 0; + margin: 0; + gap: 32px; +} + +.charts-header { + display: flex; + justify-content: space-between; + align-items: center; + margin: 32px 0; +} + +.charts-title { + margin: 0; +} + +.charts-see-all { + font-weight: 500; + font-size: 24px; + line-height: 29px; + text-decoration: none; + color: #d9d9d9; +} + +.chart { + width: 100%; + display: flex; + align-items: center; + gap: 30px; +} + +.chart-info { + display: flex; + flex-direction: column; + gap: 8px; +} + +.chart-rank { + display: flex; + align-items: center; + gap: 8px; +} + +.chart-number { + display: flex; + justify-content: center; + align-items: center; + border-radius: 50%; + width: 40px; + height: 40px; + background: #1a1a1a; + font-weight: 700; + font-size: 24px; + line-height: 29px; +} + +.chart-change { + font-size: 14px; + color: rgba(255, 255, 255, 0.2); +} + +.chart-change.up { + color: #d93045; +} + +.chart-cover { + flex: 0 0; + width: 160px; + height: 160px; + border-radius: 16px; +} + +.chart-title { + font-weight: 700; + font-size: 32px; + line-height: 38px; +} + +.chart-artist { + font-weight: 500; + font-size: 24px; + line-height: 29px; + color: #868686; +}