summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--david.html56
-rw-r--r--david.sh (renamed from sofia.sh)4
-rw-r--r--enguerrand.html56
-rw-r--r--enguerrand.sh (renamed from ivan.sh)4
-rw-r--r--garet.html18
-rw-r--r--hervé.html60
-rw-r--r--hervé.sh (renamed from garet.sh)4
-rw-r--r--images/david/full.pngbin0 -> 243957 bytes
-rw-r--r--images/david/portrait.pngbin0 -> 178644 bytes
-rw-r--r--images/enguerrand/full.pngbin0 -> 284287 bytes
-rw-r--r--images/enguerrand/portrait.pngbin0 -> 180347 bytes
-rw-r--r--images/hervé/full.pngbin0 -> 252840 bytes
-rw-r--r--images/hervé/portrait.pngbin0 -> 209532 bytes
-rw-r--r--images/sophie/full.pngbin0 -> 263826 bytes
-rw-r--r--images/sophie/portrait.pngbin0 -> 283386 bytes
-rw-r--r--ivan.html18
-rw-r--r--quatuor.html10
-rw-r--r--quatuor.md54
-rw-r--r--sofia.html18
-rw-r--r--sophie.html20
-rw-r--r--sophie.sh (renamed from vlad.sh)4
-rw-r--r--stylesheets/commun.css2
-rw-r--r--stylesheets/membre.css30
-rw-r--r--stylesheets/quatuor.css54
-rw-r--r--template.html8
-rw-r--r--vlad.html18
26 files changed, 254 insertions, 184 deletions
diff --git a/david.html b/david.html
new file mode 100644
index 0000000..acc013a
--- /dev/null
+++ b/david.html
@@ -0,0 +1,56 @@
+<main>
+ <div id="bio">
+ <h1>David</h1>
+ <dl>
+ <dt>Ta maison Poudlard : </dt>
+ <dd>Poufsouffle, c'est le résultat du test officiel ! </dd>
+ </dl>
+ <dl>
+ <dt>Une feuille préférée : </dt>
+ <dd>L'érable, de préférence avec des pancakes ! </dd>
+ </dl>
+ <dl>
+ <dt>Une période de l'histoire à revivre : </dt>
+ <dd>Les années 60, pour pouvoir assister aux concerts des Beatles ou de Jimi Hendrix. </dd>
+ </dl>
+ <dl>
+ <dt>Mon choix d’instrument : </dt>
+ <dd>J'ai vu à 6 ans le documentaire "l'art du violon" qui m'a fait découvrir les grands violonistes du 20e s, c'est là que je me suis mis à adorer cet instrument. </dd>
+ </dl>
+ <dl>
+ <dt>Un artiste qui me touche : </dt>
+ <dd>Le violoniste Christian Ferras pour la générosité du son et l'intensité du vibrato. </dd>
+ </dl>
+ <dl>
+ <dt>Une œuvre qui te bouleverse : </dt>
+ <dd>Même après l'avoir écouté des dizaines de fois je suis toujours aussi bouleversé par le 15e quatuor de Beethoven. </dd>
+ </dl>
+ <dl>
+ <dt>Un film marquant : </dt>
+ <dd>M le maudit de Fritz Lang. </dd>
+ </dl>
+ <dl>
+ <dt>Un souvenir marquant : </dt>
+ <dd>Mon premier voyage aux États Unis quand j'ai découvert les cinémas en drive, je n'aurais jamais cru que ça puisse exister ! </dd>
+ </dl>
+ <dl>
+ <dt>Ta blague préférée : </dt>
+ <dd>C'est l'histoire d'une courgette, elle court elle se jette. </dd>
+ </dl>
+ <dl>
+ <dt>Si je n'étais pas musicien : </dt>
+ <dd>J'aurais probablement étudié l'astrophysique, j'ai toujours été fasciné par ce domaine. </dd>
+ </dl>
+ <dl>
+ <dt>Un livre que j'ai aimé : </dt>
+ <dd>La série des rois maudits de Maurice Druon, l'histoire de France est plus incroyable qu'un roman d'aventure ! </dd>
+ </dl>
+ <dl>
+ <dt>Mon parcours : </dt>
+ <dd>Je viens d'une famille de mélomanes et j'ai débuté le violon à l'âge de 5 ans dans une école de musique en région parisienne. Durant ma scolarité je ne me prédestinais pas spécialement pour la musique, j'étais plutôt intéressé par les sciences. C'est vers l'âge de 16 ans que j'ai eu le "déclic", j'étudiais avec Dorothée Nodé-Langlois qui m'a vraiment transmis cette passion pour le violon. J'ai continué mes études au conservatoire de Boulogne Billancourt et finalement au CNSM où j'ai intégré le quatuor Bellefeuille. </dd>
+ </dl>
+ </div>
+ <div id="photo">
+ <img src="images/david/portrait.png">
+ </div>
+</main>
diff --git a/sofia.sh b/david.sh
index 2cc53b3..e7141f0 100644
--- a/sofia.sh
+++ b/david.sh
@@ -1,4 +1,4 @@
-title=Sofia
+title=David
stylesheets=membre
transforms=("$(transform-li-dropdown-current-a quatuor)"
- "$(transform-li-current-a sofia)")
+ "$(transform-li-current-a david)")
diff --git a/enguerrand.html b/enguerrand.html
new file mode 100644
index 0000000..3d8717b
--- /dev/null
+++ b/enguerrand.html
@@ -0,0 +1,56 @@
+<main>
+ <div id="bio">
+ <h1>Enguerrand</h1>
+ <dl>
+ <dt>Ton arbre préféré : </dt>
+ <dd>l'Epicéa.</dd>
+ </dl>
+ <dl>
+ <dt>Ta maison Poudlard : </dt>
+ <dd>Serdaigle (seule maison vraiment respectable).</dd>
+ </dl>
+ <dl>
+ <dt>Une œuvre bouleversante : </dt>
+ <dd>la 2e de Mahler, Résurrection, et son choeur final.</dd>
+ </dl>
+ <dl>
+ <dt>Un livre : </dt>
+ <dd>Le Chat de Geluck, pour son humour en acier trempé.</dd>
+ </dl>
+ <dl>
+ <dt>Une ville : </dt>
+ <dd>Vienne, pour sa beauté incomparable et sa vie trépidante.</dd>
+ </dl>
+ <dl>
+ <dt>Ton film favori : </dt>
+ <dd>Sacré Graal, Monty Python (We-are-the-knights-who-say-NI).</dd>
+ </dl>
+ <dl>
+ <dt>Ce qui nous rassemble : </dt>
+ <dd>La contradiction surtout, et l'amour de la nourriture. Et le quatuor aussi.</dd>
+ </dl>
+ <dl>
+ <dt>Tes loisirs : </dt>
+ <dd>Les jeux vidéo, les séries, le vélo et les mikados géants.</dd>
+ </dl>
+ <dl>
+ <dt>Un rêve : </dt>
+ <dd>Gagner mon poids en Schoko-Bons.</dd>
+ </dl>
+ <dl>
+ <dt>Des artistes inspirants : </dt>
+ <dd>Banksy, Ivry Gitlis, Joao Gilberto, Paul Klee.</dd>
+ </dl>
+ <dl>
+ <dt>Ton plat préféré : </dt>
+ <dd>Les lasagnes sous toutes leurs formes.</dd>
+ </dl>
+ <dl>
+ <dt>Ton parcours : </dt>
+ <dd>Pêle-mêle du violoncelle, du chant, de l'informatique, des lettres ... Entre Paris et Lyon.</dd>
+ </dl>
+ </div>
+ <div id="photo">
+ <img src="images/enguerrand/portrait.png">
+ </div>
+</main>
diff --git a/ivan.sh b/enguerrand.sh
index 47d60f8..b57ff40 100644
--- a/ivan.sh
+++ b/enguerrand.sh
@@ -1,4 +1,4 @@
-title=Ivan
+title=Enguerrand
stylesheets=membre
transforms=("$(transform-li-dropdown-current-a quatuor)"
- "$(transform-li-current-a ivan)")
+ "$(transform-li-current-a enguerrand)")
diff --git a/garet.html b/garet.html
deleted file mode 100644
index e182bf3..0000000
--- a/garet.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<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>
diff --git a/hervé.html b/hervé.html
new file mode 100644
index 0000000..4632b74
--- /dev/null
+++ b/hervé.html
@@ -0,0 +1,60 @@
+<main>
+ <div id="bio">
+ <h1>Hervé</h1>
+ <dl>
+ <dt>Ta feuille préférée ? </dt>
+ <dd>Celle du figuier.</dd>
+ </dl>
+ <dl>
+ <dt>Une période de l'histoire à vivre ? </dt>
+ <dd> Le néolithique (vaste sujet...).</dd>
+ </dl>
+ <dl>
+ <dt>Ta maison à Poudlard ? </dt>
+ <dd>Serdaigle, la raison l’emporte.</dd>
+ </dl>
+ <dl>
+ <dt>Un jeu vidéo favori ? </dt>
+ <dd>Mario Kart.</dd>
+ </dl>
+ <dl>
+ <dt>Un compositeur de prédilection ? </dt>
+ <dd>Brahms, depuis toujours et sans hésitation !</dd>
+ </dl>
+ <dl>
+ <dt>Une œuvre qui te bouleverse ? </dt>
+ <dd>La nuit transfigurée d’Arnold Schoenberg.</dd>
+ </dl>
+ <dl>
+ <dt>Un souvenir marquant ? </dt>
+ <dd>Un lac de montagne au bout d’une randonnée en Ariège.</dd>
+ </dl>
+ <dl>
+ <dt>Un monument favori ? </dt>
+ <dd>La cathédrale d’Amiens, son immense volume et sa façade foisonnante de détails.</dd>
+ </dl>
+ <dl>
+ <dt>Qu’est-ce que tu apportes au quatuor ? </dt>
+ <dd> Ma mauvaise humeur et un peu de miel entre le grave et les aigus.</dd>
+ </dl>
+ <dl>
+ <dt>Tes loisirs ? </dt>
+ <dd>La cuisine ! Ainsi que le sport (avec modération).</dd>
+ </dl>
+ <dl>
+ <dt>Un rêve ? </dt>
+ <dd>Je tombe à vélo et tout à coup je me réveille... Mais je n’ai peut-être pas bien compris la question.</dd>
+ </dl>
+ <dl>
+ <dt>Ton plat préféré ? </dt>
+ <dd> La blanquette est bonne.</dd>
+ </dl>
+ <dl>
+ <dt>Ton parcours ? </dt>
+ <dd>J’ai toujours été attiré par les activités manuelles (bricolage, peinture, sculpture...) ce qui m’a valu de longues hésitations quant à mon choix d’orientation post-terminale. J’ai fini par me décider à continuer à suivre la voie musicale que je traçais depuis mes sept ans et partir écumer les conservatoires de Gennevilliers, Boulogne-Billancourt et le CNSMDP. Je suis aujourd’hui l’heureux altiste du quatuor Bellefeuille et membre de l’Orchestre de Paris.</dd>
+ </dl>
+ </div>
+ <div id="photo">
+ <img src="images/hervé/portrait.png">
+ </div>
+</main>
diff --git a/garet.sh b/hervé.sh
index b56e770..c80010f 100644
--- a/garet.sh
+++ b/hervé.sh
@@ -1,4 +1,4 @@
-title=Garet
+title=Hervé
stylesheets=membre
transforms=("$(transform-li-dropdown-current-a quatuor)"
- "$(transform-li-current-a garet)")
+ "$(transform-li-current-a hervé)")
diff --git a/images/david/full.png b/images/david/full.png
new file mode 100644
index 0000000..926a8a0
--- /dev/null
+++ b/images/david/full.png
Binary files differ
diff --git a/images/david/portrait.png b/images/david/portrait.png
new file mode 100644
index 0000000..b69d273
--- /dev/null
+++ b/images/david/portrait.png
Binary files differ
diff --git a/images/enguerrand/full.png b/images/enguerrand/full.png
new file mode 100644
index 0000000..79debc5
--- /dev/null
+++ b/images/enguerrand/full.png
Binary files differ
diff --git a/images/enguerrand/portrait.png b/images/enguerrand/portrait.png
new file mode 100644
index 0000000..db61c60
--- /dev/null
+++ b/images/enguerrand/portrait.png
Binary files differ
diff --git a/images/hervé/full.png b/images/hervé/full.png
new file mode 100644
index 0000000..8797a2e
--- /dev/null
+++ b/images/hervé/full.png
Binary files differ
diff --git a/images/hervé/portrait.png b/images/hervé/portrait.png
new file mode 100644
index 0000000..4ea1c59
--- /dev/null
+++ b/images/hervé/portrait.png
Binary files differ
diff --git a/images/sophie/full.png b/images/sophie/full.png
new file mode 100644
index 0000000..889895d
--- /dev/null
+++ b/images/sophie/full.png
Binary files differ
diff --git a/images/sophie/portrait.png b/images/sophie/portrait.png
new file mode 100644
index 0000000..8c3a743
--- /dev/null
+++ b/images/sophie/portrait.png
Binary files differ
diff --git a/ivan.html b/ivan.html
deleted file mode 100644
index 21f3a57..0000000
--- a/ivan.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<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>
diff --git a/quatuor.html b/quatuor.html
index ed4f23d..3ec5095 100644
--- a/quatuor.html
+++ b/quatuor.html
@@ -1,13 +1,11 @@
<main>
<div id="photos">
- <a href="vlad.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/vlad_b.jpg"></a>
- <a href="garet.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/garet_b.jpg"></a>
- <a href="ivan.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/ivan_b.jpg"></a>
- <a href="sofia.html"><img class="portrait" src="https://v3.goldensun-world.com/img/artwork/sofia_b.jpg"></a>
+ <a href="sophie.html"><img class="portrait" src="images/sophie/full.png"></a>
+ <a href="david.html"><img class="portrait" src="images/david/full.png"></a>
+ <a href="hervé.html"><img class="portrait" src="images/hervé/full.png"></a>
+ <a href="enguerrand.html"><img class="portrait" src="images/enguerrand/full.png"></a>
</div>
-
<div id="bio">
{BIO}
</div>
-
</main>
diff --git a/quatuor.md b/quatuor.md
index 91bdabe..69805d5 100644
--- a/quatuor.md
+++ b/quatuor.md
@@ -1,35 +1,19 @@
-# Un premier titre
-
-Senectus et netus et malesuada fames ac turpis. Ut sem nulla pharetra
-diam sit amet nisl suscipit adipiscing. Et netus et malesuada fames ac.
-Turpis massa sed elementum tempus egestas sed sed. Et netus et malesuada
-fames ac. Enim sit amet venenatis urna cursus. Fermentum et sollicitudin
-ac orci phasellus. Sollicitudin nibh sit amet commodo nulla facilisi
-nullam vehicula. Pellentesque adipiscing commodo elit at imperdiet. Eget
-nunc scelerisque viverra mauris in. Eu sem integer vitae justo eget
-magna fermentum iaculis. Feugiat nisl pretium fusce id velit. Facilisis
-gravida neque convallis a cras semper. Scelerisque eu ultrices vitae
-auctor eu augue ut lectus. Aliquam purus sit amet luctus venenatis.
-
-Felis imperdiet proin fermentum leo vel orci porta. Imperdiet massa
-tincidunt nunc pulvinar. Porta lorem mollis aliquam ut porttitor leo.
-Morbi tincidunt augue interdum velit euismod in pellentesque massa. In
-ornare quam viverra orci sagittis eu. Elementum integer enim neque
-volutpat ac. Adipiscing bibendum est ultricies integer quis. Quisque non
-tellus orci ac auctor augue. Dictum fusce ut placerat orci nulla
-pellentesque dignissim enim. Vitae congue eu consequat ac felis donec et
-odio. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae
-nunc sed.
-
-# Un second titre
-
-Vitae congue eu consequat ac. Nullam ac tortor vitae purus. Laoreet id
-donec ultrices tincidunt arcu non sodales neque sodales. Ut faucibus
-pulvinar elementum integer enim neque volutpat ac tincidunt. Proin sed
-libero enim sed faucibus turpis in eu. Facilisis magna etiam tempor orci
-eu lobortis elementum. Lobortis elementum nibh tellus molestie nunc.
-Vitae tortor condimentum lacinia quis vel eros donec. Ut etiam sit amet
-nisl purus in mollis nunc sed. Leo in vitae turpis massa. Nam at lectus
-urna duis convallis convallis tellus id interdum. Morbi non arcu risus
-quis varius quam. Ac turpis egestas maecenas pharetra convallis posuere
-morbi leo. Magna etiam tempor orci eu.
+En 2015, quatre jeunes musiciens du Conservatoire Régional de Boulogne-Billancourt - situé rue de la Bellefeuille - fondent le quatuor Bellefeuille, en hommage à leur lieu de rencontre. Ils découvrent dans cette formation l’équilibre idéal entre expression personnelle et force collective. Les ‘jeunes pousses’ entrent dans la classe d’Aline Bartissol et obtiennent en 2016 leur Diplôme d’Études Musicales avec les félicitations du jury.
+
+Leur personnalité se forme au grès de rencontres déterminantes comme celle de Luc-Marie Aguera, membre du quatuor Ysaye qui partage avec eux son expérience, son goût, son enthousiasme. Il les encourage à exprimer leurs émotions et à explorer en profondeur l’essence des œuvres qu’ils interprètent. Le quatuor se perfectionne par ailleurs auprès de Yovan Markovitch, de Jean Sulem et de Xavier Gagnepain.
+
+L'ensemble partage le répertoire du quatuor à cordes avec les publics accueillants des festivals de France. Il se produit dans les conservatoires d’Ile de France et a le plaisir de jouer dans la grande salle de la Philharmonie de Paris. Lors d’une série de concerts en partenariat avec le festival Virtuoso & Belcanto et le Dimore del Quartetto, les Bellefeuille savourent la beauté de la Toscane et l’engouement des italiens pour le quatuor à cordes. Ils s’appliquent également à aller à la rencontre de nouveaux publics comme lors de leur concert-médiation au centre de détention de Mauzac.
+
+Le quatuor se plaît à aborder tous les styles et caractères, de l'espièglerie de Haydn à l’intensité de Chostakovitch en passant par la passion Beethovenienne, la fougue de Mendelssohn et l'impressionnisme cher à Ravel. Le groupe enrichit et diversifie son répertoire en interprétant Dutilleux, Bartok et Brahms.
+
+Le quatuor remercie chaleureusement Musique à Flaine et Le Dimore del Quartetto pour leur soutien indéfectible.
+
+## Instruments
+
+Sophie Guille des Buttes joue un violon de Jean-Baptiste Vuillaume (Paris, 1845) et un archet de Pierre Grunberger (2018)
+
+David Forest joue un violon de Charles Enel (Paris, 1928) gracieusement prêté par l’association “Talents et Violoncelles” et un archet de Louis Bazin
+
+Hervé Blandinières joue un alto de Stefan Von Baehr (Paris, 2002) et un archet de Louis Joseph Morisot (début XXe)
+
+Enguerrand Bontoux joue un violoncelle de Jacquet-Gand (Paris, 1898) et un archet de Schmidt
diff --git a/sofia.html b/sofia.html
deleted file mode 100644
index af29583..0000000
--- a/sofia.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<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>
diff --git a/sophie.html b/sophie.html
new file mode 100644
index 0000000..5eedc4f
--- /dev/null
+++ b/sophie.html
@@ -0,0 +1,20 @@
+<main>
+ <div id="bio">
+ <h1>Sophie</h1>
+ <dl><dt>Ta feuille préférée : </dt><dd>Celle du Ginkgo Biloba. </dd></dl>
+ <dl><dt>Ta maison à Poudlard : </dt><dd>Poufsouffle ! “Si à Poufsouffle vous allez / Comme eux vous s'rez juste et loyal / Ceux de Poufsouffle aiment travailler / Et leur patience est proverbiale.” </dd></dl>
+ <dl><dt>Un compositeur de prédilection : </dt><dd>Deux ! Beethoven et Ravel. </dd></dl>
+ <dl><dt>Une œuvre qui te bouleverse : </dt><dd>Le 14e quatuor de Beethoven. </dd></dl>
+ <dl><dt>Tes loisirs : </dt><dd>La lecture, le cinéma, la cuisine et les discussions au coin du feu… avec ou sans feu. </dd></dl>
+ <dl><dt>Un souvenir marquant : </dt><dd>Un concert du quatuor Tetzlaff à la Philharmonie de Paris qui interprétait le 11eme quatuor de Chostakovitch. Hypnotisant ! </dd></dl>
+ <dl><dt>Une ville : </dt><dd>Barcelone pour l'univers fantastique de Gaudí. </dd></dl>
+ <dl><dt>Des livres préférés : </dt><dd>La saga Ellana de Pierre Bottero, les aventures d’une jeune femme éprise de liberté. Les Frères Karamazov de Dostoïevski et la série Malaussène de Daniel Pennac, la vie d’une famille peu conventionnelle. </dd></dl>
+ <dl><dt>Des films qui te parlent : </dt><dd>Le goût des merveilles d'Éric Besnard pour la douceur, Le brio de Ivan Attal pour la beauté de l'enseignement. </dd></dl>
+ <dl><dt>Ce qui vous rassemble : </dt><dd>Un bon repas et une partie de tarot ! </dd></dl>
+ <dl><dt>Un rêve : </dt><dd>Partir avec le quatuor en tournée dans les petites villes de France pour rencontrer les gens, partager notre musique… et à 2 tandems !! </dd></dl>
+ <dl><dt>Quel est ton parcours : </dt>J'ai commencé le violon à 7 ans, après avoir été bouleversée par un disque de Christian Ferras interprétant le concerto de Sibelius. J’ai ensuite été accompagnée par trois grands pédagogues à qui je dois mon esthétique musicale : <dd>Christophe Poiget, Roland Daugareil et Luc-Marie Aguera. </dd></dl>
+ </div>
+ <div id="photo">
+ <img src="images/sophie/portrait.png">
+ </div>
+</main>
diff --git a/vlad.sh b/sophie.sh
index 8eed7fd..e50edb7 100644
--- a/vlad.sh
+++ b/sophie.sh
@@ -1,4 +1,4 @@
-title=Vlad
+title=Sophie
stylesheets=membre
transforms=("$(transform-li-dropdown-current-a quatuor)"
- "$(transform-li-current-a vlad)")
+ "$(transform-li-current-a sophie)")
diff --git a/stylesheets/commun.css b/stylesheets/commun.css
index a27a044..60c2ea6 100644
--- a/stylesheets/commun.css
+++ b/stylesheets/commun.css
@@ -2,7 +2,7 @@ body {
--gold: #E4B63A;
margin: 0;
- background-color: #deffe3;
+ background-color: white;
font-family: 'Open Sans', sans-serif;
}
diff --git a/stylesheets/membre.css b/stylesheets/membre.css
index 86d370b..adf11f4 100644
--- a/stylesheets/membre.css
+++ b/stylesheets/membre.css
@@ -1,26 +1,34 @@
main {
display: grid;
grid-template-columns: 60% 40%;
- padding-right: 4%;
+ align-items: center;
+ justify-self: center;
+ width: 80%;
}
-main > div {
- padding: 2%;
+#bio {
+ justify-self: center;
}
-#bio dl {
- display: grid;
- grid-template-columns: 1fr 2fr;
- align-items: center;
+#bio dt, #bio dd {
+ display: inline;
}
-#photo {
- height: 90%;
- align-self: center;
+#bio dt {
+ font-weight: bold;
+}
+
+#bio dd {
+ margin-left: 0;
+}
+
+#bio dl {
+ margin-top: 0.2em;
+ margin-bottom: 0.2em;
}
#photo img {
width: 100%;
height: 100%;
- object-fit: cover;
+ object-fit: contain;
}
diff --git a/stylesheets/quatuor.css b/stylesheets/quatuor.css
index f72c9af..05fbf4c 100644
--- a/stylesheets/quatuor.css
+++ b/stylesheets/quatuor.css
@@ -1,41 +1,23 @@
@media (min-width: 40em) {
main {
- display: flex;
- }
-
- main div {
- padding: 2%;
+ width: 80%;
+ justify-self: center;
}
main #photos {
display: grid;
- grid-template-columns: 1fr 1fr;
- grid-template-rows: 1fr 1fr;
-
- position: sticky;
- top: 0;
- max-height: 80vh;
+ grid-template-columns: repeat(4, auto);
+ justify-content: space-around;
+ width: 100%;
}
#photos > * {
- position: relative;
- width: 6em;
height: 100%;
- background-color: #ddd; /* Workaround for chromium bug#377847. */
- border-color: #ddd;
- border-width: 0.3em;
- border-style: solid;
- border-radius: 0.3em;
- overflow: hidden;
}
#photos img.portrait {
- position: absolute;
- width: 100%;
- height: 100%;
- object-fit: cover;
- object-position: center;
- filter: grayscale(1);
+ height: 60vh;
+ filter: grayscale(0.5);
transition: filter 1s, transform 1s;
}
@@ -43,28 +25,6 @@
filter: none;
transform: scale(1.05);
}
-
- #photos > *:nth-of-type(1) {
- top: -0.4em;
- }
-
- #photos > *:nth-of-type(2) {
- left: -1.6em;
- top: 1.2em;
- }
-
- #photos > *:nth-of-type(3) {
- left: 1.6em;
- top: -1.2em;
- }
-
- #photos > *:nth-of-type(4) {
- top: 0.4em;
- }
-
- #bio > *:first-child {
- margin-top: 0;
- }
}
@media (max-width: 40em) {
diff --git a/template.html b/template.html
index 2fa0231..6065aff 100644
--- a/template.html
+++ b/template.html
@@ -31,10 +31,10 @@
<ol>
<li class="dropdown"><a href="quatuor.html">le quatuor</a>
<ul>
- <li><a href="vlad.html">Vlad</a></li>
- <li><a href="garet.html">Garet</a></li>
- <li><a href="ivan.html">Ivan</a></li>
- <li><a href="sofia.html">Sofia</a></li>
+ <li><a href="sophie.html">Sophie</a></li>
+ <li><a href="david.html">David</a></li>
+ <li><a href="hervé.html">Hervé</a></li>
+ <li><a href="enguerrand.html">Enguerrand</a></li>
</ul>
</li>
<li><a href="actualités.html">actualités</a></li>
diff --git a/vlad.html b/vlad.html
deleted file mode 100644
index 0626153..0000000
--- a/vlad.html
+++ /dev/null
@@ -1,18 +0,0 @@
-<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>