diff options
| -rw-r--r-- | img/bg.jpg | bin | 0 -> 113825 bytes | |||
| -rw-r--r-- | img/camille.jpg | bin | 0 -> 36061 bytes | |||
| -rw-r--r-- | img/lucas.jpg | bin | 0 -> 207037 bytes | |||
| -rw-r--r-- | img/martial.jpg | bin | 0 -> 32224 bytes | |||
| -rw-r--r-- | img/thomas.jpg | bin | 0 -> 190679 bytes | |||
| -rw-r--r-- | img/victor.jpg | bin | 0 -> 68570 bytes | |||
| -rw-r--r-- | membres.html | 47 | ||||
| -rw-r--r-- | style.css | 104 |
8 files changed, 143 insertions, 8 deletions
diff --git a/img/bg.jpg b/img/bg.jpg Binary files differnew file mode 100644 index 0000000..7efb390 --- /dev/null +++ b/img/bg.jpg diff --git a/img/camille.jpg b/img/camille.jpg Binary files differnew file mode 100644 index 0000000..fa6ba3a --- /dev/null +++ b/img/camille.jpg diff --git a/img/lucas.jpg b/img/lucas.jpg Binary files differnew file mode 100644 index 0000000..c929481 --- /dev/null +++ b/img/lucas.jpg diff --git a/img/martial.jpg b/img/martial.jpg Binary files differnew file mode 100644 index 0000000..420d16d --- /dev/null +++ b/img/martial.jpg diff --git a/img/thomas.jpg b/img/thomas.jpg Binary files differnew file mode 100644 index 0000000..99c0b0d --- /dev/null +++ b/img/thomas.jpg diff --git a/img/victor.jpg b/img/victor.jpg Binary files differnew file mode 100644 index 0000000..1a5a98d --- /dev/null +++ b/img/victor.jpg diff --git a/membres.html b/membres.html index 2a8c876..cce7cc2 100644 --- a/membres.html +++ b/membres.html @@ -8,14 +8,47 @@ <body> <div class="content"> <h1>Membres du groupe</h1> - <ul> - <li><div class="zikos">Camille</div></li> - <li><div class="zikos">Thomas</div></li> - <li><div class="zikos">Martial</div></li> - <li><div class="zikos">Victor</div></li> - <li><div class="zikos">Lucas</div></li> - </ul> + <div class="zikos"> + <img src="img/camille.jpg"> + <div class="desc"> + <h2>Camille - Chanteuse</h2> + <p>Fan du rock des années 70/80 (Pink Floyd, Queen, Fleetwood Mac, The Who...), elle a commencé le chant il y a 5 ans.<br>Ne vous fiez pas à sa taille,(1m50 de conneries comme elle aime dire), elle sait se défendre. <p> + </div> + </div> + <div class="zikos"> + <img src="img/thomas.jpg"> + <div class="desc"> + <h2>Thomas - Guitariste</h2> + <p>Pianiste classique reconverti en guitariste à l'adolescence, il a rejoint l'aventure un mois avant le premier concert, et a su rapidement s'intégrer et maîtriser les morceaux.<br> + Jeune doyen du groupe, comme il aime s'appeler, Martial et lui forment un chouette duo alors bravo à eux !<p> + </div> + </div> + <div class="zikos"> + <img src="img/martial.jpg"> + <div class="desc"> + <h2>Martial - Guitariste</h2> + <p>C'est le benjamin de l'équipe, mais il résume assez bien l'expression "<i>la valeur n'attend pas le nombre d'années</i>".<br> + 10 ans de guitare et 5 ans de basse dans les doigts, il a rejoint le groupe en septembre 2022. C'est le créateur de ce site.<p> + </div> + </div> + <div class="zikos"> + <img src="img/victor.jpg"> + <div class="desc"> + <h2>Victor - Bassiste</h2> + <p>Mais qui est donc ce musicien qui prend la pose tel un penseur ?<br> + Il s'agit de Victor, notre bassiste. Fan de rap, punk et funk, il a commencé la basse à l'adolescence, et après une période d'arrêt, il a repris du service en rejoignant le groupe en novembre 2022.<p> + </div> + </div> + <div class="zikos"> + <img src="img/lucas.jpg"> + <div class="desc"> + <h2>Lucas - Batteur</h2> + <p>Ne vous fiez pas à son air timide, c'est un killer, d'où son surnom de maestro ;).<br> + Avec près de 20 ans de batterie derrière lui, dont 10 ans dans un groupe de jazz en MJC, il nous a rejoints en avril 2022. Lui et Camille sont d'ailleurs les derniers membres fondateurs du groupe.<p> + </div> + </div> </div> + <a href="index.html" class="return">Retour</a> </body> </html> @@ -1,5 +1,7 @@ body{ display: flex; + background: url(img/bg.jpg) no-repeat fixed; + background-size: cover; flex-direction: column; justify-content: center; text-align: center; @@ -10,7 +12,11 @@ body.index{ } .content{ + /*margin-left: 10%; + margin-right: 10%;*/ margin: auto; + border-radius: 8px; + color: #ffffff; } ul{ @@ -24,6 +30,102 @@ a{ color: inherit; } +div.zikos:nth-child(odd){ + flex-direction: row-reverse; + margin-right: 5%; +} +div.zikos:nth-child(odd) .desc{ + margin-right: 10px; +} + +div.zikos:nth-child(even){ + flex-direction: row; + margin-left: 5%; +} +div.zikos:nth-child(even) .desc{ + margin-left: 10px; +} + .zikos{ - text-align: left; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-start; + margin-bottom: 10px; + padding: 10px; + border: 3px inset #888888; + border-radius: 3px; + text-align: inherit; + background-color: #00000099; +} + +.zikos img{ + max-height: 40vh; + border-radius: 3px; +} + +.desc{ + max-width: 60vh; +} + +.return{ + margin: auto; + border-width: 3px; + border-style: solid; + border-radius: 7px; + animation-name: return; + animation-duration: 7s; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +.footer{ + color: bisque; +} + +.footer::before{ + content: "<"; +} + +.footer::after{ + content: ">"; +} + +@keyframes return{ + 0%{ + border-color: #84008c; + color: #84008c; + } + 12.5%{ + border-color: #3f0098; + color: #3f0098; + } + 25%{ + border-color: #46bebc; + color: #46bebc; + } + 37.5%{ + border-color: #2f8a00; + color: #2f8a00; + } + 50%{ + border-color: #fdff00; + color: #fdff00; + } + 62.5%{ + border-color: #f48a00; + color: #f48a00; + } + 75%{ + border-color: #f00100; + color: #f00100; + } + 87.5%{ + border-color: #f366b1; + color: #f366b1; + } + 100%{ + border-color: #84008c; + color: #84008c; + } } |
