diff options
| -rw-r--r-- | actualités.html | 2 | ||||
| -rw-r--r-- | gallerie.css | 27 | ||||
| -rw-r--r-- | gallerie.html | 75 | ||||
| -rw-r--r-- | garet.html | 2 | ||||
| -rw-r--r-- | index.html | 2 | ||||
| -rw-r--r-- | ivan.html | 2 | ||||
| -rw-r--r-- | programmes.html | 2 | ||||
| -rw-r--r-- | quatuor.html | 2 | ||||
| -rw-r--r-- | sofia.html | 2 | ||||
| -rw-r--r-- | vlad.html | 2 |
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> @@ -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> @@ -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> @@ -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> @@ -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> @@ -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> |