save progres

Author: Farshad

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%;
 }
 
 

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>