Add navigation bar

index.html

@@ -10,9 +10,23 @@
         <header>
             <h1>Lettre de motivation motivante</h1>
             <p>Toutes les images sont cliquables, pour pouvoir les admirer en grand.</p>
+
+            <!-- Navigation -->
+            <nav class="noprint">
+                <ul>
+                    <li>Marine Sigonneau</li>
+                    <li><a href="#paper">Papier</a></li>
+                    <li><a href="#digital">Numérique</a></li>
+                    <li><a href="#comics">Bédé</a></li>
+                    <li><a href="#tatoo">Tatouage</a></li>
+                    <li><a href="#movie">Court-métrage</a></li>
+                    <li><a href="#misc">Autres</a></li>
+                </ul>
+            </nav>
         </header>
+
         <main>
-            <section>
+            <section id="paper">
                 <h2>Dessins sur papier</h2>
                 <figure>
                     <a href="img/305b7352-46d8-4b81-b6c1-18bf111215bc.jpg">
@@ -28,7 +42,7 @@
                 </figure>
             </section>
 
-            <section>
+            <section id="digital">
                 <h2>Dessins numériques</h2>
                 <p>Ces dessins sont réalisés sur téléphone avec IbisPaint. Pour certains travaux, j'ai aussi pu utiliser les tablettes du collège (ProCreate).</p>
                 <figure>
@@ -43,7 +57,7 @@
                 </figure>
             </section>
 
-            <section>
+            <section id="comics">
                 <h2>Bande dessinée</h2>
                 <p>Je suis passionnée par la bande dessinée depuis mes 10 ans, chaque année j'envoie des planches à des concours comme Quai des bulles ou Angoulême.</p>
                 <figure>
@@ -51,7 +65,7 @@
                 </figure>
             </section>
 
-            <section>
+            <section id="tatoo">
                 <h2>Tatouage sur peau artificielle</h2>
                 <p>Travail réalisé pendant mon stage de 3e chez une tatoueuse.
                 <figure>
@@ -59,7 +73,7 @@
                 </figure>
             </section>
 
-            <section>
+            <section id="movie">
                 <h2>Court métrage en stop motion</h2>
                 <figure>
                     <a href="img/video-decor.jpg"><img src="img/video-decor.jpg" /></a>
@@ -74,7 +88,7 @@
                 </figure>
             </section>
 
-            <section>
+            <section id="misc">
                 <h2>Autres oeuvres</h2>
                 <figure>
                     <a href="img/nugget.jpg"><img src="img/nugget.jpg" /></a>