m

src/components/HomePage/HomePage.css

@@ -1,7 +1,3 @@
-body
-{
-    overflow: hidden;
-}
 .background-image
 {
     z-index: -1;

src/components/PageStats/MostPlayedChampions/MostPlayedChampions.css

@@ -1,4 +1,57 @@
-.titleMostPlayed
+
+.mostPlayedChampions
 {
-
+    margin-top: 26px;
+    margin-left: 30px;
+}
+
+.boxTitle
+{
+    text-transform: uppercase;
+}
+
+.boxMostPlayedChampions
+{
+    width: 550px;
+    height: 322px;
+}
+
+.imgContainerMostPlayed
+{
+    display: flex;
+    width: 420px;
+    margin: 0 auto;
+    background-color: red;
+}
+.aatrox
+{
+    width: 85px;
+}
+
+.imgLeftPlayedChampion
+{
+    display: flex;
+    flex-direction: column;
+}
+
+.imgLeftPlayedChampion > span
+{
+    display: flex;
+    margin: 0 auto;
+    color: #ffffff;
+    font-size: 14px;
+    margin-top: 15px;
+}
+
+.textLeftMostPlayed span
+{
+    display: flex;
+    justify-content: center;
+    font-size: 10px;
+    color: #838384;
+}
+
+.imgNumberOfTrophies
+{
+
 }

src/components/PageStats/MostPlayedChampions/MostPlayedChampions.tsx

@@ -1,10 +1,29 @@
 import React from 'react'
 import './MostPlayedChampions.css'
+import Aatrox from '../../assets/images/Aatrox.png';
+import image26 from '../../assets/images/image26.png';
+import MaskGroup from '../../assets/images/MaskGroup.svg';
+
 
 function MostPlayedChampions() {
     return (
-        <div className="boxTitle titleMostPlayed">
-            MOST PLAYED CHAMPIONS
+        <div className="mostPlayedChampions">
+            <div className="boxTitle titleMostPlayed">
+                Most played champions
+            </div>
+            <div className="box boxMostPlayedChampions">
+                <div className="imgContainerMostPlayed">
+                    <div className="imgLeftPlayedChampion">
+                        <img src={Aatrox} className="aatrox"/>
+                        <span>Aatrox</span>
+
+                            <div className="textLeftMostPlayed">
+                            <img src={MaskGroup}/>
+                            <img src={image26} className="imgNumberOfTrophies"/><span>38 220</span>
+                        </div>
+                     </div>
+                </div>
+            </div>
         </div>
     )
 }

src/components/PageStats/PageStats.css

@@ -13,7 +13,7 @@
 
 .user
 {
-    margin-top: 20vh;
+    margin-top: 17vh;
     color: #ffffff;
     width: 45vw;
 }

src/index.css

@@ -5,6 +5,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
 }
 
 code {