diff options
| -rw-r--r-- | garet.html | 66 | ||||
| -rw-r--r-- | ivan.html | 66 | ||||
| -rw-r--r-- | membre.css | 30 | ||||
| -rw-r--r-- | sofia.html | 66 | ||||
| -rw-r--r-- | vlad.html | 66 |
5 files changed, 294 insertions, 0 deletions
diff --git a/garet.html b/garet.html new file mode 100644 index 0000000..5799a7a --- /dev/null +++ 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 new file mode 100644 index 0000000..cd0084b --- /dev/null +++ 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 new file mode 100644 index 0000000..0209327 --- /dev/null +++ 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 new file mode 100644 index 0000000..de7b57e --- /dev/null +++ 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 new file mode 100644 index 0000000..7608448 --- /dev/null +++ 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> |