From 5afbe99c8cc5b27d0a935b9b1f0581935094d233 Mon Sep 17 00:00:00 2001 From: "LAPTOP-LJ9LM6JH\\franc" Date: Sun, 14 Feb 2021 11:19:32 +0100 Subject: [PATCH] classement --- SwichGIT/src/css/PageDaccueil.css | 5 - SwichGIT/src/css/desktops.css | 145 +++++++++++++++++++++++++++++ SwichGIT/src/css/tablet.css | 150 ++++++++++++++++++++++++++++++ SwichGIT/src/index.html | 78 +++++++++++++++- 4 files changed, 371 insertions(+), 7 deletions(-) diff --git a/SwichGIT/src/css/PageDaccueil.css b/SwichGIT/src/css/PageDaccueil.css index 13688e8..dbe8edf 100644 --- a/SwichGIT/src/css/PageDaccueil.css +++ b/SwichGIT/src/css/PageDaccueil.css @@ -119,11 +119,6 @@ width: 2vw; } -#infosec2{ - z-index:15; - width: 2vw; -} - #info { color: var(--lightprima); text-decoration: none; diff --git a/SwichGIT/src/css/desktops.css b/SwichGIT/src/css/desktops.css index 690d9b0..d2289f8 100644 --- a/SwichGIT/src/css/desktops.css +++ b/SwichGIT/src/css/desktops.css @@ -306,4 +306,149 @@ text-align: center; width: inherit; } + + #containBottom{ + position: absolute; + bottom: 3vh; + width: auto; + left: 50%; + z-index: 20; + height: auto; + } + + #containScore { + display: grid; + grid-template-columns: repeat(10, 100px); + grid-template-rows: repeat(1, 100px); + grid-gap: 1vw; + justify-content: center; + position: relative; + left: -50%; + + } + + .titreScore{ + font: 700 5vh "Poppins", sans-serif; + color: #2B2D2F; + position: relative; + left: -50%; + text-align: center; + } + + .case-score{ + padding: 4px; + position: relative; + z-index: 1; + width: 7vw; + height: 17vh; + cursor: default; + transition: all 0.3s ease; + } + + .case-score .score-description { + background-color: #B7B7B7; + padding: 10px 15px; + width: calc(100% - 30px); + height: calc(100% - 20px); + transition: inherit; + } + + .case-score .score-position { + font: 700 34px/1.3 "Poppins", sans-serif; + margin: 0 0 0; + transition: 0.2s ease 150ms; + } + .case-score .score-pseudo, .score-points { + font: 500 12px "Poppins", sans-serif; + margin-top: -0.2em; + } + + .case-score:after { + z-index: 10; + background: #f9f8f7; + color: #333; + width: 180px; + position: absolute; + top: 80%; + opacity: 0; + transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; + height: auto; + font-size: 12px; + line-height: 1.4; + padding: 10px; + margin: 0 0 0 -50px; + border-radius: 6px; + text-align: center; + } + .case-score:hover { + transform: scale(1.12); + z-index: 10; + } + + .case-score:hover .score-description { + background: transparent; + } + .case-score:hover .score-position, + .case-score:hover .score-pseudo, + .case-score:hover .score-points { + -webkit-text-fill-color: #222; + } + .case-score:hover:after { + top: 105%; + opacity: 1; + } + + .first { + background: linear-gradient(to bottom right, #f3f9a6 0%, #cbc634 100%); + } + .first .score-position, + .first .score-pseudo, + .first .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .second { + background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%); + } + + .second .score-position, + .second .score-pseudo, + .second .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .third { + background: linear-gradient(to bottom right, #ff616d 0%, #ffc171 100%); + } + + .third .score-position, + .third .score-pseudo, + .third .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .nopodium { + background: linear-gradient(to bottom right, #2c3e50 0%, #B7B7B7 90%); + } + + .nopodium .score-position, + .nopodium .score-pseudo, + .nopodium .score-points { + background: -webkit-linear-gradient(#3A3B3C, #3A3B3C ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + #infosec2{ + z-index:15; + width: 2vw; + position: relative; + left: 2vw; + } } diff --git a/SwichGIT/src/css/tablet.css b/SwichGIT/src/css/tablet.css index 7bb5fe0..75e60be 100644 --- a/SwichGIT/src/css/tablet.css +++ b/SwichGIT/src/css/tablet.css @@ -299,4 +299,154 @@ background-color: var(--lighttercia); } + #containBottom{ + position: absolute; + bottom: 0vh; + width: auto; + left: 50%; + z-index: 20; + height: auto; + } + + #containScore { + display: grid; + grid-template-columns: repeat(5, 100px); + grid-template-rows: repeat(2, 90px); + justify-content: center; + position: relative; + left: -50%; + + } + + .titreScore{ + font: 700 5vh "Poppins", sans-serif; + color: #2B2D2F; + position: relative; + left: -50%; + text-align: center; + } + + .case-score{ + padding: 4px; + position: relative; + z-index: 1; + width: 10vw; + height: 12vh; + cursor: default; + transition: all 0.3s ease; + } + + .case-score .score-description { + background-color: #B7B7B7; + padding: 10px 15px; + width: calc(100% - 30px); + height: calc(100% - 20px); + transition: inherit; + } + + .case-score .score-position { + font: 700 3vw "Poppins", sans-serif; + margin-left: -1vw; + transition: 0.2s ease 150ms; + } + .case-score .score-pseudo, .score-points { + font: 500 12px "Poppins", sans-serif; + margin-top: -0.2em; + margin-left: -1vw; + } + + .case-score:after { + z-index: 10; + background: #f9f8f7; + color: #333; + width: 180px; + position: absolute; + top: 80%; + opacity: 0; + transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s; + height: auto; + font-size: 12px; + line-height: 1.4; + padding: 10px; + margin: 0 0 0 -50px; + border-radius: 6px; + text-align: center; + } + .case-score:hover { + transform: scale(1.12); + z-index: 10; + } + + .case-score:hover .score-description { + background: transparent; + } + .case-score:hover .score-position, + .case-score:hover .score-pseudo, + .case-score:hover .score-points { + -webkit-text-fill-color: #222; + } + .case-score:hover:after { + top: 105%; + opacity: 1; + } + + .first { + background: linear-gradient(to bottom right, #f3f9a6 0%, #cbc634 100%); + } + .first .score-position, + .first .score-pseudo, + .first .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .second { + background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%); + } + + .second .score-position, + .second .score-pseudo, + .second .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .third { + background: linear-gradient(to bottom right, #ff616d 0%, #ffc171 100%); + } + + .third .score-position, + .third .score-pseudo, + .third .score-points { + background: -webkit-linear-gradient(#2B2D2F, #2B2D2F); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .nopodium { + background: linear-gradient(to bottom right, #2c3e50 0%, #B7B7B7 90%); + } + + .nopodium .score-position, + .nopodium .score-pseudo, + .nopodium .score-points { + background: -webkit-linear-gradient(#3A3B3C, #3A3B3C ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } + + .content{ + margin-top: -5vw; + } + + #infosec2{ + position: relative; + z-index:15; + width: 2vw; + left: 5vw; + } + + } diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index 8c32fb5..f84ac21 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -627,8 +627,82 @@ -
- +
+ +

Classement - solo

+
+ +
+
+
1er
+
palafour
+
696 pts
+
+
+
+
+
2e
+
cyril
+
600 pts
+
+
+
+
+
3e
+
mamore
+
500 pts
+
+
+
+
+
4e
+
yannis
+
430 pts
+
+
+
+
+
5e
+
theo
+
340 pts
+
+
+
+
+
6e
+
alexandre
+
295 pts
+
+
+
+
+
7e
+
borto
+
210 pts
+
+
+
+
+
8e
+
+
+
+
+
+
+
9e
+
+
+
+
+
+
+
10e
+
+
+
+
+