From d12175b2419cc26da13d6bdd6c81724f684ce270 Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Thu, 21 Mar 2024 14:41:46 +0100
Subject: [PATCH 01/11] logo and left side bar completed

---
 assets/img/plus1.png | Bin 0 -> 132 bytes
 css/style.css        | 188 +++++++++++++++++++++++++++++++++++++++++++
 index.html           |  89 +++++++++++++++++++-
 3 files changed, 274 insertions(+), 3 deletions(-)
 create mode 100644 assets/img/plus1.png

diff --git a/assets/img/plus1.png b/assets/img/plus1.png
new file mode 100644
index 0000000000000000000000000000000000000000..a774424483d926ad8d393336bc002e65f7b86194
GIT binary patch
literal 132
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-g_);|
zV@SoE<OGS#2lgWUQ4PX><aw2x9{fMSx9ES!u`k;bUL0pMeDHq-Ys-QE7Zs#FC?rXg
aFfcq4_TD-n-uNZZ1O`u6KbLh*2~7Zir6|z=

literal 0
HcmV?d00001

diff --git a/css/style.css b/css/style.css
index e69de29b..8ce84590 100644
--- a/css/style.css
+++ b/css/style.css
@@ -0,0 +1,188 @@
+* {
+  margin: 0;
+}
+
+.body-container {
+  display: grid;
+  grid-template-columns: minmax(100px,250px) 8fr;
+  grid-template-rows: 90px 1fr 90px;
+  grid-template-areas:
+  'left-side-bar header'
+  'left-side-bar main'
+  'footer footer'
+  ;
+  height: 100vh;
+}
+
+header {
+  grid-area: header;
+  background-color: #080B12;
+}
+
+.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 ;
+  background-color: green;
+  height: 100%;
+}
+
+.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: bisque;
+}
+
+footer {
+  grid-area: footer;
+  background-color: brown;
+}
+.small-left-sidebar {
+  grid-area: left-side-bar;
+  background-color: blueviolet;
+  width: 1fr;
+}
+
+@media screen and (max-width:530px) {
+  .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;
+  }
+}
+
+@media screen and (min-width:530px ) {
+  .small-left-sidebar {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 56efbdba..519c3c5b 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,92 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Spotify</title>
+    <link rel="stylesheet" href="./css/style.css">
 </head>
-<body>
-    
+<body class="body-container">
+    <header>
+        <button>
+
+        </button>
+    </header>
+    <main>
+
+    </main>
+    <aside class="left-side-bar">
+        <section class="big-logo">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1134 340" class="spotify-logo--text"><title>Spotify</title><path fill="#ffffff" d="M8 171c0 92 76 168 168 168s168-76 168-168S268 4 176 4 8 79 8 171zm230 78c-39-24-89-30-147-17-14 2-16-18-4-20 64-15 118-8 162 19 11 7 0 24-11 18zm17-45c-45-28-114-36-167-20-17 5-23-21-7-25 61-18 136-9 188 23 14 9 0 31-14 22zM80 133c-17 6-28-23-9-30 59-18 159-15 221 22 17 9 1 37-17 27-54-32-144-35-195-19zm379 91c-17 0-33-6-47-20-1 0-1 1-1 1l-16 19c-1 1-1 2 0 3 18 16 40 24 64 24 34 0 55-19 55-47 0-24-15-37-50-46-29-7-34-12-34-22s10-16 23-16 25 5 39 15c0 0 1 1 2 1s1-1 1-1l14-20c1-1 1-1 0-2-16-13-35-20-56-20-31 0-53 19-53 46 0 29 20 38 52 46 28 6 32 12 32 22 0 11-10 17-25 17zm95-77v-13c0-1-1-2-2-2h-26c-1 0-2 1-2 2v147c0 1 1 2 2 2h26c1 0 2-1 2-2v-46c10 11 21 16 36 16 27 0 54-21 54-61s-27-60-54-60c-15 0-26 5-36 17zm30 78c-18 0-31-15-31-35s13-34 31-34 30 14 30 34-12 35-30 35zm68-34c0 34 27 60 62 60s62-27 62-61-26-60-61-60-63 27-63 61zm30-1c0-20 13-34 32-34s33 15 33 35-13 34-32 34-33-15-33-35zm140-58v-29c0-1 0-2-1-2h-26c-1 0-2 1-2 2v29h-13c-1 0-2 1-2 2v22c0 1 1 2 2 2h13v58c0 23 11 35 34 35 9 0 18-2 25-6 1 0 1-1 1-2v-21c0-1 0-2-1-2h-2c-5 3-11 4-16 4-8 0-12-4-12-12v-54h30c1 0 2-1 2-2v-22c0-1-1-2-2-2h-30zm129-3c0-11 4-15 13-15 5 0 10 0 15 2h1s1-1 1-2V93c0-1 0-2-1-2-5-2-12-3-22-3-24 0-36 14-36 39v5h-13c-1 0-2 1-2 2v22c0 1 1 2 2 2h13v89c0 1 1 2 2 2h26c1 0 1-1 1-2v-89h25l37 89c-4 9-8 11-14 11-5 0-10-1-15-4h-1l-1 1-9 19c0 1 0 3 1 3 9 5 17 7 27 7 19 0 30-9 39-33l45-116v-2c0-1-1-1-2-1h-27c-1 0-1 1-1 2l-28 78-30-78c0-1-1-2-2-2h-44v-3zm-83 3c-1 0-2 1-2 2v113c0 1 1 2 2 2h26c1 0 1-1 1-2V134c0-1 0-2-1-2h-26zm-6-33c0 10 9 19 19 19s18-9 18-19-8-18-18-18-19 8-19 18zm245 69c10 0 19-8 19-18s-9-18-19-18-18 8-18 18 8 18 18 18zm0-34c9 0 17 7 17 16s-8 16-17 16-16-7-16-16 7-16 16-16zm4 18c3-1 5-3 5-6 0-4-4-6-8-6h-8v19h4v-6h4l4 6h5zm-3-9c2 0 4 1 4 3s-2 3-4 3h-4v-6h4z"/></svg>
+        </section>
+        <section class="big-home-side">
+            <div class="big-home-items">
+                <div class="hidden-side-color">
+                </div>
+                <div class="item-side-logo">
+                    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M448 463.746h-149.333v-149.333h-85.334v149.333h-149.333v-315.428l192-111.746 192 110.984v316.19z" fill="#ffffff"/></svg>
+                </div>
+                <h4>
+                    Home
+                </h4>
+            </div>
+            <div class="big-home-items">
+                <div class="hidden-side-color">
+                </div>
+                <div class="item-side-logo">
+                    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M349.714 347.937l93.714 109.969-16.254 13.969-93.969-109.969q-48.508 36.825-109.207 36.825-36.826 0-70.476-14.349t-57.905-38.603-38.603-57.905-14.349-70.476 14.349-70.476 38.603-57.905 57.905-38.603 70.476-14.349 70.476 14.349 57.905 38.603 38.603 57.905 14.349 70.476q0 37.841-14.73 71.619t-40.889 58.921zM224 377.397q43.428 0 80.254-21.461t58.286-58.286 21.461-80.254-21.461-80.254-58.286-58.285-80.254-21.46-80.254 21.46-58.285 58.285-21.46 80.254 21.46 80.254 58.285 58.286 80.254 21.461z" fill="#ffffff" fill-rule="evenodd"/></svg>
+                </div>
+                <h4>
+                    Seatch
+                </h4>
+            </div>
+            <div class="big-home-items">
+                <div class="hidden-side-color">
+                </div>
+                <div class="item-side-logo">
+                    <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M291.301 81.778l166.349 373.587-19.301 8.635-166.349-373.587zM64 463.746v-384h21.334v384h-21.334zM192 463.746v-384h21.334v384h-21.334z" fill="#ffffff"/></svg>
+                </div>
+                <h4>
+                    Your library
+                </h4>
+            </div>
+        </section>
+        <section class="big-playlist-side">
+            <h2>PLAYLIST</h2>
+            <div class="new-playlist">
+                <div class="imgBack">
+                <img src="./assets/img/plus1.png">
+                </div>
+                <h3>
+                    Create Playlist
+                </h3>
+            </div>    
+            <div class="playlist-item">
+                <h4>Playlist Name</h4>
+                <h4>Playlist Name</h4>
+                <h4>Playlist Name</h4>
+                <h4>Playlist Name</h4>
+                <h4>Playlist Name</h4>
+                <h4>Playlist Name</h4>
+                <h4>Playlist Name</h4>
+                <h4>Playlist Name</h4>
+            </div>
+        </section>
+        <section class="big-profile-side">
+            <div class="install-app">
+                <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Download icon</title><path d="M12 11.657V6h-1v5.65L9.076 9.414l-.758.65 3.183 3.702 3.195-3.7-.758-.653L12 11.657zM11.5 2C7.358 2 4 5.358 4 9.5c0 4.142 3.358 7.5 7.5 7.5 4.142 0 7.5-3.358 7.5-7.5C19 5.358 15.642 2 11.5 2zm0 14C7.916 16 5 13.084 5 9.5S7.916 3 11.5 3 18 5.916 18 9.5 15.084 16 11.5 16z" fill="#ffffff" fill-rule="evenodd"/></svg>
+                <p>Install app</p>
+            </div>
+            <hr>
+            <div class="profile-name">
+                <svg viewBox="0 0 80 90" xmlns="http://www.w3.org/2000/svg"><title>User Icon</title><path d="M67.74 61.78l-14.5-8.334c-.735-.422-1.24-1.145-1.385-1.98-.145-.835.088-1.685.638-2.33l5.912-6.93c3.747-4.378 5.81-9.967 5.81-15.737v-2.256c0-6.668-2.792-13.108-7.658-17.67C51.622 1.92 45.17-.386 38.392.054c-12.677.82-22.607 11.772-22.607 24.934v1.483c0 5.77 2.063 11.36 5.81 15.736l5.912 6.933c.55.644.783 1.493.638 2.33-.143.834-.648 1.556-1.383 1.98l-14.494 8.33C4.7 66.077 0 74.15 0 82.844v6.76h3.333v-6.76c0-7.5 4.055-14.46 10.59-18.174l14.5-8.334c1.597-.918 2.692-2.487 3.007-4.302.315-1.815-.19-3.66-1.387-5.06l-5.913-6.936c-3.23-3.775-5.01-8.594-5.01-13.57v-1.484c0-11.41 8.562-20.9 19.488-21.608 5.85-.377 11.415 1.61 15.67 5.598 4.26 3.992 6.605 9.404 6.605 15.24v2.254c0 4.976-1.778 9.796-5.01 13.57l-5.915 6.935c-1.195 1.4-1.7 3.246-1.386 5.06.313 1.816 1.41 3.385 3.008 4.303l14.507 8.338c6.525 3.71 10.58 10.67 10.58 18.17v6.76H80v-6.76c0-8.695-4.7-16.768-12.26-21.063z" fill="#ffffff" fill-rule="evenodd"/></svg>
+                <h4>Farshad Bagdeli</h4>
+            </div>
+        </section>
+    </aside>
+    <aside class="small-left-sidebar">
+
+    </aside>
+    <footer>
+        
+    </footer>
 </body>
 </html>
\ No newline at end of file

From a6962518b40cc8278fc2d8bbca4548040d41bf57 Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Fri, 22 Mar 2024 17:43:24 +0100
Subject: [PATCH 02/11] main header + recently played

---
 css/style.css | 75 ++++++++++++++++++++++++++++++++++++++++++++-------
 index.html    | 74 +++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 139 insertions(+), 10 deletions(-)

diff --git a/css/style.css b/css/style.css
index 8ce84590..f3eb1923 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,10 +1,11 @@
 * {
   margin: 0;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 
 .body-container {
   display: grid;
-  grid-template-columns: minmax(100px,250px) 8fr;
+  grid-template-columns: 250px 1fr;
   grid-template-rows: 90px 1fr 90px;
   grid-template-areas:
   'left-side-bar header'
@@ -15,9 +16,21 @@
 }
 
 header {
+  position: relative;
   grid-area: header;
   background-color: #080B12;
 }
+header button {
+  color: white;
+  position: fixed;
+  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;
@@ -101,10 +114,6 @@ header {
   margin: 20px 0px 10px 20px;
 }
 
-
-
-
-
 .big-profile-side {
   margin: 5px 20px 0px 20px;
   color: #6F6F6F;
@@ -151,7 +160,55 @@ header {
 
 main {
   grid-area: main;
-  background-color: bisque;
+  background-color: #141922;
+  display: grid;
+  grid-template-rows: .1fr 1fr;
+}
+
+.header-con {
+  display: grid;
+  grid-auto-columns: .001fr 1fr .001fr;
+  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: 15px 3px 10px 3px;
+  font-size: 1rem;
+}
+
+.main-main {
+  padding: 10px;
+  color: white;
+}
+
+.main-main h2 {
+  font-size: 30px;
+  padding-left: 10px;
+}
+
+.recentlyPlayed-items {
+  padding: 10px ;
+  display: grid;
+  grid-template-columns: repeat(auto-fill,240px);
+}
+
+.article-item {
+  margin-right: 5px;
+}
+
+
+.article-item img {
+  max-width: 100%;
+  height: auto;
 }
 
 footer {
@@ -161,10 +218,10 @@ footer {
 .small-left-sidebar {
   grid-area: left-side-bar;
   background-color: blueviolet;
-  width: 1fr;
+  width: .5fr;
 }
 
-@media screen and (max-width:530px) {
+@media screen and (max-width:635px) {
   .left-side-bar {
     display: none;
   }
@@ -181,7 +238,7 @@ footer {
   }
 }
 
-@media screen and (min-width:530px ) {
+@media screen and (min-width:635px ) {
   .small-left-sidebar {
     display: none;
   }
diff --git a/index.html b/index.html
index 519c3c5b..b01ce1c2 100644
--- a/index.html
+++ b/index.html
@@ -10,11 +10,83 @@
 <body class="body-container">
     <header>
         <button>
-
+            Premium Upgrade
         </button>
     </header>
     <main>
+        <div class="header-con">
+        <section class="main-header">
+            <h3>IN EVIDENCE</h3>
+            <h3>PODCAST</h3>
+            <h3>RANKINGS</h3>
+            <h3>GENERS AND MOODS</h3>
+            <h3>NEW RELEASES</h3>
+            <h3>EXPLORE</h3>
 
+        </section>
+        </div>
+        <section class="main-main">
+            <h2>Recently Played</h2>
+            <div class="recentlyPlayed-container">
+                <div class="recentlyPlayed-items">
+                    <article class="article-item">
+                        <img src="./assets/img/cure.jpeg">
+                        <h2>
+                            h2name
+                        </h2>
+                        <h4>
+                            h4name
+                        </h4>
+                    </article>
+                    <article class="article-item">
+                        <img src="./assets/img/cure.jpeg">
+                        <h2>
+                            h2name
+                        </h2>
+                        <h4>
+                            h4name
+                        </h4>
+                    </article>
+                    <article class="article-item">
+                        <img src="./assets/img/cure.jpeg">
+                        <h2>
+                            h2name
+                        </h2>
+                        <h4>
+                            h4name
+                        </h4>
+                    </article>
+                    <article class="article-item">
+                        <img src="./assets/img/cure.jpeg">
+                        <h2>
+                            h2name
+                        </h2>
+                        <h4>
+                            h4name
+                        </h4>
+                    </article>
+                    <article class="article-item">
+                        <img src="./assets/img/cure.jpeg">
+                        <h2>
+                            h2name
+                        </h2>
+                        <h4>
+                            h4name
+                        </h4>
+                    </article>
+                    <article class="article-item">
+                        <img src="./assets/img/cure.jpeg">
+                        <h2>
+                            h2name
+                        </h2>
+                        <h4>
+                            h4name
+                        </h4>
+                    </article>
+                </div>
+            </div>
+            
+        </section>
     </main>
     <aside class="left-side-bar">
         <section class="big-logo">

From edf1a850458ea3a67f748475b37d0f3e76a3c95d Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Fri, 22 Mar 2024 18:33:01 +0100
Subject: [PATCH 03/11] main container finished

---
 css/style.css | 40 ++++++++++++++++++-------
 index.html    | 83 ++++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 94 insertions(+), 29 deletions(-)

diff --git a/css/style.css b/css/style.css
index f3eb1923..3ea8b810 100644
--- a/css/style.css
+++ b/css/style.css
@@ -167,7 +167,7 @@ main {
 
 .header-con {
   display: grid;
-  grid-auto-columns: .001fr 1fr .001fr;
+  grid-auto-columns: .01fr 1fr .01fr;
   text-align: center;
   grid-template-areas: '. main-header .';
 }
@@ -181,34 +181,42 @@ main {
 
 .main-header h3 {
   color: #7A7D81;
-  padding: 15px 3px 10px 3px;
+  padding: 1rem .15rem .8rem .15rem;
   font-size: 1rem;
 }
 
 .main-main {
-  padding: 10px;
+  padding: 10px 0px 10px 10px;
   color: white;
 }
 
 .main-main h2 {
   font-size: 30px;
-  padding-left: 10px;
 }
 
-.recentlyPlayed-items {
-  padding: 10px ;
+.main-main h4 {
+  color: #7A7D81;
+}
+.items {
   display: grid;
-  grid-template-columns: repeat(auto-fill,240px);
+  grid-template-columns: repeat(auto-fill,190px);
 }
 
 .article-item {
-  margin-right: 5px;
+  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 {
@@ -221,7 +229,7 @@ footer {
   width: .5fr;
 }
 
-@media screen and (max-width:635px) {
+@media screen and (max-width:668px) {
   .left-side-bar {
     display: none;
   }
@@ -236,9 +244,19 @@ footer {
   ;
   height: 100vh;
   }
+  .items {
+    display: grid;
+    grid-template-columns: repeat(auto-fill,270px);
+  }
+  .header-con {
+    display: grid;
+    grid-auto-columns: .1fr 1fr .1fr;
+    text-align: center;
+    grid-template-areas: '. main-header .';
+  }
 }
 
-@media screen and (min-width:635px ) {
+@media screen and (min-width:668px ) {
   .small-left-sidebar {
     display: none;
   }
diff --git a/index.html b/index.html
index b01ce1c2..d4a58e01 100644
--- a/index.html
+++ b/index.html
@@ -27,65 +27,112 @@ <h3>EXPLORE</h3>
         </div>
         <section class="main-main">
             <h2>Recently Played</h2>
-            <div class="recentlyPlayed-container">
-                <div class="recentlyPlayed-items">
+            <section class="recentlyPlayed-container">
+                <div class="items">
                     <article class="article-item">
                         <img src="./assets/img/cure.jpeg">
-                        <h2>
-                            h2name
-                        </h2>
+                        <h3>
+                            Recently Played
+                        </h3>
                         <h4>
                             h4name
                         </h4>
                     </article>
                     <article class="article-item">
                         <img src="./assets/img/cure.jpeg">
-                        <h2>
-                            h2name
-                        </h2>
+                        <h3>
+                            Strangers Movie All Episode from Season 1 to 4
+                        </h3>
                         <h4>
                             h4name
                         </h4>
                     </article>
                     <article class="article-item">
                         <img src="./assets/img/cure.jpeg">
-                        <h2>
+                        <h3>
                             h2name
-                        </h2>
+                        </h3>
                         <h4>
                             h4name
                         </h4>
                     </article>
                     <article class="article-item">
                         <img src="./assets/img/cure.jpeg">
-                        <h2>
+                        <h3>
                             h2name
-                        </h2>
+                        </h3>
                         <h4>
                             h4name
                         </h4>
                     </article>
                     <article class="article-item">
                         <img src="./assets/img/cure.jpeg">
-                        <h2>
+                        <h3>
                             h2name
-                        </h2>
+                        </h3>
                         <h4>
                             h4name
                         </h4>
                     </article>
                     <article class="article-item">
                         <img src="./assets/img/cure.jpeg">
-                        <h2>
+                        <h3>
                             h2name
-                        </h2>
+                        </h3>
                         <h4>
                             h4name
                         </h4>
                     </article>
                 </div>
-            </div>
-            
+            </section>
+            <section class="made-for-user">
+                <h2>Made For Farshad Bagdeli</h2>
+                <h4>These are based songs you may like</h4>
+                <div class="items">
+                    <article class="article-item">
+                        <img src="./assets/img/cure.jpeg">
+                        <h3>
+                            Recently Played
+                        </h3>
+                        <h4>
+                            h4name
+                        </h4>
+                    </article>
+                    <article class="article-item">
+                        <img src="./assets/img/cure.jpeg">
+                        <h3>
+                            Strangers Movie All Episode from Season 1 to 4
+                        </h3>
+                        <h4>
+                            h4name
+                        </h4>
+                    </article>
+                </div>
+            </section>
+            <section class="made-for-user">
+                <h2>Your top mixes</h2>
+                <h4>These are based songs you may like</h4>
+                <div class="items">
+                    <article class="article-item">
+                        <img src="./assets/img/cure.jpeg">
+                        <h3>
+                            Recently Played
+                        </h3>
+                        <h4>
+                            h4name
+                        </h4>
+                    </article>
+                    <article class="article-item">
+                        <img src="./assets/img/cure.jpeg">
+                        <h3>
+                            Strangers Movie All Episode from Season 1 to 4
+                        </h3>
+                        <h4>
+                            h4name
+                        </h4>
+                    </article>
+                </div>
+            </section>
         </section>
     </main>
     <aside class="left-side-bar">

From 387181368e81ea3d984167e56e38648101fe2327 Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Sat, 23 Mar 2024 17:10:09 +0100
Subject: [PATCH 04/11] fixed the sticky bottom

---
 css/style.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 3ea8b810..667c0672 100644
--- a/css/style.css
+++ b/css/style.css
@@ -13,6 +13,9 @@
   'footer footer'
   ;
   height: 100vh;
+  position: relative;
+  left: 0;
+  top: 0;
 }
 
 header {
@@ -222,6 +225,9 @@ main {
 footer {
   grid-area: footer;
   background-color: brown;
+  position:sticky;
+  left: 0;
+  bottom: 0;
 }
 .small-left-sidebar {
   grid-area: left-side-bar;
@@ -246,7 +252,7 @@ footer {
   }
   .items {
     display: grid;
-    grid-template-columns: repeat(auto-fill,270px);
+    grid-template-columns: repeat(auto-fill,240px);
   }
   .header-con {
     display: grid;

From f7908afd6ac60506a6a7fe640dd4728dabc4d828 Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Sat, 23 Mar 2024 19:57:44 +0100
Subject: [PATCH 05/11] singer name part finished

---
 assets/img/folder.svg | 15 +++++++++++++++
 assets/img/heart.svg  |  8 ++++++++
 css/style.css         | 33 ++++++++++++++++++++++++++++++-
 index.html            | 45 +++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 98 insertions(+), 3 deletions(-)
 create mode 100644 assets/img/folder.svg
 create mode 100644 assets/img/heart.svg

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 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 562.924 562.924"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M539.977,115.93H263.864l-34.024-31.793c-4.25-3.972-9.85-6.181-15.67-6.181H22.95C10.275,77.955,0,88.227,0,100.905
+			v361.114c0,12.678,10.275,22.95,22.95,22.95h517.024c12.675,0,22.95-10.272,22.95-22.95V138.879
+			C562.927,126.205,552.651,115.93,539.977,115.93z M517.026,439.071H45.903V123.858h159.215l34.021,31.793
+			c4.25,3.972,9.851,6.181,15.67,6.181h262.217V439.071z"/>
+	</g>
+</g>
+</svg>
\ 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 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+
<rect x="0" fill="none" width="24" height="24"/>
+
<g>
+
<path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 667c0672..241637f9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -224,10 +224,41 @@ main {
 
 footer {
   grid-area: footer;
-  background-color: brown;
   position:sticky;
   left: 0;
   bottom: 0;
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  background-color: #282828;
+}
+
+.singer-name {
+  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;
+}
+
+.singer-name svg {
+  height: 20px;
+  width: 20px;
+  fill: white;
+}
+
+.play-tools {
+  background-color: antiquewhite;
+}
+
+.sound-volume {
+  background-color: blueviolet;
 }
 .small-left-sidebar {
   grid-area: left-side-bar;
diff --git a/index.html b/index.html
index d4a58e01..7a1bfbdd 100644
--- a/index.html
+++ b/index.html
@@ -157,7 +157,7 @@ <h4>
                     <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M349.714 347.937l93.714 109.969-16.254 13.969-93.969-109.969q-48.508 36.825-109.207 36.825-36.826 0-70.476-14.349t-57.905-38.603-38.603-57.905-14.349-70.476 14.349-70.476 38.603-57.905 57.905-38.603 70.476-14.349 70.476 14.349 57.905 38.603 38.603 57.905 14.349 70.476q0 37.841-14.73 71.619t-40.889 58.921zM224 377.397q43.428 0 80.254-21.461t58.286-58.286 21.461-80.254-21.461-80.254-58.286-58.285-80.254-21.46-80.254 21.46-58.285 58.285-21.46 80.254 21.46 80.254 58.285 58.286 80.254 21.461z" fill="#ffffff" fill-rule="evenodd"/></svg>
                 </div>
                 <h4>
-                    Seatch
+                    Search
                 </h4>
             </div>
             <div class="big-home-items">
@@ -208,7 +208,48 @@ <h4>Farshad Bagdeli</h4>
 
     </aside>
     <footer>
-        
+        <section class="singer-name">
+            <img src="./assets/img/mixdaily.jpeg">
+            <div>
+                <h4 >
+                    Shajarian
+                </h4>
+                <h5>
+                    Morghe Sahar
+                </h5>
+            </div>
+            <div>
+                <svg width="800px" height="800px" viewBox="0 0 24 24"   xmlns="http://www.w3.org/2000/svg">
+
+                    <rect x="0" fill="none" width="24" height="24"/>
+                    
+                    <g>
+                    
+                    <path d="M16.5 4.5c2.206 0 4 1.794 4 4 0 4.67-5.543 8.94-8.5 11.023C9.043 17.44 3.5 13.17 3.5 8.5c0-2.206 1.794-4 4-4 1.298 0 2.522.638 3.273 1.706L12 7.953l1.227-1.746c.75-1.07 1.975-1.707 3.273-1.707m0-1.5c-1.862 0-3.505.928-4.5 2.344C11.005 3.928 9.362 3 7.5 3 4.462 3 2 5.462 2 8.5c0 5.72 6.5 10.438 10 12.85 3.5-2.412 10-7.13 10-12.85C22 5.462 19.538 3 16.5 3z"/>
+                    
+                    </g>
+                    
+                </svg>
+                <svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 562.924 562.924"
+	 xml:space="preserve">
+<g>
+	<g>
+		<path d="M539.977,115.93H263.864l-34.024-31.793c-4.25-3.972-9.85-6.181-15.67-6.181H22.95C10.275,77.955,0,88.227,0,100.905
+			v361.114c0,12.678,10.275,22.95,22.95,22.95h517.024c12.675,0,22.95-10.272,22.95-22.95V138.879
+			C562.927,126.205,552.651,115.93,539.977,115.93z M517.026,439.071H45.903V123.858h159.215l34.021,31.793
+			c4.25,3.972,9.851,6.181,15.67,6.181h262.217V439.071z"/>
+	</g>
+</g>
+                </svg>
+            </div>
+        </section>
+        <section class="play-tools">
+
+        </section>
+        <section class="sound-volume">
+
+        </section>
     </footer>
 </body>
 </html>
\ No newline at end of file

From dd2cb36b59b7fd81a8b77f8a892811a3a1eed770 Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Sat, 23 Mar 2024 21:31:50 +0100
Subject: [PATCH 06/11] middle of control panel

---
 assets/img/back.svg                | 12 ++++++++
 assets/img/next.svg                |  8 ++++++
 assets/img/play-button.svg         | 12 ++++++++
 assets/img/refresh-svgrepo-com.svg |  2 ++
 assets/img/shuffle.svg             | 15 ++++++++++
 css/style.css                      | 34 ++++++++++++++++++++++
 index.html                         | 45 ++++++++++++++++++++++++++++--
 7 files changed, 126 insertions(+), 2 deletions(-)
 create mode 100644 assets/img/back.svg
 create mode 100644 assets/img/next.svg
 create mode 100644 assets/img/play-button.svg
 create mode 100644 assets/img/refresh-svgrepo-com.svg
 create mode 100644 assets/img/shuffle.svg

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 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Icons3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 32 32" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<rect x="9" y="9" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 23 32)" class="st1" width="5" height="14"/>
+<polygon class="st1" points="23,23 23,9 14,16 "/>
+</svg>
\ 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 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 32 32" xml:space="preserve">
+<path d="M23,8h-5c-0.6,0-1,0.4-1,1v5L9.6,8.2C9.3,8,8.9,7.9,8.6,8.1C8.2,8.3,8,8.6,8,9v14c0,0.4,0.2,0.7,0.6,0.9C8.7,24,8.9,24,9,24
+	c0.2,0,0.4-0.1,0.6-0.2L17,18v5c0,0.6,0.4,1,1,1h5c0.6,0,1-0.4,1-1V9C24,8.4,23.6,8,23,8z"/>
+</svg>
\ 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 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 330 330" xml:space="preserve">
+<g id="XMLID_228_">
+	<path id="XMLID_229_" d="M236.95,152.281l-108-67.501c-4.624-2.89-10.453-3.044-15.222-0.4C108.959,87.024,106,92.047,106,97.5v135
+		c0,5.453,2.959,10.476,7.728,13.12c2.266,1.256,4.77,1.88,7.271,1.88c2.763,0,5.523-0.763,7.95-2.28l108-67.499
+		c4.386-2.741,7.05-7.548,7.05-12.72C244,159.829,241.336,155.022,236.95,152.281z"/>
+	<path id="XMLID_230_" d="M165,0C74.019,0,0,74.019,0,165s74.019,165,165,165s165-74.019,165-165S255.981,0,165,0z M165,300
+		c-74.44,0-135-60.561-135-135S90.56,30,165,30s135,60.561,135,135S239.439,300,165,300z"/>
+</g>
+</svg>
\ No newline at end of file
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 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M27.1 14.313V5.396L24.158 8.34c-2.33-2.325-5.033-3.503-8.11-3.503C9.902 4.837 4.901 9.847 4.899 16c.001 6.152 5.003 11.158 11.15 11.16 4.276 0 9.369-2.227 10.836-8.478l.028-.122h-3.23l-.022.068c-1.078 3.242-4.138 5.421-7.613 5.421a8 8 0 0 1-5.691-2.359A7.993 7.993 0 0 1 8 16.001c0-4.438 3.611-8.049 8.05-8.049 2.069 0 3.638.58 5.924 2.573l-3.792 3.789H27.1z"/></svg>
\ 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 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 32 32" xml:space="preserve">
+<g>
+	<path d="M22.6,19.8c-0.3-0.2-0.7-0.3-1.1-0.1c-0.3,0.2-0.6,0.5-0.6,0.9V22c-3.3,0-6-2.7-6-6c0-4.4-3.6-8-8-8C6.4,8,6,8.4,6,9
+		s0.4,1,1,1c3.3,0,6,2.7,6,6s-2.7,6-6,6c-0.6,0-1,0.4-1,1s0.4,1,1,1c3,0,5.6-1.7,7-4.1c1.4,2.5,4,4.1,7,4.1v1.4
+		c0,0.4,0.2,0.7,0.6,0.9c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.4-0.1,0.6-0.2l3-2.4c0.2-0.2,0.4-0.5,0.4-0.8s-0.1-0.6-0.4-0.8L22.6,19.8z
+		"/>
+	<path d="M15.8,12.3c0.3,0,0.5-0.1,0.7-0.3c1.1-1.3,2.8-2,4.5-2v1.4c0,0.4,0.2,0.7,0.6,0.9c0.1,0.1,0.3,0.1,0.4,0.1
+		c0.2,0,0.4-0.1,0.6-0.2l3-2.4C25.9,9.6,26,9.3,26,9s-0.1-0.6-0.4-0.8l-3-2.4c-0.3-0.2-0.7-0.3-1.1-0.1C21.2,5.9,21,6.2,21,6.6V8
+		c-2.3,0-4.4,1-6,2.7c-0.4,0.4-0.3,1,0.1,1.4C15.3,12.2,15.6,12.3,15.8,12.3z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 241637f9..aea1402d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -266,6 +266,40 @@ footer {
   width: .5fr;
 }
 
+.control-panel {
+  padding: 10px 5px 20px 5px;
+  width: 100%;
+}
+.contorl-buttons {
+  margin: auto;
+  width: 50%;
+}
+.contorl-buttons svg {
+  height: 25px;
+  width: 25px;
+  background-color: #282828;
+  fill: white;
+}
+
+#back-icon {
+  transform: rotate(180deg);
+}
+#play-icon {
+  height: 35px;
+  width: 35px;
+  padding: 0 10px 0 10px;
+}
+
+.range-form {
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+  grid-template-areas: '. music-range .';
+}
+#music-range {
+  grid-area: music-range;
+}
+
+
 @media screen and (max-width:668px) {
   .left-side-bar {
     display: none;
diff --git a/index.html b/index.html
index 7a1bfbdd..1a06b11b 100644
--- a/index.html
+++ b/index.html
@@ -244,8 +244,49 @@ <h5>
                 </svg>
             </div>
         </section>
-        <section class="play-tools">
-
+        <section class="control-panel">
+            <div class="controls">
+                <div class="contorl-buttons">
+                    <svg fill="#000000" height="800px" width="800px" version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 32 32" xml:space="preserve">
+<g>
+	<path d="M22.6,19.8c-0.3-0.2-0.7-0.3-1.1-0.1c-0.3,0.2-0.6,0.5-0.6,0.9V22c-3.3,0-6-2.7-6-6c0-4.4-3.6-8-8-8C6.4,8,6,8.4,6,9
+		s0.4,1,1,1c3.3,0,6,2.7,6,6s-2.7,6-6,6c-0.6,0-1,0.4-1,1s0.4,1,1,1c3,0,5.6-1.7,7-4.1c1.4,2.5,4,4.1,7,4.1v1.4
+		c0,0.4,0.2,0.7,0.6,0.9c0.1,0.1,0.3,0.1,0.4,0.1c0.2,0,0.4-0.1,0.6-0.2l3-2.4c0.2-0.2,0.4-0.5,0.4-0.8s-0.1-0.6-0.4-0.8L22.6,19.8z
+		"/>
+	<path d="M15.8,12.3c0.3,0,0.5-0.1,0.7-0.3c1.1-1.3,2.8-2,4.5-2v1.4c0,0.4,0.2,0.7,0.6,0.9c0.1,0.1,0.3,0.1,0.4,0.1
+		c0.2,0,0.4-0.1,0.6-0.2l3-2.4C25.9,9.6,26,9.3,26,9s-0.1-0.6-0.4-0.8l-3-2.4c-0.3-0.2-0.7-0.3-1.1-0.1C21.2,5.9,21,6.2,21,6.6V8
+		c-2.3,0-4.4,1-6,2.7c-0.4,0.4-0.3,1,0.1,1.4C15.3,12.2,15.6,12.3,15.8,12.3z"/>
+</g>
+                    </svg>
+                    <svg fill="#000000" height="800px" width="800px" version="1.1" id="back-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 32 32" xml:space="preserve">
+<path d="M23,8h-5c-0.6,0-1,0.4-1,1v5L9.6,8.2C9.3,8,8.9,7.9,8.6,8.1C8.2,8.3,8,8.6,8,9v14c0,0.4,0.2,0.7,0.6,0.9C8.7,24,8.9,24,9,24
+	c0.2,0,0.4-0.1,0.6-0.2L17,18v5c0,0.6,0.4,1,1,1h5c0.6,0,1-0.4,1-1V9C24,8.4,23.6,8,23,8z"/>
+                    </svg>
+                    <svg fill="#000000" height="800px" width="800px" version="1.1" id="play-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 330 330" xml:space="preserve">
+<g id="XMLID_228_">
+	<path id="XMLID_229_" d="M236.95,152.281l-108-67.501c-4.624-2.89-10.453-3.044-15.222-0.4C108.959,87.024,106,92.047,106,97.5v135
+		c0,5.453,2.959,10.476,7.728,13.12c2.266,1.256,4.77,1.88,7.271,1.88c2.763,0,5.523-0.763,7.95-2.28l108-67.499
+		c4.386-2.741,7.05-7.548,7.05-12.72C244,159.829,241.336,155.022,236.95,152.281z"/>
+	<path id="XMLID_230_" d="M165,0C74.019,0,0,74.019,0,165s74.019,165,165,165s165-74.019,165-165S255.981,0,165,0z M165,300
+		c-74.44,0-135-60.561-135-135S90.56,30,165,30s135,60.561,135,135S239.439,300,165,300z"/>
+</g>
+                    </svg>
+                    <svg fill="#000000" height="800px" width="800px" version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 32 32" xml:space="preserve">
+<path d="M23,8h-5c-0.6,0-1,0.4-1,1v5L9.6,8.2C9.3,8,8.9,7.9,8.6,8.1C8.2,8.3,8,8.6,8,9v14c0,0.4,0.2,0.7,0.6,0.9C8.7,24,8.9,24,9,24
+	c0.2,0,0.4-0.1,0.6-0.2L17,18v5c0,0.6,0.4,1,1,1h5c0.6,0,1-0.4,1-1V9C24,8.4,23.6,8,23,8z"/>
+                    </svg>
+                    <svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M27.1 14.313V5.396L24.158 8.34c-2.33-2.325-5.033-3.503-8.11-3.503C9.902 4.837 4.901 9.847 4.899 16c.001 6.152 5.003 11.158 11.15 11.16 4.276 0 9.369-2.227 10.836-8.478l.028-.122h-3.23l-.022.068c-1.078 3.242-4.138 5.421-7.613 5.421a8 8 0 0 1-5.691-2.359A7.993 7.993 0 0 1 8 16.001c0-4.438 3.611-8.049 8.05-8.049 2.069 0 3.638.58 5.924 2.573l-3.792 3.789H27.1z"/></svg>
+                </div>
+            </div>
+            <div class="range-form">
+                <time>0:00</time>
+                <input type="range" id="music-range"  >
+                <time>3:03</time>
+            </div>
         </section>
         <section class="sound-volume">
 

From 463c0a7dfef2a0f69135566f579c9c8a2a648c83 Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Sun, 24 Mar 2024 10:28:19 +0100
Subject: [PATCH 07/11] save progres

---
 css/style.css | 14 ++++++++------
 index.html    |  4 +---
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/css/style.css b/css/style.css
index aea1402d..605d6f95 100644
--- a/css/style.css
+++ b/css/style.css
@@ -233,6 +233,7 @@ footer {
 }
 
 .singer-name {
+  max-width: 250px;
   margin: 20px 5px 20px 10px;
   color: white;
   display: grid;
@@ -268,11 +269,12 @@ footer {
 
 .control-panel {
   padding: 10px 5px 20px 5px;
-  width: 100%;
+  display: grid;
+  grid-template-rows: 50px 50px;
+  border: 5px solid red;
 }
 .contorl-buttons {
   margin: auto;
-  width: 50%;
 }
 .contorl-buttons svg {
   height: 25px;
@@ -291,12 +293,12 @@ footer {
 }
 
 .range-form {
-  display: grid;
-  grid-template-columns: 1fr 3fr 1fr;
-  grid-template-areas: '. music-range .';
+  margin: auto;
+  width: 70%;
 }
 #music-range {
-  grid-area: music-range;
+  max-width: 500px;
+  width: 100%;
 }
 
 
diff --git a/index.html b/index.html
index 1a06b11b..cea94b8c 100644
--- a/index.html
+++ b/index.html
@@ -245,8 +245,7 @@ <h5>
             </div>
         </section>
         <section class="control-panel">
-            <div class="controls">
-                <div class="contorl-buttons">
+            <div class="contorl-buttons">
                     <svg fill="#000000" height="800px" width="800px" version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 	 viewBox="0 0 32 32" xml:space="preserve">
 <g>
@@ -280,7 +279,6 @@ <h5>
 	c0.2,0,0.4-0.1,0.6-0.2L17,18v5c0,0.6,0.4,1,1,1h5c0.6,0,1-0.4,1-1V9C24,8.4,23.6,8,23,8z"/>
                     </svg>
                     <svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M27.1 14.313V5.396L24.158 8.34c-2.33-2.325-5.033-3.503-8.11-3.503C9.902 4.837 4.901 9.847 4.899 16c.001 6.152 5.003 11.158 11.15 11.16 4.276 0 9.369-2.227 10.836-8.478l.028-.122h-3.23l-.022.068c-1.078 3.242-4.138 5.421-7.613 5.421a8 8 0 0 1-5.691-2.359A7.993 7.993 0 0 1 8 16.001c0-4.438 3.611-8.049 8.05-8.049 2.069 0 3.638.58 5.924 2.573l-3.792 3.789H27.1z"/></svg>
-                </div>
             </div>
             <div class="range-form">
                 <time>0:00</time>

From ce3f1f4ebc2ebfb923660a5cc681331ef7a00b32 Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Sun, 24 Mar 2024 10:28:51 +0100
Subject: [PATCH 08/11] finished the control panel

---
 css/style.css | 52 +++++++++++++++++++++++++++++++--------------------
 index.html    |  8 +++++---
 2 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/css/style.css b/css/style.css
index 605d6f95..217e1903 100644
--- a/css/style.css
+++ b/css/style.css
@@ -228,7 +228,7 @@ footer {
   left: 0;
   bottom: 0;
   display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
+  grid-template-columns: .6fr 2fr .6fr;
   background-color: #282828;
 }
 
@@ -254,23 +254,10 @@ footer {
   fill: white;
 }
 
-.play-tools {
-  background-color: antiquewhite;
-}
-
-.sound-volume {
-  background-color: blueviolet;
-}
-.small-left-sidebar {
-  grid-area: left-side-bar;
-  background-color: blueviolet;
-  width: .5fr;
-}
-
 .control-panel {
-  padding: 10px 5px 20px 5px;
+  padding: 10px 5px 10px 5px;
   display: grid;
-  grid-template-rows: 50px 50px;
+  grid-template-rows: 30px 30px;
   border: 5px solid red;
 }
 .contorl-buttons {
@@ -287,20 +274,40 @@ footer {
   transform: rotate(180deg);
 }
 #play-icon {
-  height: 35px;
-  width: 35px;
+  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;
-  width: 70%;
 }
 #music-range {
-  max-width: 500px;
   width: 100%;
 }
 
+.sound-volume {
+  background-color: blueviolet;
+}
+.small-left-sidebar {
+  grid-area: left-side-bar;
+  background-color: blueviolet;
+  width: .5fr;
+}
 
 @media screen and (max-width:668px) {
   .left-side-bar {
@@ -327,6 +334,11 @@ footer {
     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:668px ) {
diff --git a/index.html b/index.html
index cea94b8c..f37b10e4 100644
--- a/index.html
+++ b/index.html
@@ -281,9 +281,11 @@ <h5>
                     <svg fill="#000000" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M27.1 14.313V5.396L24.158 8.34c-2.33-2.325-5.033-3.503-8.11-3.503C9.902 4.837 4.901 9.847 4.899 16c.001 6.152 5.003 11.158 11.15 11.16 4.276 0 9.369-2.227 10.836-8.478l.028-.122h-3.23l-.022.068c-1.078 3.242-4.138 5.421-7.613 5.421a8 8 0 0 1-5.691-2.359A7.993 7.993 0 0 1 8 16.001c0-4.438 3.611-8.049 8.05-8.049 2.069 0 3.638.58 5.924 2.573l-3.792 3.789H27.1z"/></svg>
             </div>
             <div class="range-form">
-                <time>0:00</time>
-                <input type="range" id="music-range"  >
-                <time>3:03</time>
+                <div class="range-area">
+                    <time>0:00</time>
+                    <input type="range" id="music-range"  >
+                    <time>3:03</time>
+                </div>
             </div>
         </section>
         <section class="sound-volume">

From ce1bf09890b1dd868ee4c8be01f693e588326c7c Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Mon, 25 Mar 2024 14:56:57 +0100
Subject: [PATCH 09/11] added the volume

---
 assets/img/desktop.svg |   5 ++
 assets/img/menu.svg    | 102 +++++++++++++++++++++++++++++++++++++++++
 assets/img/speaker.svg |   2 +
 css/style.css          |  25 +++++-----
 index.html             |  12 +++++
 5 files changed, 133 insertions(+), 13 deletions(-)
 create mode 100644 assets/img/desktop.svg
 create mode 100644 assets/img/menu.svg
 create mode 100644 assets/img/speaker.svg

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 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" id="Layer_1" data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path class="cls-1" d="M13,3H2v8H7v1H5v1h6V12H9V11h5V3Zm0,7H3V4H13Z"/>
+</svg>
\ 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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg 
+   viewBox="0 0 600 600"
+   version="1.1"
+   id="svg9724"
+   sodipodi:docname="menu.svg"
+   inkscape:version="1.2.2 (1:1.2.2+202212051550+b0a8486541)"
+   width="600"
+   height="600"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs9728" />
+  <sodipodi:namedview
+     id="namedview9726"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="true"
+     inkscape:zoom="0.59480855"
+     inkscape:cx="-49.59579"
+     inkscape:cy="515.29185"
+     inkscape:window-width="1920"
+     inkscape:window-height="1009"
+     inkscape:window-x="0"
+     inkscape:window-y="1080"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g10449"
+     showguides="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid9972"
+       originx="0"
+       originy="0" />
+    <sodipodi:guide
+       position="-260,300"
+       orientation="0,-1"
+       id="guide383"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="300,520"
+       orientation="1,0"
+       id="guide385"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="240,520"
+       orientation="0,-1"
+       id="guide939"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="220,80"
+       orientation="0,-1"
+       id="guide941"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  
+  <g
+     id="g10449"
+     transform="matrix(0.95173205,0,0,0.95115787,13.901174,12.168794)"
+     style="stroke-width:1.05103">
+    <g
+       id="path10026"
+       inkscape:transform-center-x="-0.59233046"
+       inkscape:transform-center-y="-20.347403"
+       transform="matrix(1.3807551,0,0,1.2700888,273.60014,263.99768)" />
+    <g
+       id="g11314"
+       transform="matrix(1.5092301,0,0,1.3955555,36.774048,-9.4503933)"
+       style="stroke-width:50.6951" />
+    <path
+       style="color:#000000;fill:#000000;stroke-width:1.05104;stroke-linecap:square;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
+       d="m 116.82051,533.90848 c 0,-35.77923 -30.001428,-65.78273 -65.71225,-65.78274 -35.710867,10e-6 -65.714445,30.00351 -65.714445,65.78274 0,35.7791 30.003578,65.78265 65.714445,65.78265 35.710822,0 65.71225,-30.00355 65.71225,-65.78265 z"
+       id="path1237" />
+    <path
+       style="color:#000000;fill:#000000;stroke-width:1.05104;stroke-linecap:square;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
+       d="m 116.82051,302.6125 c 0,-35.77918 -30.001428,-65.78266 -65.71225,-65.78267 -35.710867,1e-5 -65.714445,30.00349 -65.714445,65.78267 2.6e-5,35.77922 30.003597,65.78043 65.714445,65.78045 35.710806,-2e-5 65.71224,-30.00123 65.71225,-65.78045 z"
+       id="path1235" />
+    <path
+       style="color:#000000;fill:#000000;stroke-width:1.05104;stroke-linecap:square;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
+       d="m 116.82051,71.313209 c 0,-35.779199 -30.001428,-65.7804582 -65.71225,-65.7804662 -35.710867,8e-6 -65.714445,30.0012672 -65.714445,65.7804662 0,35.779271 30.003578,65.782741 65.714445,65.782751 35.710822,-1e-5 65.71225,-30.00348 65.71225,-65.782751 z"
+       id="path346" />
+    <path
+       style="color:#000000;fill:#000000;stroke-width:1.05103;stroke-linecap:round;-inkscape-stroke:none"
+       d="m 211.58808,21.527961 a 47.572886,49.785578 0 0 0 -47.57256,49.787552 47.572886,49.785578 0 0 0 47.57256,49.785227 H 568.24859 A 47.572886,49.785578 0 0 0 615.82336,71.315513 47.572886,49.785578 0 0 0 568.24859,21.527961 Z"
+       id="path1011" />
+    <path
+       style="color:#000000;fill:#000000;stroke-width:1.05103;stroke-linecap:round;-inkscape-stroke:none"
+       d="m 211.58808,252.82616 a 47.572886,49.785578 0 0 0 -47.57256,49.78524 47.572886,49.785578 0 0 0 47.57256,49.78523 h 356.66051 a 47.572886,49.785578 0 0 0 47.57477,-49.78523 47.572886,49.785578 0 0 0 -47.57477,-49.78524 z"
+       id="path1011-7" />
+    <path
+       style="color:#000000;fill:#000000;stroke-width:1.05103;stroke-linecap:round;-inkscape-stroke:none"
+       d="m 211.58808,484.1232 a 47.572886,49.785578 0 0 0 -47.57256,49.78523 47.572886,49.785578 0 0 0 47.57256,49.78524 h 356.66051 a 47.572886,49.785578 0 0 0 47.57477,-49.78524 47.572886,49.785578 0 0 0 -47.57477,-49.78523 z"
+       id="path1011-5" />
+  </g>
+</svg>
\ 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 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="M 47.9372 49.3836 C 48.6739 49.8813 49.6496 49.6822 50.2269 48.8660 C 53.8697 43.6502 56 36.9414 56 29.8344 C 56 22.7274 53.8498 15.9987 50.2269 10.7829 C 49.6496 9.9667 48.6739 9.7676 47.9372 10.2852 C 47.1809 10.8028 47.0614 11.7982 47.6388 12.6343 C 50.8437 17.3524 52.8346 23.4043 52.8346 29.8344 C 52.8346 36.2645 50.9037 42.3961 47.6388 47.0345 C 47.0614 47.8507 47.1809 48.8461 47.9372 49.3836 Z M 22.7145 48.0100 C 24.0682 48.0100 25.0437 47.0146 25.0437 45.6808 L 25.0437 13.9283 C 25.0437 12.5945 24.0682 11.4797 22.6747 11.4797 C 21.6992 11.4797 21.0621 11.9575 19.9871 12.9130 L 10.6306 21.2144 C 10.5112 21.3339 10.3320 21.3936 10.1329 21.3936 L 4.2204 21.3936 C 1.3935 21.3936 0 22.8071 0 25.8131 L 0 33.7363 C 0 36.7423 1.3935 38.1558 4.2204 38.1558 L 10.1329 38.1558 C 10.3320 38.1558 10.5112 38.2155 10.6306 38.3349 L 19.9871 46.7160 C 20.9626 47.5919 21.7390 48.0100 22.7145 48.0100 Z M 39.9148 43.9489 C 40.6910 44.4664 41.6467 44.2674 42.2040 43.4711 C 44.8317 39.8081 46.3647 34.9307 46.3647 29.8344 C 46.3647 24.7182 44.8517 19.8408 42.2040 16.1778 C 41.6267 15.4014 40.6910 15.2024 39.9148 15.7200 C 39.1581 16.2376 39.0386 17.2130 39.6359 18.0691 C 41.8057 21.2543 43.1597 25.4349 43.1597 29.8344 C 43.1597 34.2340 41.8457 38.4544 39.6359 41.5998 C 39.0586 42.4558 39.1581 43.4313 39.9148 43.9489 Z M 21.5598 43.8095 C 21.4603 43.8095 21.3409 43.7498 21.2214 43.6303 L 12.4024 35.6872 C 11.9246 35.2493 11.5265 35.1497 10.9889 35.1497 L 4.3597 35.1497 C 3.5833 35.1497 3.2051 34.7914 3.2051 33.9951 L 3.2051 25.5543 C 3.2051 24.7779 3.5833 24.3996 4.3597 24.3996 L 10.9889 24.3996 C 11.5265 24.3996 11.9047 24.3200 12.4024 23.8622 L 21.2214 15.8593 C 21.3210 15.7797 21.4404 15.7000 21.5598 15.7000 C 21.7390 15.7000 21.8385 15.8195 21.8385 15.9788 L 21.8385 43.5109 C 21.8385 43.6901 21.7390 43.8095 21.5598 43.8095 Z M 31.9715 38.5738 C 32.6483 39.0516 33.6238 38.8923 34.2011 38.1159 C 35.7537 36.0257 36.6894 32.9599 36.6894 29.8344 C 36.6894 26.7089 35.7341 23.6631 34.2011 21.5330 C 33.6238 20.7566 32.6682 20.5973 31.9715 21.0751 C 31.0956 21.6524 30.9960 22.6677 31.6331 23.5436 C 32.7877 25.0964 33.4845 27.4654 33.4845 29.8344 C 33.4845 32.2034 32.7479 34.5724 31.6131 36.1451 C 31.0159 37.0011 31.1154 37.9766 31.9715 38.5738 Z"/></svg>
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 217e1903..37a9c24d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -228,10 +228,16 @@ footer {
   left: 0;
   bottom: 0;
   display: grid;
-  grid-template-columns: .6fr 2fr .6fr;
+  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;
@@ -248,17 +254,10 @@ footer {
   width: 50px;
 }
 
-.singer-name svg {
-  height: 20px;
-  width: 20px;
-  fill: white;
-}
-
 .control-panel {
   padding: 10px 5px 10px 5px;
   display: grid;
   grid-template-rows: 30px 30px;
-  border: 5px solid red;
 }
 .contorl-buttons {
   margin: auto;
@@ -266,8 +265,6 @@ footer {
 .contorl-buttons svg {
   height: 25px;
   width: 25px;
-  background-color: #282828;
-  fill: white;
 }
 
 #back-icon {
@@ -301,15 +298,17 @@ footer {
 }
 
 .sound-volume {
-  background-color: blueviolet;
+  padding: 30px 1px 20px 1px;
+
 }
+
 .small-left-sidebar {
   grid-area: left-side-bar;
   background-color: blueviolet;
   width: .5fr;
 }
 
-@media screen and (max-width:668px) {
+@media screen and (max-width:600px) {
   .left-side-bar {
     display: none;
   }
@@ -341,7 +340,7 @@ footer {
   }
 }
 
-@media screen and (min-width:668px ) {
+@media screen and (min-width:600px ) {
   .small-left-sidebar {
     display: none;
   }
diff --git a/index.html b/index.html
index f37b10e4..d26c2fec 100644
--- a/index.html
+++ b/index.html
@@ -289,7 +289,19 @@ <h5>
             </div>
         </section>
         <section class="sound-volume">
+            
+            <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 Z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 Z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 Z"/>
+            </svg>
 
+            <svg fill="#000000" height="800px" width="800px" id="Layer_1" data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path class="cls-1" d="M13,3H2v8H7v1H5v1h6V12H9V11h5V3Zm0,7H3V4H13Z"/>
+            </svg>
+
+            <svg fill="#000000" width="800px" height="800px" viewBox="0 0 56 56" xmlns="http://www.w3.org/2000/svg"><path d="M 47.9372 49.3836 C 48.6739 49.8813 49.6496 49.6822 50.2269 48.8660 C 53.8697 43.6502 56 36.9414 56 29.8344 C 56 22.7274 53.8498 15.9987 50.2269 10.7829 C 49.6496 9.9667 48.6739 9.7676 47.9372 10.2852 C 47.1809 10.8028 47.0614 11.7982 47.6388 12.6343 C 50.8437 17.3524 52.8346 23.4043 52.8346 29.8344 C 52.8346 36.2645 50.9037 42.3961 47.6388 47.0345 C 47.0614 47.8507 47.1809 48.8461 47.9372 49.3836 Z M 22.7145 48.0100 C 24.0682 48.0100 25.0437 47.0146 25.0437 45.6808 L 25.0437 13.9283 C 25.0437 12.5945 24.0682 11.4797 22.6747 11.4797 C 21.6992 11.4797 21.0621 11.9575 19.9871 12.9130 L 10.6306 21.2144 C 10.5112 21.3339 10.3320 21.3936 10.1329 21.3936 L 4.2204 21.3936 C 1.3935 21.3936 0 22.8071 0 25.8131 L 0 33.7363 C 0 36.7423 1.3935 38.1558 4.2204 38.1558 L 10.1329 38.1558 C 10.3320 38.1558 10.5112 38.2155 10.6306 38.3349 L 19.9871 46.7160 C 20.9626 47.5919 21.7390 48.0100 22.7145 48.0100 Z M 39.9148 43.9489 C 40.6910 44.4664 41.6467 44.2674 42.2040 43.4711 C 44.8317 39.8081 46.3647 34.9307 46.3647 29.8344 C 46.3647 24.7182 44.8517 19.8408 42.2040 16.1778 C 41.6267 15.4014 40.6910 15.2024 39.9148 15.7200 C 39.1581 16.2376 39.0386 17.2130 39.6359 18.0691 C 41.8057 21.2543 43.1597 25.4349 43.1597 29.8344 C 43.1597 34.2340 41.8457 38.4544 39.6359 41.5998 C 39.0586 42.4558 39.1581 43.4313 39.9148 43.9489 Z M 21.5598 43.8095 C 21.4603 43.8095 21.3409 43.7498 21.2214 43.6303 L 12.4024 35.6872 C 11.9246 35.2493 11.5265 35.1497 10.9889 35.1497 L 4.3597 35.1497 C 3.5833 35.1497 3.2051 34.7914 3.2051 33.9951 L 3.2051 25.5543 C 3.2051 24.7779 3.5833 24.3996 4.3597 24.3996 L 10.9889 24.3996 C 11.5265 24.3996 11.9047 24.3200 12.4024 23.8622 L 21.2214 15.8593 C 21.3210 15.7797 21.4404 15.7000 21.5598 15.7000 C 21.7390 15.7000 21.8385 15.8195 21.8385 15.9788 L 21.8385 43.5109 C 21.8385 43.6901 21.7390 43.8095 21.5598 43.8095 Z M 31.9715 38.5738 C 32.6483 39.0516 33.6238 38.8923 34.2011 38.1159 C 35.7537 36.0257 36.6894 32.9599 36.6894 29.8344 C 36.6894 26.7089 35.7341 23.6631 34.2011 21.5330 C 33.6238 20.7566 32.6682 20.5973 31.9715 21.0751 C 31.0956 21.6524 30.9960 22.6677 31.6331 23.5436 C 32.7877 25.0964 33.4845 27.4654 33.4845 29.8344 C 33.4845 32.2034 32.7479 34.5724 31.6131 36.1451 C 31.0159 37.0011 31.1154 37.9766 31.9715 38.5738 Z"/>
+            </svg>
+
+            <input type="range" name="" id="volume-range">
         </section>
     </footer>
 </body>

From 5e64f84f16822f883fc7aa144cb7d23eeb4ac931 Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Mon, 25 Mar 2024 15:11:47 +0100
Subject: [PATCH 10/11] fixed posistion of premiume upgrade button

---
 css/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 37a9c24d..b121834c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -25,7 +25,7 @@ header {
 }
 header button {
   color: white;
-  position: fixed;
+  position: absolute;
   right: 5px;
   top: 30px;
   height: 30px;

From d13833785b034073d1678f0916a62d9a5735c360 Mon Sep 17 00:00:00 2001
From: Farshad <f.bagdeli13@gmail.com>
Date: Mon, 25 Mar 2024 15:27:39 +0100
Subject: [PATCH 11/11] fixed the hidden green side color

---
 css/style.css | 10 ++++++++--
 index.html    |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index b121834c..465b2bcc 100644
--- a/css/style.css
+++ b/css/style.css
@@ -60,12 +60,18 @@ header button {
   align-items: center;
 }
 
-.hidden-side-color {
+.hidden-side-color{
   width: 2px ;
-  background-color: green;
   height: 100%;
 }
 
+.big-home-side :hover {
+  .hidden-side-color {
+    background-color: green;
+  }
+}
+
+
 .item-side-logo {
   display: inline-grid;
   height: 30px;
diff --git a/index.html b/index.html
index d26c2fec..237642d3 100644
--- a/index.html
+++ b/index.html
@@ -141,7 +141,7 @@ <h4>
         </section>
         <section class="big-home-side">
             <div class="big-home-items">
-                <div class="hidden-side-color">
+                <div class="hidden-side-color" id="hidden">
                 </div>
                 <div class="item-side-logo">
                     <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M448 463.746h-149.333v-149.333h-85.334v149.333h-149.333v-315.428l192-111.746 192 110.984v316.19z" fill="#ffffff"/></svg>