64 lines
3.0 KiB
HTML
64 lines
3.0 KiB
HTML
|
||
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>P’titsPas – Propositions UI Wizard</title>
|
||
<link href="https://fonts.googleapis.com/css2?family=Merienda:wght@600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||
<style>
|
||
body{background:#fffef9;font-family:Inter,sans-serif;color:#2f2f2f;line-height:1.6;padding:2rem;}
|
||
h1,h2{font-family:Merienda,cursive;margin:.5rem 0;}
|
||
.grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
|
||
.card{background:#fff;border-radius:18px;box-shadow:0 4px 12px rgba(0,0,0,.05);padding:1.5rem;text-align:center;}
|
||
img{max-width:100%;height:auto;border-radius:12px;}
|
||
.palette{display:flex;justify-content:center;gap:.5rem;margin-top:.75rem;}
|
||
.swatch{width:28px;height:28px;border-radius:50%;}
|
||
.code{font-size:.75rem;margin-top:.25rem;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h1>Création de compte : idées d’enchaînement de cartes</h1>
|
||
|
||
<p>Chaque étape s’affiche dans une « carte » pastel. En validant, la carte suivante glisse vers l’avant (animation CSS : <code>transform: translateX(-100%)</code> + <code>opacity</code>). Trois styles proposés :</p>
|
||
|
||
<div class="grid">
|
||
<div class="card">
|
||
<h2>Style 1 : Watercolor</h2>
|
||
<img src="A_digital_graphic_design_image_displays_style_opti.png" alt="watercolor stack"/>
|
||
<div class="palette">
|
||
<div class="swatch" style="background:#FBC9C4"></div>
|
||
<div class="swatch" style="background:#FBD38B"></div>
|
||
<div class="swatch" style="background:#A9D8C6"></div>
|
||
</div>
|
||
<div class="code">#FBC9C4 · #FBD38B · #A9D8C6</div>
|
||
<p>Bords arrondis 22 px, texture papier sur chaque carte.<br><b>Animation</b> : légère rotation (<em>tilt</em>) pour rappeler un paquet de cartes réaliste.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h2>Style 2 : Minimal pastel</h2>
|
||
<img src="A_digital_graphic_design_image_displays_style_opti.png" alt="minimal stack"/>
|
||
<div class="palette">
|
||
<div class="swatch" style="background:#E3DFFD"></div>
|
||
<div class="swatch" style="background:#CFEAE3"></div>
|
||
<div class="swatch" style="background:#FFE88A"></div>
|
||
</div>
|
||
<div class="code">#E3DFFD · #CFEAE3 · #FFE88A</div>
|
||
<p>Cartes plates, ombre portée subtile (0 2 8 rgba0,05).<br><b>Animation</b> : slide horizontal + fondu rapide.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h2>Style 3 : Modern vibrant</h2>
|
||
<img src="A_digital_graphic_design_image_displays_style_opti.png" alt="modern stack"/>
|
||
<div class="palette">
|
||
<div class="swatch" style="background:#FB86A2"></div>
|
||
<div class="swatch" style="background:#F3D468"></div>
|
||
<div class="swatch" style="background:#8AC1E3"></div>
|
||
</div>
|
||
<div class="code">#FB86A2 · #F3D468 · #8AC1E3</div>
|
||
<p>Coins arrondis 12 px pour une touche « app mobile ».<br><b>Animation</b> : carte sort par la gauche, nouvelle carte zoome légèrement.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<footer style="font-size:.8rem;margin-top:2rem">© 2025 P’titsPas – maquettes UI</footer>
|
||
</body>
|
||
</html>
|