added root to the style and updated readme files

Author: ecemgo

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "liveServer.settings.port": 5503
+  "liveServer.settings.port": 5504
 }

README.md

@@ -21,19 +21,19 @@ This repository includes some great tricks with mini samples.
 
 ### Slider
 
-|  #  | Samples                                                                                                                                |
-| :-: | :------------------------------------------------------------------------------------------------------------------------------------- |
-| 01  | [Testimonial Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/testimonial-slider-v1)                              |
-| 02  | [Card Effect](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/card-effect)                                               |
-| 03  | [Neumorphic Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/neumorphic-slider)                                   |
-| 04  | [Responsive Slider with Scrollbar](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/responsive-slider-with-scrollbar)     |
-| 05  | [Background Slider with The Hero](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/background-slider-with-the-hero)       |
-| 06  | [Slider with Two Different Sidebars](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/slider-with-two-different-sidebars) |
-| 07  | [Animated Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/animated-slider)                                       |
-| 08  | [Animated Slider II](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/animated-slider-2)                                  |
-| 09  | [Cube Effect Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/cube-effect-slider)                                 |
-| 10  | [Music Player with Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/music-player-with-slider)                     |
-| 11  | [Vertical Slider with Clip-Path Animation](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/vertical-slider-with-clip-path-animation)                     |
+|  #  | Samples                                                                                                                                            |
+| :-: | :------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 01  | [Responsive Slider with Vanilla Javascript](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/testimonial-slider-v1)                   |
+| 02  | [Card Effect](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/card-effect)                                                           |
+| 03  | [Neumorphic Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/neumorphic-slider)                                               |
+| 04  | [Responsive Slider with Scrollbar](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/responsive-slider-with-scrollbar)                 |
+| 05  | [Background Slider with The Hero](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/background-slider-with-the-hero)                   |
+| 06  | [Slider with Two Different Sidebars](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/slider-with-two-different-sidebars)             |
+| 07  | [Animated Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/animated-slider)                                                   |
+| 08  | [Animated Slider II](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/animated-slider-2)                                              |
+| 09  | [Cube Effect Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/cube-effect-slider)                                             |
+| 10  | [Music Player with Slider](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/music-player-with-slider)                                 |
+| 11  | [Vertical Slider with Clip-Path Animation](https://github.com/ecemgo/mini-samples-great-tricks/tree/main/vertical-slider-with-clip-path-animation) |
 
 <br>
 

testimonial-slider-v1/README.md

@@ -1,4 +1,4 @@
-## <img src="https://user-images.githubusercontent.com/13468728/233831804-0f5c7ee5-d654-4c13-9c77-a5bd6dc4fe74.jpg" title="great tricks" alt="great tricks" width="50" height="50"/> Testimonial Slider
+## <img src="https://user-images.githubusercontent.com/13468728/233831804-0f5c7ee5-d654-4c13-9c77-a5bd6dc4fe74.jpg" title="great tricks" alt="great tricks" width="50" height="50"/> Responsive Slider with Vanilla Javascript
 
 #### Tools used in this solution:
 
@@ -13,7 +13,7 @@
 ### Screenshot
 
 <div align="left">
-<img src="https://github.com/ecemgo/frontend-mentor-challenges/assets/13468728/1b7be84d-47db-4946-afac-154a431bdab5" title="testimonial slider" alt="testimonial slider" width="750" height="500"/>
+<img src="https://github.com/ecemgo/frontend-mentor-challenges/assets/13468728/1b7be84d-47db-4946-afac-154a431bdab5" title="responsive slider" alt="responsive slider" width="750" height="500"/>
 </div>
 
 ### Inspiration

testimonial-slider-v1/index.html

@@ -5,12 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap"
-      rel="stylesheet" />
-    <title>Testimonial Slider</title>
+    <title>Responsive Slider with Vanilla Javascript</title>
   </head>
   <body>
     <main>

testimonial-slider-v1/style.css

@@ -1,5 +1,9 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap");
 
+:root {
+  --x: 800px;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -34,7 +38,7 @@ body {
 }
 
 main {
-  width: 800px;
+  width: var(--x);
 }
 
 main h1 {
@@ -46,13 +50,13 @@ main h1 {
 
 .slide-row {
   display: flex;
-  width: 3200px;
+  width: calc(4 * var(--x));
   transition: 0.5s;
 }
 
 .slide-col {
   position: relative;
-  width: 800px;
+  width: var(--x);
   height: 400px;
 }
 
@@ -130,16 +134,11 @@ main h1 {
 }
 
 @media (max-width: 850px) {
-  main {
-    width: 500px;
-  }
-
-  .slide-row {
-    width: 2000px;
+  :root {
+    --x: 500px;
   }
 
   .slide-col {
-    width: 500px;
     height: 250px;
   }
 
@@ -164,12 +163,8 @@ main h1 {
 }
 
 @media (max-width: 550px) {
-  main {
-    width: 300px;
-  }
-
-  .slide-row {
-    width: 1200px;
+  :root {
+    --x: 300px;
   }
 
   .slide-col {