diff --git a/assets/consoles/dreamcast.svg b/assets/consoles/dreamcast.svg new file mode 100644 index 0000000..a18150a --- /dev/null +++ b/assets/consoles/dreamcast.svg @@ -0,0 +1,8 @@ + + + + + + + Dreamcast + diff --git a/assets/consoles/gameboy.svg b/assets/consoles/gameboy.svg new file mode 100644 index 0000000..b7468b5 --- /dev/null +++ b/assets/consoles/gameboy.svg @@ -0,0 +1,9 @@ + + + + + + + + Game Boy + diff --git a/assets/consoles/megadrive.svg b/assets/consoles/megadrive.svg new file mode 100644 index 0000000..80a4856 --- /dev/null +++ b/assets/consoles/megadrive.svg @@ -0,0 +1,8 @@ + + + + + + + Mega Drive + diff --git a/assets/consoles/n64.svg b/assets/consoles/n64.svg new file mode 100644 index 0000000..fea8a46 --- /dev/null +++ b/assets/consoles/n64.svg @@ -0,0 +1,9 @@ + + + + + + + + Nintendo 64 + diff --git a/assets/consoles/ps1.svg b/assets/consoles/ps1.svg new file mode 100644 index 0000000..7bd65e1 --- /dev/null +++ b/assets/consoles/ps1.svg @@ -0,0 +1,10 @@ + + + + + + + + + PlayStation + diff --git a/assets/consoles/snes.svg b/assets/consoles/snes.svg new file mode 100644 index 0000000..fb0f788 --- /dev/null +++ b/assets/consoles/snes.svg @@ -0,0 +1,9 @@ + + + + + + + + Super Nintendo + diff --git a/index.html b/index.html index 9bab262..dcb7260 100644 --- a/index.html +++ b/index.html @@ -44,7 +44,7 @@
-
+

Catalogue perso

Collection Jeux Video

@@ -52,6 +52,32 @@ et garde une base propre pour la gestion des prêts et de la cote.

+
+
+ PlayStation 1 +
PS1
+
+
+ Super Nintendo +
SNES
+
+
+ Nintendo 64 +
N64
+
+
+ Mega Drive +
Mega Drive
+
+
+ Dreamcast +
Dreamcast
+
+
+ Game Boy +
Game Boy
+
+
diff --git a/styles.css b/styles.css index 2b64e8d..118a299 100644 --- a/styles.css +++ b/styles.css @@ -122,6 +122,46 @@ body { background: linear-gradient(125deg, #f8fff7, #f4f8ff), var(--surface); + display: grid; + grid-template-columns: 1.35fr 1fr; + gap: 1rem; + align-items: center; +} + +.hero-copy { + min-width: 0; +} + +.hero-gallery { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.55rem; +} + +.console-visual { + margin: 0; + border: 1px solid #d5dfeb; + background: linear-gradient(180deg, #ffffff, #f4f8ff); + border-radius: 12px; + padding: 0.45rem; + display: grid; + gap: 0.3rem; + place-items: center; + box-shadow: 0 6px 14px rgba(17, 36, 57, 0.08); +} + +.console-visual img { + width: 100%; + max-width: 90px; + height: 54px; + object-fit: contain; +} + +.console-visual figcaption { + font-size: 0.76rem; + color: #2a4663; + font-weight: 700; + text-align: center; } .eyebrow { @@ -371,6 +411,15 @@ button { } @media (max-width: 900px) { + .hero { + grid-template-columns: 1fr; + gap: 0.8rem; + } + + .hero-gallery { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .grid-form, .game-form { grid-template-columns: repeat(2, minmax(0, 1fr)); @@ -378,6 +427,10 @@ button { } @media (max-width: 640px) { + .hero-gallery { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .grid-form, .game-form { grid-template-columns: 1fr;