commit 89584ec37c72744ad97563a0e48cc55431753887
parent fb85192fd4b39ea227e48da9fbdd7975929fcfcc
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Mon, 30 Nov 2020 00:45:46 +0100
Add individual pages
Diffstat:
| A | garet.html | | | 66 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | ivan.html | | | 66 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | membre.css | | | 30 | ++++++++++++++++++++++++++++++ |
| A | sofia.html | | | 66 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | vlad.html | | | 66 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
5 files changed, 294 insertions(+), 0 deletions(-)
diff --git a/garet.html b/garet.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>Garet - Quatuor Camelot</title>
+ <link rel="stylesheet" href="commun.css">
+ <link rel="stylesheet" href="membre.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 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>
+ </ol>
+ </nav>
+
+ <div class="lang">
+ EN
+ </div>
+
+ </header>
+
+ <main>
+ <div id="bio">
+ <h1>Garet</h1>
+ <dl>
+ <dt>Lieu de naissance</dt>
+ <dd>Val</dd>
+ <dt>Élément</dt>
+ <dd>Feu</dd>
+ <dt>Classe</dt>
+ <dd>Garde</dd>
+ <dt>Armes de prédilection</dt>
+ <dd>Sabres, épées, haches, masses</dd>
+ </dl>
+ </div>
+ <div id="photo">
+ <img src="https://v3.goldensun-world.com/img/wallpapers/garet_l.jpg" style="object-position: 35%">
+ </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/ivan.html b/ivan.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>Ivan - Quatuor Camelot</title>
+ <link rel="stylesheet" href="commun.css">
+ <link rel="stylesheet" href="membre.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 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>
+ </ol>
+ </nav>
+
+ <div class="lang">
+ EN
+ </div>
+
+ </header>
+
+ <main>
+ <div id="bio">
+ <h1>Ivan</h1>
+ <dl>
+ <dt>Lieu de naissance</dt>
+ <dd>Contigo</dd>
+ <dt>Élément</dt>
+ <dd>Air</dd>
+ <dt>Classe</dt>
+ <dd>Éo-sage</dd>
+ <dt>Armes de prédilection</dt>
+ <dd>Rapières, bâtons</dd>
+ </dl>
+ </div>
+ <div id="photo">
+ <img src="https://v3.goldensun-world.com/img/wallpapers/ivan_l.jpg" style="object-position: 35%">
+ </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/membre.css b/membre.css
@@ -0,0 +1,30 @@
+main {
+ display: grid;
+ grid-template-columns: 60% 40%;
+ padding-right: 4%;
+}
+
+main > div {
+ padding: 2%;
+}
+
+#bio, #photo {
+ background-color: #dbb;
+}
+
+#bio dl {
+ display: grid;
+ grid-template-columns: 1fr 2fr;
+ align-items: center;
+}
+
+#photo {
+ height: 90%;
+ align-self: center;
+}
+
+#photo img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
diff --git a/sofia.html b/sofia.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>Sofia - Quatuor Camelot</title>
+ <link rel="stylesheet" href="commun.css">
+ <link rel="stylesheet" href="membre.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 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>
+ </ol>
+ </nav>
+
+ <div class="lang">
+ EN
+ </div>
+
+ </header>
+
+ <main>
+ <div id="bio">
+ <h1>Sofia</h1>
+ <dl>
+ <dt>Lieu de naissance</dt>
+ <dd>Imil</dd>
+ <dt>Élément</dt>
+ <dd>Eau</dd>
+ <dt>Classe</dt>
+ <dd>Aqua-sage</dd>
+ <dt>Armes de prédilection</dt>
+ <dd>Masses, bâtons</dd>
+ </dl>
+ </div>
+ <div id="photo">
+ <img src="https://v3.goldensun-world.com/img/wallpapers/sophia_l.jpg" style="object-position: 35%">
+ </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/vlad.html b/vlad.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="utf-8">
+ <title>Vlad - Quatuor Camelot</title>
+ <link rel="stylesheet" href="commun.css">
+ <link rel="stylesheet" href="membre.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 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>
+ </ol>
+ </nav>
+
+ <div class="lang">
+ EN
+ </div>
+
+ </header>
+
+ <main>
+ <div id="bio">
+ <h1>Vlad</h1>
+ <dl>
+ <dt>Lieu de naissance</dt>
+ <dd>Val</dd>
+ <dt>Élément</dt>
+ <dd>Terre</dd>
+ <dt>Classe</dt>
+ <dd>Écuyer</dd>
+ <dt>Armes de prédilection</dt>
+ <dd>Sabres, épées, haches, masses</dd>
+ </dl>
+ </div>
+ <div id="photo">
+ <img src="https://v3.goldensun-world.com/img/wallpapers/vlad_l.jpg" style="object-position: 35%">
+ </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>
