commit 42d88baa30baa72f60832ddee3b30144bdf99036
parent 84025a026a5ba791c66967fce9903bdd684f7446
Author: Kévin Le Gouguec <kevin.legouguec@gmail.com>
Date: Sat, 13 Feb 2021 18:24:43 +0100
Tweak portrait layout, add leaf backgrounds
Diffstat:
13 files changed, 16 insertions(+), 24 deletions(-)
diff --git a/david.html b/david.html
@@ -50,7 +50,7 @@
<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" style="background-color: #f90;">
- <img src="images/david/portrait.png" style="height: 100%;">
+ <div id="photo">
+ <img src="images/david/portrait.png" style="background-image: url(images/david/bg.jpg)">
</div>
</main>
diff --git a/enguerrand.html b/enguerrand.html
@@ -50,7 +50,7 @@
<dd>Pêle-mêle du violoncelle, du chant, de l'informatique, des lettres ... Entre Paris et Lyon.</dd>
</dl>
</div>
- <div id="photo" style="background-color: #f84;">
- <img src="images/enguerrand/portrait.png" style="width: 100%;">
+ <div id="photo">
+ <img src="images/enguerrand/portrait.png" style="left: 0; background-image: url(images/enguerrand/bg.jpg)">
</div>
</main>
diff --git a/hervé.html b/hervé.html
@@ -54,7 +54,7 @@
<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" style="background-color: #2f0;">
- <img src="images/hervé/portrait.png" style="height: 100%;">
+ <div id="photo">
+ <img src="images/hervé/portrait.png" style="background-image: url(images/hervé/bg.jpg)">
</div>
</main>
diff --git a/images/david/bg.jpg b/images/david/bg.jpg
Binary files differ.
diff --git a/images/david/portrait.png b/images/david/portrait.png
Binary files differ.
diff --git a/images/enguerrand/bg.jpg b/images/enguerrand/bg.jpg
Binary files differ.
diff --git a/images/enguerrand/portrait.png b/images/enguerrand/portrait.png
Binary files differ.
diff --git a/images/hervé/bg.jpg b/images/hervé/bg.jpg
Binary files differ.
diff --git a/images/hervé/portrait.png b/images/hervé/portrait.png
Binary files differ.
diff --git a/images/sophie/bg.jpg b/images/sophie/bg.jpg
Binary files differ.
diff --git a/images/sophie/portrait.png b/images/sophie/portrait.png
Binary files differ.
diff --git a/sophie.html b/sophie.html
@@ -14,7 +14,7 @@
<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" style="background-color: #ff0;">
- <img src="images/sophie/portrait.png" style="width: 100%;">
+ <div id="photo">
+ <img src="images/sophie/portrait.png" style="background-image: url(images/sophie/bg.jpg)">
</div>
</main>
diff --git a/stylesheets/membre.css b/stylesheets/membre.css
@@ -1,9 +1,12 @@
main {
display: grid;
- grid-template-columns: 60% 40%;
+ grid-template-columns: 3fr 2fr;
align-items: center;
- justify-self: center;
- width: 80%;
+}
+
+main > * {
+ margin-left: 2em;
+ margin-right: 2em;
}
#bio {
@@ -31,18 +34,7 @@ main {
margin-bottom: 0.2em;
}
-#photo {
- position: fixed;
- bottom: 0;
- right: 0;
- width: 70vh;
- height: 70vh;
- z-index: -1;
-}
-
#photo img {
- position: absolute;
- bottom: 0;
- right: 0;
- object-fit: contain;
+ width: 100%;
+ background-size: cover;
}
