Start adding gallery

author: Kévin Le Gouguec <kevin.legouguec@gmail.com> 2020-12-13 16:09:22 +0100
committer: Kévin Le Gouguec <kevin.legouguec@gmail.com> 2020-12-13 16:09:22 +0100
commit: 2af97b95eb3eaa061b783d0aad02cb97d707b0a4 (patch)
tree: 9c793ed23e49505763c9a497a55b0260c7f08781
parent: 8c01ce478fc3d93f43262dd5d425d082d50e2aa7 (diff)
download: quatuorbellefeuille.com-2af97b95eb3eaa061b783d0aad02cb97d707b0a4.tar.xz
10 files changed, 110 insertions, 8 deletions
diff --git a/actualités.html b/actualités.html
index 57cbaf1..8b06fee 100644
--- 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
new file mode 100644
index 0000000..6706c28
--- /dev/null
+++ 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
new file mode 100644
index 0000000..eeceeaf
--- /dev/null
+++ 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
index 5799a7a..3e5ac9a 100644
--- 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
index 8daa69b..a9eb134 100644
--- 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
index cd0084b..437433f 100644
--- 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
index d762219..639eaba 100644
--- 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
index 486e387..763a0c3 100644
--- 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
index de7b57e..c60708e 100644
--- 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
index 7608448..348e869 100644
--- 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>
author	Kévin Le Gouguec <kevin.legouguec@gmail.com>	2020-12-13 16:09:22 +0100
committer	Kévin Le Gouguec <kevin.legouguec@gmail.com>	2020-12-13 16:09:22 +0100
commit	2af97b95eb3eaa061b783d0aad02cb97d707b0a4 (patch)
tree	9c793ed23e49505763c9a497a55b0260c7f08781
parent	8c01ce478fc3d93f43262dd5d425d082d50e2aa7 (diff)
download	quatuorbellefeuille.com-2af97b95eb3eaa061b783d0aad02cb97d707b0a4.tar.xz