site-mariage/_byan-output/skills-test/laurel-vow/tokyo.html
Corentin Joguet bff653acd6 first commit
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-15 10:30:37 +02:00

154 lines
6.3 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laurel & Vow. Tokyo Night.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400;1,500&family=JetBrains+Mono:wght@300;400;500&family=Geist:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="tokyo.css">
<link rel="stylesheet" href="switcher.css">
</head>
<body>
<header class="site-header">
<a class="wordmark" href="#top">
<span class="bracket">&#x7b;</span>laurel<span class="op">&amp;</span>vow<span class="bracket">&#x7d;</span>
</a>
<nav><ul>
<li><a href="#portfolio">/portfolio</a></li>
<li><a href="#tarifs">/tarifs</a></li>
<li><a href="#contact">/contact</a></li>
</ul></nav>
</header>
<main id="top">
<section class="hero">
<div class="hero__grid">
<p class="meta">~/paris/studio &middot; depuis 2018</p>
<h1 class="hero__title">
<span class="serif">Photographie</span>
<span class="serif">de mariage</span>
<span class="serif italic">editoriale.</span>
</h1>
<p class="lede">Une dizaine d'unions par an, captees avec retenue. Approche documentaire, livraison rapide.</p>
<div class="actions">
<a class="btn btn--solid" href="#portfolio">voir_le_portfolio</a>
<a class="btn btn--ghost" href="#contact">nous_ecrire</a>
</div>
</div>
<figure class="hero__media">
<img src="https://picsum.photos/seed/laurel-tokyo-hero-night-city/1400/1600" alt="Mariee au crepuscule." loading="eager">
<figcaption class="meta">// ines &amp; mathieu &middot; paris 14e &middot; 09.2025</figcaption>
</figure>
</section>
<section class="kpis">
<div><strong>~10</strong><span>// mariages / an</span></div>
<div><strong>48h</strong><span>// reponse</span></div>
<div><strong>4 sem.</strong><span>// livraison</span></div>
<div><strong>2.4to</strong><span>// archives 2025</span></div>
</section>
<section class="manifesto">
<p class="meta meta--accent">// manifeste</p>
<p class="manifesto__line"><span class="serif">Moins de poses,</span> <span class="serif italic">plus de regards.</span></p>
<p class="manifesto__body">La journee se passe, nous l'enregistrons. Pas de mise en scene appuyee, peu d'interruptions, beaucoup d'attention aux gens et aux details.</p>
</section>
<section class="series" id="portfolio">
<header class="head">
<p class="meta meta--accent">// selection 2024-2025</p>
<h2><span class="serif italic">Series</span> recentes</h2>
</header>
<div class="series__bento">
<article class="bento bento--big">
<figure><img src="https://picsum.photos/seed/laurel-tokyo-bourgogne-vineyard/1200/1500" alt="Vignes Bourgogne." loading="lazy"></figure>
<div class="bento__meta">
<p class="meta">// 01 / bourgogne_05_2026</p>
<h3>Hortense &amp; Jules</h3>
<p>80 invites &middot; domaine familial &middot; ceremonie laique</p>
</div>
</article>
<article class="bento">
<figure><img src="https://picsum.photos/seed/laurel-tokyo-paris-cour/900/700" alt="Cour parisienne." loading="lazy"></figure>
<div class="bento__meta">
<p class="meta">// 02 / paris_09_2025</p>
<h3>Ines &amp; Mathieu</h3>
<p>55 invites &middot; mairie + bistro</p>
</div>
</article>
<article class="bento">
<figure><img src="https://picsum.photos/seed/laurel-tokyo-provence-olive/900/700" alt="Oliviers Luberon." loading="lazy"></figure>
<div class="bento__meta">
<p class="meta">// 03 / luberon_07_2024</p>
<h3>Camille &amp; Antoine</h3>
<p>120 invites &middot; bastide pierre seche</p>
</div>
</article>
</div>
</section>
<section class="pricing" id="tarifs">
<header class="head">
<p class="meta meta--accent">// formules 2026</p>
<h2>Trois <span class="serif italic">facons</span> de travailler</h2>
</header>
<div class="plans">
<article class="plan">
<p class="meta">[01]</p>
<h3>demi-journee()</h3>
<p class="plan__price">1 800 <span>&euro;</span></p>
<ul>
<li>// 5h de couverture</li>
<li>// ceremonie + cocktail</li>
<li>// ~250 photos retouchees</li>
<li>// livraison 4 sem.</li>
</ul>
</article>
<article class="plan plan--featured">
<p class="meta">[02] // le plus choisi</p>
<h3>journee_complete()</h3>
<p class="plan__price">3 200 <span>&euro;</span></p>
<ul>
<li>// preparation -&gt; bal</li>
<li>// couverture continue</li>
<li>// ~600 photos retouchees</li>
<li>// tirage 30x40 offert</li>
<li>// galerie privee 12 mois</li>
</ul>
</article>
<article class="plan">
<p class="meta">[03]</p>
<h3>sur_mesure()</h3>
<p class="plan__price">sur devis</p>
<ul>
<li>// multi-jours ou destination</li>
<li>// film argentique en option</li>
<li>// tirage editorial</li>
<li>// brief sur-mesure</li>
</ul>
</article>
</div>
</section>
<section class="contact" id="contact">
<p class="meta meta--accent">// contact</p>
<h2 class="contact__title">Un <span class="serif italic">mariage</span> en vue ?</h2>
<p class="contact__body">Date, lieu approximatif, nombre d'invites. Reponse sous 48h.</p>
<a class="btn btn--solid btn--large" href="mailto:hello@laurelvow.fr">hello@laurelvow.fr</a>
</section>
</main>
<footer class="site-footer">
<p class="footer__brand"><span class="bracket">&#x7b;</span>laurel<span class="op">&amp;</span>vow<span class="bracket">&#x7d;</span></p>
<p class="meta">// studio de photographie. paris.</p>
<p class="meta"><a href="#top">^ top</a> &middot; (c) 2026</p>
</footer>
<script src="switcher.js" defer></script>
</body>
</html>