diff --git a/assets/img/back.svg b/assets/img/back.svg new file mode 100644 index 00000000..c92b17f6 --- /dev/null +++ b/assets/img/back.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/img/desktop.svg b/assets/img/desktop.svg new file mode 100644 index 00000000..d8904dcb --- /dev/null +++ b/assets/img/desktop.svg @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/assets/img/folder.svg b/assets/img/folder.svg new file mode 100644 index 00000000..af6e867a --- /dev/null +++ b/assets/img/folder.svg @@ -0,0 +1,15 @@ + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/heart.svg b/assets/img/heart.svg new file mode 100644 index 00000000..44b7e87b --- /dev/null +++ b/assets/img/heart.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/img/menu.svg b/assets/img/menu.svg new file mode 100644 index 00000000..64d50e5e --- /dev/null +++ b/assets/img/menu.svg @@ -0,0 +1,102 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/next.svg b/assets/img/next.svg new file mode 100644 index 00000000..88c88cfb --- /dev/null +++ b/assets/img/next.svg @@ -0,0 +1,8 @@ + + + + + + \ No newline at end of file diff --git a/assets/img/play-button.svg b/assets/img/play-button.svg new file mode 100644 index 00000000..f6062d6e --- /dev/null +++ b/assets/img/play-button.svg @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/img/plus1.png b/assets/img/plus1.png new file mode 100644 index 00000000..a7744244 Binary files /dev/null and b/assets/img/plus1.png differ diff --git a/assets/img/refresh-svgrepo-com.svg b/assets/img/refresh-svgrepo-com.svg new file mode 100644 index 00000000..a007cce5 --- /dev/null +++ b/assets/img/refresh-svgrepo-com.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/assets/img/shuffle.svg b/assets/img/shuffle.svg new file mode 100644 index 00000000..75b6d0e4 --- /dev/null +++ b/assets/img/shuffle.svg @@ -0,0 +1,15 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/img/speaker.svg b/assets/img/speaker.svg new file mode 100644 index 00000000..095fbe4a --- /dev/null +++ b/assets/img/speaker.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index e69de29b..465b2bcc 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,353 @@ +* { + margin: 0; + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} + +.body-container { + display: grid; + grid-template-columns: 250px 1fr; + grid-template-rows: 90px 1fr 90px; + grid-template-areas: + 'left-side-bar header' + 'left-side-bar main' + 'footer footer' + ; + height: 100vh; + position: relative; + left: 0; + top: 0; +} + +header { + position: relative; + grid-area: header; + background-color: #080B12; +} +header button { + color: white; + position: absolute; + right: 5px; + top: 30px; + height: 30px; + width: 200px; + border-radius: 15px; + background-color: #080B12; + border: 1px solid white; +} + +.left-side-bar { + grid-area: left-side-bar; + background-color: black; + display: grid; + grid-template-rows: 90px 120px 1fr 80px; +} + +.big-logo { + background-color: black; + height: 60px; + width: 150px; + margin: 20px 20px 20px 20px; +} + +.big-home-side { + display: grid; + grid-template-rows: repeat(auto-fill, 35px); +} + +.big-home-items { + display: inline-grid; + grid-template-columns: 15px 50px 1fr; + align-items: center; +} + +.hidden-side-color{ + width: 2px ; + height: 100%; +} + +.big-home-side :hover { + .hidden-side-color { + background-color: green; + } +} + + +.item-side-logo { + display: inline-grid; + height: 30px; + width: 30px; + fill: white; + margin-left: 5px; +} +.big-home-items h4 { + display: inline-block; + color: white; +} + +.big-playlist-side { + padding-top: 20px; + display: grid; + grid-template-rows: 50px 60px 1fr; + h2 { + margin-left: 20px; + color: white; + } +} + +.new-playlist { + display: flex; + margin-left: 20px; + grid-template-columns: 40px 1fr; +} +.new-playlist div { + display: inline-flex; + width: 50px; + height: 50px; + background-color: #A3A3A3; + img { + padding: 10px; + width: 30px; + height: 30px; + } +} + +.new-playlist h3 { + display: inline-flex; + text-align: center; + padding: 12px 5px 10px 10px ; + color: #6F6F6F; +} + +.playlist-item h4{ + color: #6F6F6F; + margin: 20px 0px 10px 20px; +} + +.big-profile-side { + margin: 5px 20px 0px 20px; + color: #6F6F6F; + br { + background-color: #6F6F6F; + } +} +.install-app { + padding-bottom: 10px; + display: grid; + grid-template-columns: 15px 1fr; +} + +.install-app svg { + height: 15px; + width: 15px; + margin-top: 2px ; +} + +.install-app p { + padding: 0px 0px 0px 5px ; +} + +.profile-name { + display: grid; + grid-template-columns: 25px 1fr; + padding-top: 10px; +} + +.profile-name svg { + height: 25px; + width: 25px; + fill: gray; + background-color: gray; + border-radius: 12.5px; +} + +.profile-name h4 { + color: white; + padding-left: 10px; + padding-top: 3px; +} + + +main { + grid-area: main; + background-color: #141922; + display: grid; + grid-template-rows: .1fr 1fr; +} + +.header-con { + display: grid; + grid-auto-columns: .01fr 1fr .01fr; + text-align: center; + grid-template-areas: '. main-header .'; +} +.main-header { + grid-area: main-header; + display: flex; + justify-content: center; + flex-wrap: wrap; + gap: 10px; +} + +.main-header h3 { + color: #7A7D81; + padding: 1rem .15rem .8rem .15rem; + font-size: 1rem; +} + +.main-main { + padding: 10px 0px 10px 10px; + color: white; +} + +.main-main h2 { + font-size: 30px; +} + +.main-main h4 { + color: #7A7D81; +} +.items { + display: grid; + grid-template-columns: repeat(auto-fill,190px); +} + +.article-item { + margin-right: .5rem; + text-align: center; + padding: .3rem 0px .0 0px ; +} + +.article-item img { + max-width: 100%; + height: auto; + padding: 1rem 0 1rem 0; + +} + +.made-for-user { + margin: 2rem 0 1rem 0rem; +} + +footer { + grid-area: footer; + position:sticky; + left: 0; + bottom: 0; + display: grid; + grid-template-columns: .6fr 2fr 220px; + + background-color: #282828; +} + +footer svg { + height: 20px; + width: 20px; + fill: white; +} +.singer-name { + max-width: 250px; + margin: 20px 5px 20px 10px; + color: white; + display: grid; + grid-template-columns: 1fr 2.8fr 1fr ; + gap: 5px; +} +.singer-name h5 { + color: #6F6F6F; +} +.singer-name img { + height: 50px; + width: 50px; +} + +.control-panel { + padding: 10px 5px 10px 5px; + display: grid; + grid-template-rows: 30px 30px; +} +.contorl-buttons { + margin: auto; +} +.contorl-buttons svg { + height: 25px; + width: 25px; +} + +#back-icon { + transform: rotate(180deg); +} +#play-icon { + height: 30px; + width: 30px; + padding: 0 10px 0 10px; +} + +.range-form { + display: grid; + grid-template-columns: .6fr 3fr .6fr; + grid-template-areas: '. range-area .'; +} + +.range-area { + grid-area: range-area; + display: grid; + grid-template-columns: .1fr 1fr .1fr; +} + +.range-area time { + padding: 10px; + color: white; + margin: auto; +} +#music-range { + width: 100%; +} + +.sound-volume { + padding: 30px 1px 20px 1px; + +} + +.small-left-sidebar { + grid-area: left-side-bar; + background-color: blueviolet; + width: .5fr; +} + +@media screen and (max-width:600px) { + .left-side-bar { + display: none; + } + .body-container { + display: grid; + grid-template-columns: 50px 1fr; + grid-template-rows: 80px 1fr 80px; + grid-template-areas: + 'left-side-bar header' + 'left-side-bar main' + 'footer footer' + ; + height: 100vh; + } + .items { + display: grid; + grid-template-columns: repeat(auto-fill,240px); + } + .header-con { + display: grid; + grid-auto-columns: .1fr 1fr .1fr; + text-align: center; + grid-template-areas: '. main-header .'; + } + .range-form { + display: grid; + grid-template-columns: .1fr 3fr .1fr; + grid-template-areas: '. range-area .'; + } +} + +@media screen and (min-width:600px ) { + .small-left-sidebar { + display: none; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 56efbdba..237642d3 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,305 @@ - Document + Spotify + - - + +
+ +
+
+
+
+

IN EVIDENCE

+

PODCAST

+

RANKINGS

+

GENERS AND MOODS

+

NEW RELEASES

+

EXPLORE

+ +
+
+
+

Recently Played

+
+
+
+ +

+ Recently Played +

+

+ h4name +

+
+
+ +

+ Strangers Movie All Episode from Season 1 to 4 +

+

+ h4name +

+
+
+ +

+ h2name +

+

+ h4name +

+
+
+ +

+ h2name +

+

+ h4name +

+
+
+ +

+ h2name +

+

+ h4name +

+
+
+ +

+ h2name +

+

+ h4name +

+
+
+
+
+

Made For Farshad Bagdeli

+

These are based songs you may like

+
+
+ +

+ Recently Played +

+

+ h4name +

+
+
+ +

+ Strangers Movie All Episode from Season 1 to 4 +

+

+ h4name +

+
+
+
+
+

Your top mixes

+

These are based songs you may like

+
+
+ +

+ Recently Played +

+

+ h4name +

+
+
+ +

+ Strangers Movie All Episode from Season 1 to 4 +

+

+ h4name +

+
+
+
+
+
+ + + \ No newline at end of file