diff --git a/eleventy.config.js b/eleventy.config.js
index d918af2..6468c28 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -11,6 +11,7 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy({"./src/_includes/js/" : "/js"});
 
   eleventyConfig.addLayoutAlias('base', 'layouts/base.html');
+  eleventyConfig.addLayoutAlias('pdf', 'layouts/pdf.html');
 
   eleventyConfig.addCollection("sections", (collectionApi) => {
     const sections = collectionApi.getFilteredByGlob("./src/pages/sections/**")
diff --git a/src/_includes/layouts/pdf.html b/src/_includes/layouts/pdf.html
new file mode 100644
index 0000000..dbc7dcb
--- /dev/null
+++ b/src/_includes/layouts/pdf.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang={{ site.lang }} >
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <section>
+        <h1>{{ title }}</h1>
+        <ul class="list-inline justify-center">
+            <li><a href="https://google.com">Lorem ipsum dolor sit</a></li>
+            <li>Lorem ipsum</li>
+            <li><a href="https://google.com">Lorem ipsum dolor sit</a></li>
+            <li>Lorem ipsum</li>
+        </ul>
+    </section>
+
+    {% block content %}
+        {{ content }}
+    {% endblock %}
+
+    <section>
+        <div class="title">
+            <h2>Lorem</h2>
+            <hr>
+        </div>
+        <ul>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
+        </ul>
+    </section>
+
+    <section>
+        <div class="title">
+            <h2>Lorem</h2>
+            <hr>
+        </div>
+        <div class="subtitle">
+            <h3>Lorem ipsum</h3>
+            <p class="underline">
+                <strong>Lorem ipsum</strong>
+            </p>
+            <div class="timeSection">
+                <span>Lorem ipsum</span>
+                <strong>01/1999 - 02/1999</strong>
+            </div>
+        </div>
+        <ul>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
+        </ul>
+        <div class="subtitle">
+            <h3>Lorem ipsum</h3>
+            <p class="underline">
+                <strong>Lorem ipsum</strong>
+            </p>
+            <div class="timeSection">
+                <span>Lorem ipsum</span>
+                <strong>01/1999 - 02/1999</strong>
+            </div>
+        </div>
+        <ul>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
+        </ul>
+        <div class="subtitle">
+            <h3>Lorem ipsum</h3>
+            <p class="underline">
+                <strong>Lorem ipsum</strong>
+            </p>
+            <div class="timeSection">
+                <span>Lorem ipsum</span>
+                <strong>01/1999 - 02/1999</strong>
+            </div>
+        </div>
+        <ul>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
+        </ul>
+    </section>
+
+    <section>
+        <div class="title">
+            <h2>Lorem</h2>
+            <hr>
+        </div>
+        <div class="subtitle">
+            <h3>Lorem ipsum 2</h3>
+            <p class="underline">
+                <strong>Lorem ipsum</strong>
+            </p>
+            <div class="timeSection">
+                <span>Lorem ipsum</span>
+                <strong>01/1999 - 02/1999</strong>
+            </div>
+        </div>
+        <ul>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
+        </ul>
+    </section>
+
+    <section>
+        <div class="title">
+            <h2>Lorem</h2>
+            <hr>
+        </div>
+        <ul>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum. Nemo illum amet voluptatibus assumenda sunt eaque quas, ipsa officia ut mollitia veniam.</p></li>
+            <li><p><strong>Lorem:</strong> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste minus molestiae facere inventore cum.</p></li>
+        </ul>
+    </section>
+
+    <style>
+:root {
+  --accent-color: blue;
+  --font-body: Arial, sans-serif;
+  --font-display: 'Times New Roman', Times, serif;
+}
+
+html {
+  font-family: var(--font-body, Arial, sans-serif);
+  margin: 0;
+}
+body {
+  margin: 0;
+}
+
+*, ::before, ::after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+h1 {
+  text-align:center;
+  font-family: var(--font-display, 'Times New Roman', Times, serif);
+  font-size: 2rem;
+  margin: 0;
+  line-height: 1.6;
+}
+h2 {
+  color : var(--accent-color, blue);
+}
+p {
+  margin: 0;
+}
+ul {
+  margin: 0;
+}
+li::marker {
+  color: var(--accent-color, blue);
+}
+section {margin-bottom: 1.2rem;}
+
+.justify-center {
+  justify-content: center;
+}
+.underline {
+  text-decoration: underline;
+}
+.list-inline {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  gap: .8rem;
+}
+.list-inline li {
+  display: contents;
+}
+.list-inline li + li::before {
+  content: '|';
+}
+
+.title {
+  display: flex;
+  gap: .8rem;
+  margin-bottom: .6rem;
+}
+.title h2 {
+  margin: 0;
+}
+.title hr {
+  align-self: center;
+  flex: 1 0 auto;
+}
+
+section ul {padding: 0;margin-left: 1.2rem;}
+.subtitle {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  justify-content: space-between;
+  align-items: center;
+  justify-items: center;
+  margin-inline: 1rem;
+  margin-bottom: .4rem;
+}
+.subtitle .timeSection { font-size: .9rem; }
+.subtitle h3,
+.subtitle p { margin: 0; }
+.subtitle > :first-child {justify-self: start;}
+.subtitle > :last-child {justify-self: end;}
+.subtitle + ul {font-size: .9rem;}
+.subtitle ~ .subtitle {margin-top: 1rem;}
+    </style>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/pages/sections/download.liquid b/src/pages/sections/download.liquid
index 5ac90e6..e454d8f 100644
--- a/src/pages/sections/download.liquid
+++ b/src/pages/sections/download.liquid
@@ -1,6 +1,7 @@
 ---
 title: Téléchargement
 showTitle: false
+excludeFromPdf: true
 order: 4
 ---
 
diff --git a/src/pages/sections/hero.liquid b/src/pages/sections/hero.liquid
index 887610f..d2db8e3 100644
--- a/src/pages/sections/hero.liquid
+++ b/src/pages/sections/hero.liquid
@@ -2,6 +2,7 @@
 title: A propos
 order: 0
 template: 'hero'
+excludeFromPdf: true
 eleventyComputed:
     description: "{{ author.about }}"
     displayedTitle: "Moi c'est {{ author.firstName }}<br>Et je suis {{ author.occupation }}"
diff --git a/src/pdf.liquid b/src/pdf.liquid
new file mode 100644
index 0000000..68c183a
--- /dev/null
+++ b/src/pdf.liquid
@@ -0,0 +1,26 @@
+---
+layout: pdf
+title: Test PDF
+permalink: "pdf.pdf"
+---
+
+<h1>Hello</h1>
+
+<p>
+<img src="https://place-hold.it/400x400">
+</p>
+
+<p>
+The time is {{ "now" | date: "%Y-%m-%d %H:%M" }}
+
+</p>
+
+{% for section in collections.sections %}
+    {% if section.data.excludeFromPdf != true %}
+      {% if section.data.template == 'hero' %}
+        {% include 'hero' %}
+      {% else %}
+        {% include 'page' %}
+      {% endif %}
+    {% endif %}
+  {% endfor %}
\ No newline at end of file
