diff --git a/src/components/HomePage/HomePage.css b/src/components/HomePage/HomePage.css index 7717882..6283fcf 100644 --- a/src/components/HomePage/HomePage.css +++ b/src/components/HomePage/HomePage.css @@ -1,7 +1,3 @@ -body -{ - overflow: hidden; -} .background-image { z-index: -1; diff --git a/src/components/PageStats/MostPlayedChampions/MostPlayedChampions.css b/src/components/PageStats/MostPlayedChampions/MostPlayedChampions.css index e2523db..2373212 100644 --- a/src/components/PageStats/MostPlayedChampions/MostPlayedChampions.css +++ b/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 +{ + } \ No newline at end of file diff --git a/src/components/PageStats/MostPlayedChampions/MostPlayedChampions.tsx b/src/components/PageStats/MostPlayedChampions/MostPlayedChampions.tsx index c3c3c34..7dcaed1 100644 --- a/src/components/PageStats/MostPlayedChampions/MostPlayedChampions.tsx +++ b/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 ( -
- MOST PLAYED CHAMPIONS +
+
+ Most played champions +
+
+
+
+ + Aatrox + +
+ + 38 220 +
+
+
+
) } diff --git a/src/components/PageStats/PageStats.css b/src/components/PageStats/PageStats.css index 4d12c05..4091111 100644 --- a/src/components/PageStats/PageStats.css +++ b/src/components/PageStats/PageStats.css @@ -13,7 +13,7 @@ .user { - margin-top: 20vh; + margin-top: 17vh; color: #ffffff; width: 45vw; } diff --git a/src/components/assets/images/MaskGroup.svg b/src/components/assets/images/MaskGroup.svg new file mode 100644 index 0000000..2860d2f --- /dev/null +++ b/src/components/assets/images/MaskGroup.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/components/assets/images/image26.png b/src/components/assets/images/image26.png new file mode 100644 index 0000000..5f99f6d Binary files /dev/null and b/src/components/assets/images/image26.png differ diff --git a/src/index.css b/src/index.css index ec2585e..361a321 100644 --- a/src/index.css +++ b/src/index.css @@ -5,6 +5,7 @@ body { sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; } code {