finished the control panel

Author: Farshad

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 ) {

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">