Galerie
Images utilisables
Photo Jonathan
Boutons utilisables
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Boutons JS Assurances</title>
<style>
:root{--navy:#0D1B2A;--navy2:#22364D;--gold:#C9A46B;--ivory:#F7F5F0;--white:#fff;--text:#172130}
*{box-sizing:border-box}body{margin:0;padding:40px 20px;font-family:Arial,Helvetica,sans-serif;background:#F3F5F7;color:var(--text)}
.wrapper{max-width:980px;margin:auto;background:#fff;border-radius:18px;padding:36px;box-shadow:0 14px 40px rgba(13,27,42,.10)}
h1{margin:0 0 8px;font-size:30px}.intro{margin:0 0 30px;color:#65707C;line-height:1.6}.section{margin-top:34px}.section h2{font-size:18px;margin:0 0 18px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.js-btn{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:64px;padding:0 22px;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;transition:.2s}
.left{display:flex;align-items:center;gap:14px}.icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-right:1px solid rgba(255,255,255,.35);padding-right:13px;box-sizing:content-box;font-size:20px}.arrow{font-size:24px}
.primary{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(13,27,42,.18)}.primary:hover{background:var(--navy2);transform:translateY(-1px)}
.gold{background:var(--gold);color:var(--navy)}.gold .icon,.secondary .icon{border-right-color:rgba(13,27,42,.2)}.gold:hover{filter:brightness(1.03);transform:translateY(-1px)}
.secondary{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}.secondary:hover{background:var(--ivory)}
.codebox{margin-top:26px;background:#0F1720;color:#EAF0F6;border-radius:12px;padding:18px;overflow:auto;font:12px/1.6 Menlo,Consolas,monospace;white-space:pre}.note{margin-top:24px;padding:16px 18px;background:#F8F6F1;border-left:4px solid var(--gold);border-radius:8px;color:#4F5A66;line-height:1.55;font-size:14px}
@media(max-width:700px){.grid{grid-template-columns:1fr}.wrapper{padding:24px}.js-btn{font-size:14px;padding:0 18px}}
</style>
</head>
<body><div class="wrapper">
<h1>Boutons JS Assurances</h1><p class="intro">Kit de boutons réutilisables pour le site, les landing pages et les campagnes email.</p>
<div class="section"><h2>Boutons principaux</h2><div class="grid">
<a class="js-btn primary" href="https://www.js-assurances.fr/devis-decennale/" target="_blank"><span class="left"><span class="icon">🏗️</span><span>Demander un devis</span></span><span class="arrow">›</span></a>
<a class="js-btn gold" href="https://www.js-assurances.fr/devis-decennale/" target="_blank"><span class="left"><span class="icon">📄</span><span>Déposer un dossier</span></span><span class="arrow">›</span></a>
<a class="js-btn primary" href="mailto:contact@js-assurances.fr?subject=Demande%20de%20rappel"><span class="left"><span class="icon">☎</span><span>Être rappelé</span></span><span class="arrow">›</span></a>
<a class="js-btn primary" href="https://www.js-assurances.fr/" target="_blank"><span class="left"><span class="icon">◆</span><span>Découvrir nos solutions</span></span><span class="arrow">›</span></a>
</div></div>
<div class="section"><h2>Boutons secondaires</h2><div class="grid">
<a class="js-btn secondary" href="https://www.js-assurances.fr/contact/" target="_blank"><span class="left"><span class="icon">✉</span><span>Nous contacter</span></span><span class="arrow">›</span></a>
<a class="js-btn secondary" href="tel:+33189471562"><span class="left"><span class="icon">☎</span><span>Contacter un expert</span></span><span class="arrow">›</span></a>
<a class="js-btn secondary" href="https://www.js-assurances.fr/devis-do/" target="_blank"><span class="left"><span class="icon">⌂</span><span>Voir la Dommages-Ouvrage</span></span><span class="arrow">›</span></a>
<a class="js-btn secondary" href="https://www.js-assurances.fr/devis-rc-pro/" target="_blank"><span class="left"><span class="icon">✓</span><span>Voir la RC Professionnelle</span></span><span class="arrow">›</span></a>
</div></div>
<div class="section"><h2>Version email ultra-compatible</h2><div class="codebox"><table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td bgcolor="#0D1B2A" style="border-radius:9px;">
<a href="https://www.js-assurances.fr/devis-decennale/" target="_blank"
style="display:inline-block;padding:15px 22px;font-family:Arial,Helvetica,sans-serif;font-size:14px;font-weight:700;color:#FFFFFF;text-decoration:none;border-radius:9px;">
Demander un devis RC Décennale ›
</a>
</td>
</tr>
</table></div></div>
<div class="note">Pour les emails, évite les icônes emoji : Outlook peut les afficher différemment. Utilise plutôt le bouton simple fourni dans le bloc “Version email ultra-compatible”.</div>
</div></body></html>
Experience
De février 2019 à aujourd'hui
Ouverture d'un magasin ! Propriétaire de l'atelier de menuiserie JDW
April 2016 - Feb 2019
Artiste du design d'intérieur @ JOPDEX Arch
June 2013 - Jan 2016
Tatoueur de voiture @ FastLane Paint