diff --git a/assets/icons/contrlo-bar/folder-outline.svg b/assets/icons/contrlo-bar/folder-outline.svg new file mode 100644 index 00000000..bfa34afc --- /dev/null +++ b/assets/icons/contrlo-bar/folder-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/contrlo-bar/heart-outline.svg b/assets/icons/contrlo-bar/heart-outline.svg new file mode 100644 index 00000000..c7c8996c --- /dev/null +++ b/assets/icons/contrlo-bar/heart-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/contrlo-bar/menu-outline.svg b/assets/icons/contrlo-bar/menu-outline.svg new file mode 100644 index 00000000..0012c74c --- /dev/null +++ b/assets/icons/contrlo-bar/menu-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/contrlo-bar/play-circle-outline.svg b/assets/icons/contrlo-bar/play-circle-outline.svg new file mode 100644 index 00000000..7c8fd60d --- /dev/null +++ b/assets/icons/contrlo-bar/play-circle-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/contrlo-bar/play-skip-back-outline.svg b/assets/icons/contrlo-bar/play-skip-back-outline.svg new file mode 100644 index 00000000..c58383cf --- /dev/null +++ b/assets/icons/contrlo-bar/play-skip-back-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/contrlo-bar/play-skip-forward-outline.svg b/assets/icons/contrlo-bar/play-skip-forward-outline.svg new file mode 100644 index 00000000..a2499546 --- /dev/null +++ b/assets/icons/contrlo-bar/play-skip-forward-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/contrlo-bar/reload-outline.svg b/assets/icons/contrlo-bar/reload-outline.svg new file mode 100644 index 00000000..37cbd1f5 --- /dev/null +++ b/assets/icons/contrlo-bar/reload-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/contrlo-bar/stop-outline.svg b/assets/icons/contrlo-bar/stop-outline.svg new file mode 100644 index 00000000..27105372 --- /dev/null +++ b/assets/icons/contrlo-bar/stop-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/contrlo-bar/tv-outline.svg b/assets/icons/contrlo-bar/tv-outline.svg new file mode 100644 index 00000000..215ef30e --- /dev/null +++ b/assets/icons/contrlo-bar/tv-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/contrlo-bar/volume-high-outline.svg b/assets/icons/contrlo-bar/volume-high-outline.svg new file mode 100644 index 00000000..7089e0df --- /dev/null +++ b/assets/icons/contrlo-bar/volume-high-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/create.svg b/assets/icons/create.svg new file mode 100644 index 00000000..956359f4 --- /dev/null +++ b/assets/icons/create.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/download.svg b/assets/icons/download.svg similarity index 100% rename from assets/img/download.svg rename to assets/icons/download.svg diff --git a/assets/img/favicon.ico b/assets/icons/favicon.ico similarity index 100% rename from assets/img/favicon.ico rename to assets/icons/favicon.ico diff --git a/assets/icons/home.svg b/assets/icons/home.svg new file mode 100644 index 00000000..6794487f --- /dev/null +++ b/assets/icons/home.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/icon-play.png b/assets/icons/icon-play.png new file mode 100644 index 00000000..4af88b45 Binary files /dev/null and b/assets/icons/icon-play.png differ diff --git a/assets/img/libreria.svg b/assets/icons/libreria.svg similarity index 100% rename from assets/img/libreria.svg rename to assets/icons/libreria.svg diff --git a/assets/img/logo-small.svg b/assets/icons/logo-small.svg similarity index 100% rename from assets/img/logo-small.svg rename to assets/icons/logo-small.svg diff --git a/assets/img/logo.svg b/assets/icons/logo.svg similarity index 100% rename from assets/img/logo.svg rename to assets/icons/logo.svg diff --git a/assets/img/profile.svg b/assets/icons/profile.svg similarity index 100% rename from assets/img/profile.svg rename to assets/icons/profile.svg diff --git a/assets/img/search.svg b/assets/icons/search.svg similarity index 100% rename from assets/img/search.svg rename to assets/icons/search.svg diff --git a/assets/img/home.svg b/assets/img/home.svg deleted file mode 100644 index 39bf2371..00000000 --- a/assets/img/home.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/css/colors.css b/css/colors.css new file mode 100644 index 00000000..257fd7c3 --- /dev/null +++ b/css/colors.css @@ -0,0 +1,41 @@ +:root { + /****** Font color ******/ + --primary-font-color: #fff; + --secondary-font-color: #6e7176; + + /****** Background-color ******/ + /* 1- Left menu: */ + --left-menu-bg-color: #000; + + /* 2- Main content area: */ + --content-area-primary-bg-color: #080b12; + + /* 3- Albums list: */ + --albums-area-bg-color: #141922; + + /****** Border ******/ + --border-color: #adff2f; + + /****** Left side filter icons colors ******/ + --icon-color: invert(40%) sepia(70%) saturate(24%) hue-rotate(178deg) + brightness(95%) contrast(88%); + --icon-hover-color: invert(99%) sepia(37%) saturate(2%) hue-rotate(243deg) + brightness(113%) contrast(100%); + --icon-focus-color: invert(99%) sepia(37%) saturate(2%) hue-rotate(243deg) + brightness(113%) contrast(100%); + + /****** Control bar ******/ + --control-bar-bg-color: #282828; + --paly-bar-color: #c1c1c1; + --bar-color: #5a5a5a; + + /****** Control bar filter icons colors ******/ + --icon-main-color: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) + brightness(103%) contrast(103%); + + --folders-icon-color: invert(56%) sepia(3%) saturate(16%) hue-rotate(333deg) + brightness(91%) contrast(86%); + + --ctrl-icon-hover-color: invert(100%) sepia(60%) saturate(2536%) + hue-rotate(26deg) brightness(108%) contrast(100%); +} diff --git a/css/content-area.css b/css/content-area.css new file mode 100644 index 00000000..ceef8cfc --- /dev/null +++ b/css/content-area.css @@ -0,0 +1,186 @@ +.content-area { + grid-column: 3 / 4; + grid-row: 1 / 2; + + color: var(--primary-font-color); + background-color: var(--albums-area-bg-color); +} + +.content-area header { + height: 70px; + padding-right: 15px; + + display: flex; + justify-content: flex-end; + align-items: center; + + background-color: var(--left-menu-bg-color); + + position: sticky; + top: 0; + z-index: 1; + opacity: 0.9; +} + +.upgrade { + padding: 10px 30px; + + color: var(--primary-font-color); + font-size: 16px; + text-transform: uppercase; + letter-spacing: 0.5px; + text-decoration: none; + + border: 1px solid var(--primary-font-color); + border-radius: 25px; + + transition: color 300ms; + transition: scale 300ms; +} + +.upgrade:hover { + border: 0; + background-color: var(--border-color); + color: var(--content-area-primary-bg-color); + scale: 1.04; +} + +/****** Horizontal nav bar ******/ +.nav-bar { + padding-top: 10px; + margin: 0 auto; + margin-bottom: 50px; +} + +.nav-menu li { + display: inline-block; + position: relative; +} + +.nav-menu { + list-style: none; + + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 15px; +} + +.nav-bar a { + padding-bottom: 3px; + + color: var(--secondary-font-color); + font-size: 14px; + font-weight: 600; + text-decoration: none; + + text-transform: uppercase; + transition: color 300ms; +} + +.nav-menu a:focus::before { + content: ""; + width: 50%; + height: 2px; + + position: absolute; + left: 25%; + bottom: -4px; + z-index: 3; + + background: linear-gradient( + to right, + var(--border-color) 50%, + var(--border-color) 50% + ); +} + +.nav-bar a:hover, +.nav-bar a:focus { + color: var(--primary-font-color); +} + +/****** Albums area ******/ +hgroup, +#recently-played { + padding-left: 15px; + margin-bottom: 20px; +} + +hgroup h2 { + margin-bottom: 10px; +} + +hgroup p { + color: var(--secondary-font-color); + font-size: 15px; +} + +.albums { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; + + padding: 15px; +} + +.albums:last-child { + margin-bottom: 80px; +} + +article { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +cite { + font-style: normal; + font-size: 15px; + font-weight: 600; + margin-bottom: 10px; +} + +.poster-div { + margin-bottom: 10px; + position: relative; + box-shadow: 0px 0px 4px 5px #00000070; +} + +.play-icon-div { + border: 3px solid var(--border-color); + border-radius: 50%; + + width: 33.3%; + height: 33.3%; + + position: absolute; + inset: 33.3%; + + display: none; +} + +.poster-div:hover .play-icon-div { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; +} + +.poster { + max-width: 100%; + height: auto; + transition: opacity 300ms; +} + +.poster-div:hover .poster { + opacity: 0.5; +} + +.subtitle { + color: var(--secondary-font-color); + font-size: 12px; + font-weight: 600; +} diff --git a/css/control-bar.css b/css/control-bar.css new file mode 100644 index 00000000..f4393a7f --- /dev/null +++ b/css/control-bar.css @@ -0,0 +1,124 @@ +.control-bar { + grid-column: 1 / 4; + grid-row: 2 / 3; + + position: fixed; + bottom: 0; + left: 0; + right: 0; + z-index: 2; + + display: flex; + justify-content: space-between; + align-items: center; + gap: 15px; + + padding: 10px; + background-color: var(--control-bar-bg-color); +} + +.control-bar .icon { + width: 20px; + filter: var(--icon-main-color); + transition: color 300ms; +} + +.control-bar .icon:hover { + cursor: pointer; + scale: 1.2; + filter: var(--icon-main-color); +} + +.ctrl-poster { + width: 50px; +} + +.media, +.album, +.folders, +.ctrl-icons, +.ctrl, +.play-bar, +.volume, +.volume-icon { + display: flex; + justify-content: center; + align-items: center; + gap: 30px; +} + +.album, +.ctrl, +.folders, +.volume, +.volume-icon { + gap: 15px; +} + +.album p:first-child { + color: var(--primary-font-color); + font-size: 16px; +} + +.album p:last-child { + color: var(--secondary-font-color); + font-size: 13px; +} + +.folders { + flex-wrap: wrap; +} + +.folders .icon { + filter: var(--folders-icon-color); + transition: color 300ms; +} + +.play-bar { + width: 100%; +} + +.play-bar p { + color: var(--primary-font-color); + font-size: 12px; +} + +.ctrl { + flex-direction: column; + justify-content: space-between; + width: 40%; +} + +.icon.play-icon { + width: 40px; +} + +.ctrl .icon:hover { + filter: var(--ctrl-icon-hover-color); +} + +/****** play bar ******/ +input { + appearance: none; + background-color: var(--bar-color); + cursor: pointer; + width: 100%; + height: 3px; + position: relative; +} + +input::-webkit-slider-thumb { + appearance: none; + margin-top: 0px; + background-color: var(--paly-bar-color); + height: 3px; + width: 40%; + position: absolute; + left: 0; + bottom: 0; +} + +/******* Volume *******/ +.volume-bar { + width: 50%; +} diff --git a/css/left-menu.css b/css/left-menu.css new file mode 100644 index 00000000..cd2e3cb8 --- /dev/null +++ b/css/left-menu.css @@ -0,0 +1,168 @@ +.left-side { + grid-column: 1 / 3; + grid-row: 1 / 2; + + color: var(--secondary-font-color); + background-color: var(--left-menu-bg-color); + + display: grid; + grid-template-rows: + 70px + auto + 1fr + auto; + + position: fixed; + width: 220px; + overflow-y: scroll; + scrollbar-width: none; + top: 0; + bottom: 82px; +} + +.left-side > * { + margin-bottom: 30px; +} + +.left-side > *:last-child { + margin-bottom: 0px; +} + +.left-side header { + position: sticky; + top: 0; + margin-bottom: 0; + + display: flex; + align-items: center; + + background-color: var(--left-menu-bg-color); +} + +.logo-lg { + width: 140px; + padding-left: 15px; +} + +.link svg { + fill: var(--secondary-font-color); +} + +.link, +.create-playlist { + display: flex; + align-items: center; + text-decoration: none; + gap: 10px; + + margin-bottom: 10px; + padding-left: 15px; + + color: var(--secondary-font-color); + transition: color 300ms; +} + +.link:hover, +.link:hover svg { + color: var(--primary-font-color); + fill: var(--primary-font-color); +} + +.link:focus, +.link:focus svg { + color: var(--primary-font-color); + fill: var(--primary-font-color); +} + +.link:focus { + border-left: 3px solid var(--border-color); + padding-left: 12px; +} + +.playlist h3 { + padding-left: 15px; + margin-bottom: 10px; + + color: var(--primary-font-color); + font-weight: 600; + font-size: 20px; + + text-transform: uppercase; +} + +.create-playlist button { + border: 0; + background-color: transparent; +} + +.create-playlist button svg { + fill: var(--secondary-font-color); + transition: fill 300ms; +} + +.create-playlist p { + transition: color 300ms; +} + +.create-playlist:hover button svg, +.create-playlist:hover p { + cursor: pointer; + fill: var(--border-color); + color: var(--primary-font-color); +} + +.list-names { + width: 120px; + list-style: none; + padding-left: 15px; +} + +.list-names li { + margin-bottom: 20px; + font-size: 15px; +} + +.list-names a { + text-decoration: none; + color: var(--secondary-font-color); + transition: color 300ms; +} + +.list-names a:hover { + color: var(--primary-font-color); +} + +.list-names a:focus { + color: var(--primary-font-color); +} + +.install { + padding: 15px; +} + +.install a { + display: flex; + align-items: center; + align-content: flex-end; + gap: 10px; + + font-size: 14px; + color: var(--secondary-font-color); + text-decoration: none; + + padding-bottom: 10px; + border-bottom: 1px solid var(--secondary-font-color); + transition: color 300ms; +} + +.install-icon { + width: 25px; + fill: var(--secondary-font-color); + transition: fill 300ms; +} + +.install a:hover, +.install a:hover .install-icon { + color: var(--primary-font-color); + fill: var(--primary-font-color); +} diff --git a/css/style.css b/css/style.css index e69de29b..21442c51 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,99 @@ +@import url(./colors.css); +@import url(./left-menu.css); +@import url(./content-area.css); +@import url(./control-bar.css); + +/****** Shared style ******/ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: sans-serif; +} + +svg { + width: 30px; +} + +/****** The main gird container ******/ +main { + display: grid; + grid-template-columns: 50px 170px 1fr; + grid-template-rows: 1fr auto; + color: var(-primary-font-color); +} + +.nav-icons { + grid-column: 1 / 2; + grid-row: 1/2; + + width: 50px; + padding: 10px 0; + + background-color: var(--left-menu-bg-color); + display: none; +} + +.icons { + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +/****** Responsive ******/ +@media screen and (max-width: 600px) { + .nav-icons { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + gap: 20px; + + position: fixed; + top: 0; + left: 0; + bottom: 80px; + } + + .left-side { + display: none; + } + + .content-area { + grid-column: 2/ 4; + min-width: 300px; + } + + /****** Control bar ******/ + .media, + .album, + .folders, + .ctrl-icons, + .play-bar { + gap: 10px; + } + + .volume-icon { + gap: 5px; + } +} + +@media screen and (max-width: 499px) { + .control-bar { + justify-content: center; + } + + .media, + .volume { + display: none; + } + + .ctrl { + width: 80%; + } + + .ctrl-icons { + gap: 20%; + } +} diff --git a/index.html b/index.html index 56efbdba..2ab475e6 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,540 @@ - - - - - Document - - - - - \ No newline at end of file + + + + + + + Spotify - Web Player: Music for everyone + + +
+ + +
+ + + + +
+

playlist

+
+ +

Crea Playlist

+
+ + +
+ +
+
+ + + Download icon + + +

Installa app

+ +
+ +
+ + + User Icon + + +

John Doe

+ +
+
+
+ +
+
+ effettua l'upgrade +
+ + + +

Recently played

+
+
+
+ Heavy metal song poster +
+ play icon +
+
+ Heavy Metal +

Subtitle

+
+ +
+
+ Stranger song poster +
+ play icon +
+
+ Stranger Things +

Kyle Bixon & Michael Stein

+
+ +
+
+ A quite place song poster +
+ play icon +
+
+ A quite place +

Subtitle

+
+ +
+
+ Split song poster +
+ play icon +
+
+ Split +

Subtitle

+
+ +
+
+ A cure for wellness song poster +
+ play icon +
+
+ A cure for wellness +

Subtitle

+
+ +
+
+ Sinister song poster +
+ play icon +
+
+ Sinister +

Subtitle

+
+
+ +
+

Creato per Jhon Doe

+

Più ascolti più accurati saranno i suggerimenti.

+
+
+
+
+ Radar song poster +
+ play icon +
+
+ Heavy Metal +

Subtitle

+
+ +
+
+ Dally Mix 1 song poster +
+ play icon +
+
+ Heavy Metal +

Subtitle

+
+
+ +
+ +

Più ascolti più accurati saranno i suggerimenti.

+
+
+
+
+ Youn song poster +
+ play icon +
+
+ Young +

Subtitle

+
+ +
+
+ Einaudi song poster +
+ play icon +
+
+ Heavy Metal +

Subtitle

+
+
+
+ +
+
+
+ poster + +
+

Sinister

+

Brano Nome

+
+
+ +
+ heart icon + + folder icon +
+
+ +
+
+ stop icon + + play skip back icon + + play circle icon + + play skip forward + + reload icon +
+ +
+

2:01

+ +

4:35

+
+
+ +
+
+ menu icon + + TV icon + + volume high ouline icon +
+ +
+
+
+ +