205 lines
8.4 KiB
HTML
205 lines
8.4 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. Photographie de mariage a Paris.</title>
|
|
<meta name="description" content="Studio de photographie de mariage a Paris. Approche editoriale et documentaire pour mariages intimistes.">
|
|
|
|
<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=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400&family=Geist:wght@300;400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="switcher.css">
|
|
</head>
|
|
<body>
|
|
|
|
<header class="site-header">
|
|
<a class="wordmark" href="#top" aria-label="Laurel et Vow, retour en haut">
|
|
<span class="wordmark__name">Laurel<span class="wordmark__amp"> & </span>Vow</span>
|
|
</a>
|
|
<nav aria-label="Navigation principale">
|
|
<ul class="nav-list">
|
|
<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">
|
|
|
|
<!-- HERO : split asymetrique 5/7, texte gauche, image droite -->
|
|
<section class="hero" aria-labelledby="hero-title">
|
|
<div class="hero__content">
|
|
<p class="eyebrow">Studio. Paris.</p>
|
|
<h1 id="hero-title" class="display display--xl">
|
|
<span>Laurel</span>
|
|
<span class="amp">&</span>
|
|
<span class="italic">Vow</span>
|
|
</h1>
|
|
<p class="hero__lede">
|
|
Photographie de mariage editoriale et documentaire.
|
|
Quelques unions par an, choisies avec soin.
|
|
</p>
|
|
<p class="hero__cta">
|
|
<a class="link-arrow" href="#portfolio">
|
|
Voir le portfolio
|
|
<span aria-hidden="true" class="arrow">→</span>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<figure class="hero__image">
|
|
<img
|
|
src="https://picsum.photos/seed/laurel-vow-hero-wedding-documentary-paris/1400/1750"
|
|
alt="Mariee de profil regardant par une fenetre, lumiere naturelle."
|
|
width="1400" height="1750" loading="eager" fetchpriority="high">
|
|
</figure>
|
|
</section>
|
|
|
|
<!-- ABOUT : manifeste centre, prose -->
|
|
<section class="about" aria-labelledby="about-title">
|
|
<p class="eyebrow eyebrow--centered">Manifeste</p>
|
|
<h2 id="about-title" class="display display--m about__title">
|
|
<span class="italic">Moins de poses,</span> plus de regards.
|
|
</h2>
|
|
<p class="about__body">
|
|
Nous photographions les mariages intimistes a Paris et ailleurs en France.
|
|
Notre approche est documentaire : la journee se passe, nous l'enregistrons.
|
|
Pas de mise en scene appuyee, peu d'interruptions, beaucoup d'attention aux gens.
|
|
</p>
|
|
<p class="about__body">
|
|
Une dizaine de mariages par an. Nous prenons le temps de connaitre chaque couple
|
|
avant le jour J.
|
|
</p>
|
|
</section>
|
|
|
|
<!-- PORTFOLIO : 3 series, compositions differentes (anti-repetition) -->
|
|
<section class="portfolio" id="portfolio" aria-labelledby="portfolio-title">
|
|
<header class="section-header">
|
|
<p class="eyebrow">Selection 2024 et 2025</p>
|
|
<h2 id="portfolio-title" class="display display--l">Series recentes.</h2>
|
|
</header>
|
|
|
|
<!-- Serie 1 : image large gauche, texte droite -->
|
|
<article class="serie serie--left">
|
|
<figure class="serie__image">
|
|
<img
|
|
src="https://picsum.photos/seed/laurel-bourgogne-hortense-jules-vineyard/1200/900"
|
|
alt="Couple s'embrassant sous une treille de vignes au coucher du soleil."
|
|
width="1200" height="900" loading="lazy">
|
|
</figure>
|
|
<div class="serie__caption">
|
|
<p class="serie__index">Serie 01</p>
|
|
<h3 class="serie__title">Hortense et Jules</h3>
|
|
<p class="serie__meta">Bourgogne, mai 2026. 80 invites. Domaine familial.</p>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Serie 2 : texte gauche, image plus petite droite -->
|
|
<article class="serie serie--right">
|
|
<div class="serie__caption">
|
|
<p class="serie__index">Serie 02</p>
|
|
<h3 class="serie__title">Ines et Mathieu</h3>
|
|
<p class="serie__meta">14e arrondissement, septembre 2025. 55 invites. Mairie puis restaurant.</p>
|
|
</div>
|
|
<figure class="serie__image">
|
|
<img
|
|
src="https://picsum.photos/seed/laurel-paris-ines-mathieu-bistro/900/1200"
|
|
alt="Cocktail intime dans une cour parisienne, lumiere de fin d'apres-midi."
|
|
width="900" height="1200" loading="lazy">
|
|
</figure>
|
|
</article>
|
|
|
|
<!-- Serie 3 : image plein cadre, legende dessous -->
|
|
<article class="serie serie--full">
|
|
<figure class="serie__image">
|
|
<img
|
|
src="https://picsum.photos/seed/laurel-provence-camille-antoine-olive-grove/1600/900"
|
|
alt="Couple marchant entre des oliviers, cliche pris au telephoto."
|
|
width="1600" height="900" loading="lazy">
|
|
</figure>
|
|
<div class="serie__caption">
|
|
<p class="serie__index">Serie 03</p>
|
|
<h3 class="serie__title">Camille et Antoine</h3>
|
|
<p class="serie__meta">Luberon, juillet 2024. 120 invites. Bastide en pierre seche.</p>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- TARIFS : layout menu editorial, leader dotted, hairlines sobres -->
|
|
<section class="pricing" id="tarifs" aria-labelledby="pricing-title">
|
|
<header class="section-header">
|
|
<p class="eyebrow">Formules 2026</p>
|
|
<h2 id="pricing-title" class="display display--l">Trois facons de travailler.</h2>
|
|
</header>
|
|
|
|
<ol class="pricing-list" role="list">
|
|
<li class="pricing-item">
|
|
<header class="pricing-item__head">
|
|
<h3 class="pricing-item__name">Demi-journee</h3>
|
|
<span class="pricing-item__leader" aria-hidden="true"></span>
|
|
<p class="pricing-item__price">1 800 €</p>
|
|
</header>
|
|
<p class="pricing-item__body">
|
|
Cinq heures de couverture. Ceremonie, cocktail et debut de soiree.
|
|
Environ 250 photos retouchees livrees sous quatre semaines.
|
|
</p>
|
|
</li>
|
|
<li class="pricing-item">
|
|
<header class="pricing-item__head">
|
|
<h3 class="pricing-item__name">Journee complete</h3>
|
|
<span class="pricing-item__leader" aria-hidden="true"></span>
|
|
<p class="pricing-item__price">3 200 €</p>
|
|
</header>
|
|
<p class="pricing-item__body">
|
|
De la preparation a l'ouverture du bal. Couverture continue.
|
|
Environ 600 photos retouchees et un tirage papier offert.
|
|
</p>
|
|
</li>
|
|
<li class="pricing-item">
|
|
<header class="pricing-item__head">
|
|
<h3 class="pricing-item__name">Sur-mesure</h3>
|
|
<span class="pricing-item__leader" aria-hidden="true"></span>
|
|
<p class="pricing-item__price">Sur devis</p>
|
|
</header>
|
|
<p class="pricing-item__body">
|
|
Multi-jours, destinations lointaines, format film argentique,
|
|
tirage editorial. Parlons-en autour d'un cafe.
|
|
</p>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<!-- CONTACT : simple, mailto -->
|
|
<section class="contact" id="contact" aria-labelledby="contact-title">
|
|
<p class="eyebrow">Contact</p>
|
|
<h2 id="contact-title" class="display display--m contact__title">
|
|
Un mariage en vue ?
|
|
</h2>
|
|
<p class="contact__body">
|
|
Ecrivez-nous avec la date, le lieu approximatif et le nombre d'invites.
|
|
Reponse sous 48 heures, sauf en pleine saison.
|
|
</p>
|
|
<p class="contact__mail">
|
|
<a class="link-mail" href="mailto:hello@laurelvow.fr?subject=Demande%20d%27information%20mariage">
|
|
hello@laurelvow.fr
|
|
</a>
|
|
</p>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<p class="footer__brand">Laurel <span aria-hidden="true">&</span> Vow</p>
|
|
<p class="footer__meta">Studio de photographie. Paris, France.</p>
|
|
<p class="footer__legal">
|
|
<a href="#top">Retour en haut</a>
|
|
<span class="sep" aria-hidden="true"></span>
|
|
<span>© 2026</span>
|
|
</p>
|
|
</footer>
|
|
|
|
<script src="switcher.js" defer></script>
|
|
</body>
|
|
</html>
|