From af94eafc10f79d4b6567715579d2c5e1db3b842c Mon Sep 17 00:00:00 2001 From: Guillaume Date: Tue, 23 Jun 2026 17:02:59 +0200 Subject: [PATCH] theme ? --- mon-projet/src/App.css | 286 ++++++++++++++------------- mon-projet/src/App.jsx | 4 +- mon-projet/src/components/header.jsx | 24 ++- 3 files changed, 170 insertions(+), 144 deletions(-) diff --git a/mon-projet/src/App.css b/mon-projet/src/App.css index f90339d..c464e4f 100644 --- a/mon-projet/src/App.css +++ b/mon-projet/src/App.css @@ -1,184 +1,188 @@ +.body { + font-family: cursive; + background-color: black; +} .counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; + font-size: 16px; + padding: 5px 10px; + border-radius: 5px; + color: var(--accent); + background: var(--accent-bg); + border: 2px solid transparent; + transition: border-color 0.3s; + margin-bottom: 24px; - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } + &:hover { + border-color: var(--accent-border); + } + &:focus-visible { + outline: 2px solid var(--accent); + outline-offset: 2px; + } } .hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; position: relative; - z-index: 0; - } - .framework, - .vite { - position: absolute; - } + .base, + .framework, + .vite { + inset-inline: 0; + margin: 0 auto; + } - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } + .base { + width: 170px; + position: relative; + z-index: 0; + } - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } + .framework, + .vite { + position: absolute; + } + + .framework { + z-index: 1; + top: 34px; + height: 28px; + transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) + rotateY(39deg) scale(1.4); + } + + .vite { + z-index: 0; + top: 107px; + height: 26px; + width: auto; + transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) + rotateY(39deg) scale(0.8); + } } #center { - display: flex; - flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; + display: flex; + flex-direction: column; + gap: 25px; + place-content: center; + place-items: center; + flex-grow: 1; - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } + @media (max-width: 1024px) { + padding: 32px 20px 24px; + gap: 18px; + } } #next-steps { - display: flex; - border-top: 1px solid var(--border); - text-align: left; + display: flex; + border-top: 1px solid var(--border); + text-align: left; - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; + & > div { + flex: 1 1 0; + padding: 32px; + @media (max-width: 1024px) { + padding: 24px 20px; + } } - } - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } + .icon { + margin-bottom: 16px; + width: 22px; + height: 22px; + } - @media (max-width: 1024px) { - flex-direction: column; - text-align: center; - } + @media (max-width: 1024px) { + flex-direction: column; + text-align: center; + } } #docs { - border-right: 1px solid var(--border); + border-right: 1px solid var(--border); - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } + @media (max-width: 1024px) { + border-right: none; + border-bottom: 1px solid var(--border); + } } #next-steps ul { - list-style: none; - padding: 0; - display: flex; - gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } - - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); + list-style: none; + padding: 0; display: flex; - padding: 6px 12px; - align-items: center; gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; + margin: 32px 0 0; - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; - flex-wrap: wrap; - justify-content: center; - - li { - flex: 1 1 calc(50% - 8px); + .logo { + height: 18px; } a { - width: 100%; - justify-content: center; - box-sizing: border-box; + color: var(--text-h); + font-size: 16px; + border-radius: 6px; + background: var(--social-bg); + display: flex; + padding: 6px 12px; + align-items: center; + gap: 8px; + text-decoration: none; + transition: box-shadow 0.3s; + + &:hover { + box-shadow: var(--shadow); + } + .button-icon { + height: 18px; + width: 18px; + } + } + + @media (max-width: 1024px) { + margin-top: 20px; + flex-wrap: wrap; + justify-content: center; + + li { + flex: 1 1 calc(50% - 8px); + } + + a { + width: 100%; + justify-content: center; + box-sizing: border-box; + } } - } } #spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } + height: 88px; + border-top: 1px solid var(--border); + @media (max-width: 1024px) { + height: 48px; + } } .ticks { - position: relative; - width: 100%; + position: relative; + width: 100%; - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } + &::before, + &::after { + content: ""; + position: absolute; + top: -4.5px; + border: 5px solid transparent; + } - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } + &::before { + left: 0; + border-left-color: var(--border); + } + &::after { + right: 0; + border-right-color: var(--border); + } } diff --git a/mon-projet/src/App.jsx b/mon-projet/src/App.jsx index 116db15..5d02391 100644 --- a/mon-projet/src/App.jsx +++ b/mon-projet/src/App.jsx @@ -6,11 +6,11 @@ import Compteurs from "./components/Compteurs"; function App() { return ( -
+
- +
diff --git a/mon-projet/src/components/header.jsx b/mon-projet/src/components/header.jsx index 1f59431..8ccdf39 100644 --- a/mon-projet/src/components/header.jsx +++ b/mon-projet/src/components/header.jsx @@ -1,7 +1,29 @@ function Header() { return (
-

FleetZen

+

Les Trilogies les plus Connues de Geometry Dash

+

+ Geometry dash est un jeu fascinant. Même si c’est un jeu, en apparence, + très simple, il se complexifie très vite avec les différentes mécaniques + telles que les portails qui changent la gravité du cube, ceux qui + augmentent la vitesse, et les nombreuses transformations telles que le + ship ou la wave. Vous l’avez compris, ce jeu ne se résume pas à un + simple cube qui saute, et finir le plus dur des niveaux officiels, + deadlocked, n’est pas à la portée de tous les joueurs. Cependant, finir + deadlocked et tous les niveaux officiels n’est pas une fin en soi. En + effet, le vrai potentiel du jeu se trouve dans l’éditeur de niveau. Ce + dernier permet aux joueurs de créer leurs propres niveaux et de faire + vivre la communauté (pcq oui hein robtop fait rarement des mises à + jour). On peut donc rapidement découper cette communauté en 2 catégories + : les buildeurs, qui créaient les niveaux, et les joueurs, qui jouent + aux niveaux (bravo vous avez deviné), et très vite, l’objectif des + buildeurs va être de créer les niveaux les plus durs, mais surtout les + plus iconiques et marquant pour les joueurs. Certains niveaux sont + tellement iconiques que des suites sont créées, créant ainsi des + trilogies qui resteront à jamais dans l'esprit des joueurs. Aujourd'hui, + on va parler de 5 trilogies qui ont marqué l'histoire de geometry dash, + 5 trilogies qui ont su nous impacter. +

); }