From 96f27c4dc0277a252323b60818829ade1efe4474 Mon Sep 17 00:00:00 2001 From: Arthur Thouin Date: Sun, 5 Dec 2021 04:01:18 +0100 Subject: [PATCH] m --- src/components/HomePage/HomePage.css | 4 -- .../MostPlayedChampions.css | 57 +++++++++++++++++- .../MostPlayedChampions.tsx | 23 ++++++- src/components/PageStats/PageStats.css | 2 +- src/components/assets/images/MaskGroup.svg | 14 +++++ src/components/assets/images/image26.png | Bin 0 -> 9554 bytes src/index.css | 1 + 7 files changed, 92 insertions(+), 9 deletions(-) create mode 100644 src/components/assets/images/MaskGroup.svg create mode 100644 src/components/assets/images/image26.png 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 0000000000000000000000000000000000000000..5f99f6d86c72aa618c038f932a6078664ad935fd GIT binary patch literal 9554 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 literal 0 HcmV?d00001 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 {