feat: rempli les membres

author: Martial Simon <msimon_fr@hotmail.com> 2023-06-30 15:22:46 +0200
committer: Martial Simon <msimon_fr@hotmail.com> 2023-06-30 15:22:46 +0200
commit: 3a51178d310f352417c85cb650a08c9ebb28dd70 (patch)
tree: 48e9170f0eb5331120b8a14d0a7917a59f8f9e42
parent: 230199374980643768e2a25b11db7e7e771ab38a (diff)
8 files changed, 143 insertions, 8 deletions
diff --git a/img/bg.jpg b/img/bg.jpg
new file mode 100644
index 0000000..7efb390
--- /dev/null
+++ b/img/bg.jpg
diff --git a/img/camille.jpg b/img/camille.jpg
new file mode 100644
index 0000000..fa6ba3a
--- /dev/null
+++ b/img/camille.jpg
diff --git a/img/lucas.jpg b/img/lucas.jpg
new file mode 100644
index 0000000..c929481
--- /dev/null
+++ b/img/lucas.jpg
diff --git a/img/martial.jpg b/img/martial.jpg
new file mode 100644
index 0000000..420d16d
--- /dev/null
+++ b/img/martial.jpg
diff --git a/img/thomas.jpg b/img/thomas.jpg
new file mode 100644
index 0000000..99c0b0d
--- /dev/null
+++ b/img/thomas.jpg
diff --git a/img/victor.jpg b/img/victor.jpg
new 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>
 
diff --git a/style.css b/style.css
index c69935f..db4309c 100644
--- a/style.css
+++ b/style.css
@@ -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;
+	}
 }
author	Martial Simon <msimon_fr@hotmail.com>	2023-06-30 15:22:46 +0200
committer	Martial Simon <msimon_fr@hotmail.com>	2023-06-30 15:22:46 +0200
commit	3a51178d310f352417c85cb650a08c9ebb28dd70 (patch)
tree	48e9170f0eb5331120b8a14d0a7917a59f8f9e42
parent	230199374980643768e2a25b11db7e7e771ab38a (diff)