commit 2af97b95eb3eaa061b783d0aad02cb97d707b0a4
parent 8c01ce478fc3d93f43262dd5d425d082d50e2aa7
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sun, 13 Dec 2020 16:09:22 +0100
Start adding gallery
Diffstat:
10 files changed, 110 insertions(+), 8 deletions(-)
diff --git a/actualités.html b/actualités.html
@@ -22,7 +22,7 @@
<li><a href="quatuor.html">Le quatuor</a></li>
<li class="current"><a href="actualités.html">Actualités</a></li>
<li><a href="programmes.html">Programmes</a></li>
- <li><a href="médias.html">Médias</a></li>
+ <li><a href="gallerie.html">Gallerie</a></li>
</ol>
</nav>
diff --git a/gallerie.css b/gallerie.css
@@ -0,0 +1,27 @@
+main {
+}
+
+main > div {
+ padding: 2%;
+ overflow: auto;
+}
+
+.photos {
+ display: grid;
+ grid-auto-rows: 14em;
+ grid-template-columns: repeat(auto-fit, 40%);
+ grid-gap: 0.8em;
+}
+
+.photo img {
+ object-position: center;
+ object-fit: cover;
+ height: 100%;
+ width: 100%;
+ transition: filter 0.5s;
+ filter: grayscale(0.8) brightness(0.4);
+}
+
+.photo img:hover {
+ filter: none;
+}
diff --git a/gallerie.html b/gallerie.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>Gallerie - Quatuor Camelot</title>
+ <link rel="stylesheet" href="commun.css">
+ <link rel="stylesheet" href="gallerie.css">
+ </head>
+ <body>
+ <header class="banner">
+
+ <div class="brand">
+ <a href="index.html">
+ <img src="https://upload.wikimedia.org/wikipedia/en/a/a4/Golden_Sun_icon.png"
+ alt="logo">
+ <h1 class="qname">Quatuor Camelot</h1>
+ </a>
+ </div>
+
+ <nav>
+ <ol>
+ <li><a href="quatuor.html">Le quatuor</a></li>
+ <li><a href="actualités.html">Actualités</a></li>
+ <li><a href="programmes.html">Programmes</a></li>
+ <li class="current"><a href="gallerie.html">Gallerie</a></li>
+ </ol>
+ </nav>
+
+ <div class="lang">
+ EN
+ </div>
+
+ </header>
+
+ <main>
+ <h1>Photos</h1>
+ <div class="photos">
+ <div class="photo">
+ <a href="https://v3.goldensun-world.com/img/wallpapers/wallpaper1.jpg">
+ <img src="https://v3.goldensun-world.com/img/wallpapers/wallpaper1_800x600.jpg">
+ </a>
+ </div>
+ <div class="photo">
+ <a href="https://i.redd.it/snvwn43xm9951.png">
+ <img src="https://preview.redd.it/snvwn43xm9951.png?width=517&auto=webp&s=ffe4c47873bb42e8a62bf678d076ebc7f2bdc880">
+ </a>
+ </div>
+ <div class="photo">
+ <a href="https://i.redd.it/snvwn43xm9951.png">
+ <img src="https://preview.redd.it/snvwn43xm9951.png?width=517&auto=webp&s=ffe4c47873bb42e8a62bf678d076ebc7f2bdc880">
+ </a>
+ </div>
+ <div class="photo">
+ <a href="https://v3.goldensun-world.com/img/wallpapers/wallpaper1.jpg">
+ <img src="https://v3.goldensun-world.com/img/wallpapers/wallpaper1_800x600.jpg">
+ </a>
+ </div>
+ </div>
+ <h1>Vidéos</h1>
+ </div>
+ </main>
+
+ <footer class="social">
+ <img src="https://upload.wikimedia.org/wikipedia/en/9/9f/Twitter_bird_logo_2012.svg">
+ <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/F_icon.svg">
+ <p class="contact">
+ <a href="contact.html">Contact</a>
+ </p>
+ </footer>
+
+ <footer class="legal">
+ <p>Mentions légales - Plan du site</p>
+ </footer>
+ </body>
+</html>
diff --git a/garet.html b/garet.html
@@ -22,7 +22,7 @@
<li class="current"><a href="quatuor.html">Le quatuor</a></li>
<li><a href="actualités.html">Actualités</a></li>
<li><a href="programmes.html">Programmes</a></li>
- <li><a href="médias.html">Médias</a></li>
+ <li><a href="gallerie.html">Gallerie</a></li>
</ol>
</nav>
diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
<li><a href="quatuor.html">Le quatuor</a></li>
<li><a href="actualités.html">Actualités</a></li>
<li><a href="programmes.html">Programmes</a></li>
- <li><a href="médias.html">Médias</a></li>
+ <li><a href="gallerie.html">Gallerie</a></li>
</ol>
</nav>
diff --git a/ivan.html b/ivan.html
@@ -22,7 +22,7 @@
<li class="current"><a href="quatuor.html">Le quatuor</a></li>
<li><a href="actualités.html">Actualités</a></li>
<li><a href="programmes.html">Programmes</a></li>
- <li><a href="médias.html">Médias</a></li>
+ <li><a href="gallerie.html">Gallerie</a></li>
</ol>
</nav>
diff --git a/programmes.html b/programmes.html
@@ -22,7 +22,7 @@
<li><a href="quatuor.html">Le quatuor</a></li>
<li><a href="actualités.html">Actualités</a></li>
<li class="current"><a href="programmes.html">Programmes</a></li>
- <li><a href="médias.html">Médias</a></li>
+ <li><a href="gallerie.html">Gallerie</a></li>
</ol>
</nav>
diff --git a/quatuor.html b/quatuor.html
@@ -22,7 +22,7 @@
<li class="current"><a href="quatuor.html">Le quatuor</a></li>
<li><a href="actualités.html">Actualités</a></li>
<li><a href="programmes.html">Programmes</a></li>
- <li><a href="médias.html">Médias</a></li>
+ <li><a href="gallerie.html">Gallerie</a></li>
</ol>
</nav>
diff --git a/sofia.html b/sofia.html
@@ -22,7 +22,7 @@
<li class="current"><a href="quatuor.html">Le quatuor</a></li>
<li><a href="actualités.html">Actualités</a></li>
<li><a href="programmes.html">Programmes</a></li>
- <li><a href="médias.html">Médias</a></li>
+ <li><a href="gallerie.html">Gallerie</a></li>
</ol>
</nav>
diff --git a/vlad.html b/vlad.html
@@ -22,7 +22,7 @@
<li class="current"><a href="quatuor.html">Le quatuor</a></li>
<li><a href="actualités.html">Actualités</a></li>
<li><a href="programmes.html">Programmes</a></li>
- <li><a href="médias.html">Médias</a></li>
+ <li><a href="gallerie.html">Gallerie</a></li>
</ol>
</nav>
