UI: remove hero console images from homepage
This commit is contained in:
26
index.html
26
index.html
@@ -66,32 +66,6 @@
|
||||
<p class="eyebrow">Catalogue perso</p>
|
||||
<h1>Collection Jeux Video</h1>
|
||||
</div>
|
||||
<div class="hero-gallery" aria-label="Consoles iconiques">
|
||||
<figure class="console-visual">
|
||||
<img src="assets/consoles/ps1.svg" alt="PlayStation 1" />
|
||||
<figcaption>PS1</figcaption>
|
||||
</figure>
|
||||
<figure class="console-visual">
|
||||
<img src="assets/consoles/snes.svg" alt="Super Nintendo" />
|
||||
<figcaption>SNES</figcaption>
|
||||
</figure>
|
||||
<figure class="console-visual">
|
||||
<img src="assets/consoles/n64.svg" alt="Nintendo 64" />
|
||||
<figcaption>N64</figcaption>
|
||||
</figure>
|
||||
<figure class="console-visual">
|
||||
<img src="assets/consoles/megadrive.svg" alt="Mega Drive" />
|
||||
<figcaption>Mega Drive</figcaption>
|
||||
</figure>
|
||||
<figure class="console-visual">
|
||||
<img src="assets/consoles/dreamcast.svg" alt="Dreamcast" />
|
||||
<figcaption>Dreamcast</figcaption>
|
||||
</figure>
|
||||
<figure class="console-visual">
|
||||
<img src="assets/consoles/gameboy.svg" alt="Game Boy" />
|
||||
<figcaption>Game Boy</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="panel platform-panel">
|
||||
|
||||
50
styles.css
50
styles.css
@@ -177,48 +177,13 @@ body {
|
||||
background:
|
||||
linear-gradient(125deg, #f8fff7, #f4f8ff),
|
||||
var(--surface);
|
||||
display: grid;
|
||||
grid-template-columns: 1.35fr 1fr;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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 {
|
||||
margin: 0;
|
||||
color: var(--accent-2);
|
||||
@@ -530,15 +495,6 @@ 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));
|
||||
@@ -546,10 +502,6 @@ button {
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hero-gallery {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-form,
|
||||
.game-form {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
Reference in New Issue
Block a user