meta: fresh new look for musique.html

author: Martial Simon <msimon_fr@hotmail.com> 2024-01-22 00:09:06 +0200
committer: Martial Simon <msimon_fr@hotmail.com> 2024-01-22 00:09:06 +0200
commit: f643681bbbb361f5fe074554d75f32c4e684a61f (patch)
tree: 982929c63d4468200e0f22e4757261df807deb31
parent: 2859c0acd5dd57aa52818216fa995b98f03882b8 (diff)
14 files changed, 80 insertions, 9 deletions
diff --git a/img/apx500II.png b/img/apx500II.png
new file mode 100644
index 0000000..1ee732a
--- /dev/null
+++ b/img/apx500II.png
diff --git a/img/bg.gif b/img/bg.gif
new file mode 100644
index 0000000..60366e3
--- /dev/null
+++ b/img/bg.gif
diff --git a/img/bgg.gif b/img/bgg.gif
new file mode 100644
index 0000000..a9ae7ec
--- /dev/null
+++ b/img/bgg.gif
diff --git a/img/g254.png b/img/g254.png
new file mode 100644
index 0000000..ac21319
--- /dev/null
+++ b/img/g254.png
diff --git a/img/gif_guitarman.gif b/img/gif_guitarman.gif
new file mode 100644
index 0000000..bf3d4df
--- /dev/null
+++ b/img/gif_guitarman.gif
diff --git a/img/guitar_animation2.gif b/img/guitar_animation2.gif
new file mode 100644
index 0000000..4e1db5a
--- /dev/null
+++ b/img/guitar_animation2.gif
diff --git a/img/guitarline2.gif b/img/guitarline2.gif
new file mode 100644
index 0000000..6097981
--- /dev/null
+++ b/img/guitarline2.gif
diff --git a/img/jemjr.png b/img/jemjr.png
new file mode 100644
index 0000000..346f041
--- /dev/null
+++ b/img/jemjr.png
diff --git a/img/line9.gif b/img/line9.gif
new file mode 100644
index 0000000..8c11f9c
--- /dev/null
+++ b/img/line9.gif
diff --git a/img/tmb30.png b/img/tmb30.png
new file mode 100644
index 0000000..1bc079b
--- /dev/null
+++ b/img/tmb30.png
diff --git a/img/w800.png b/img/w800.png
new file mode 100644
index 0000000..63306e7
--- /dev/null
+++ b/img/w800.png
diff --git a/img/zik.gif b/img/zik.gif
new file mode 100644
index 0000000..0090cf7
--- /dev/null
+++ b/img/zik.gif
diff --git a/musique.html b/musique.html
index e98312a..b8e5e67 100644
--- a/musique.html
+++ b/musique.html
@@ -5,23 +5,60 @@
     <link rel="stylesheet" type="text/css" href="style.css">
     <meta content="text/html; charset=utf-8" http-equiv="content-type" />
     <link rel="icon" type="favicon/ico" href="img/mii.ico">
+    <style>
+      hr.section-sep {
+        border: none;
+        height: 20px;
+        background-image: url(img/line9.gif);
+      }
+      hr.sub-sep {
+        border: none;
+        height: 58px;
+        background-image: url(img/guitarline2.gif);
+      }
+      .content {
+        background-image: url(img/bgg.gif);
+        color: lightblue;
+      }
+    </style>
 </head>
 <body>
   <a class="language" href="en/music.html">🤮🇬🇧</a>
+  <img class="gif" src="img/guitar_animation2.gif" alt="music gif" height="50px" style=" top: 100px; left: 10px;">
+  <img class="gif" src="img/gif_guitarman.gif" alt="music gif" height="50px" style="top: 60px; right: 20px;">
+  <img class="gif" src="img/zik.gif" alt="music gif" height="50px" style="top:10px; left: 10px;">
   <div class="content">
   <h1>Formation</h1>
   <p>J'ai commencé les cours de guitare et de formation musicale vers l'âge de 7 ans, et j'ai un assez bon niveau de solfège. J'ai aussi appris la basse pendant quelques années. J'ai suivi 2 ans de cours de MAO, et je suis très à l'aise avec Ableton Live.</p>
   <hr class="section-sep">
   <h1>Matos</h1>
   <h3>Instruments</h3>
-  <div class="content" style="border-color: #9DDFFF">
-  <ul style="list-style-type:none; margin:0; padding:0">
+  <div class="side-scroller">
+    <div class="content" style="border-color: #9DDFFF; display: inline-block;" height="300px">
+        <img src="img/w800.png" alt="Mooer Gtrs W800 Pearl Pink">
+        <h2>Mooer Gtrs W800 Pearl Pink</h2>
+    </div>
+    <div class="content">
+      <img src="img/jemjr.png" alt="Ibanez JemJr White">
+      <h2>Ibanez JemJr White</h2>
+  </div>
+  <div class="content">
+    <img src="img/tmb30.png" alt="Ibanez TMB30 Ivory">
+    <h2>Ibanez TMB30 Ivory</h2>
+</div>
+
+<div class="content">
+  <img src="img/g254.png" alt="Cort G254">
+  <h2>Cort G254</h2>
+</div>
+<div class="content">
+  <!-- <ul style="list-style-type:none; margin:0; padding:0">
       <li>Yamaha APX500 II</li>
-      <li>Cort G254</li>
-      <li>Ibanez JemJR</li>
-      <li>Mooer Gtrs W800</li>
-      <li>Ibanez TMB30</li>
-  </ul>
+  </ul> -->
+  <img src="img/apx500II.png" alt="Yamaha AP500 II Oriental Blue Burst">
+  <h2>Yamaha AP500 II Oriental Blue Burst</h2>
+</div>
+    
   </div>
   <hr class="sub-sep">
   <h3>Amplis / Pédales</h3>
@@ -45,10 +82,10 @@
   <p><a style="color: darkblue" class="text-link" href="https://www.facebook.com/profile.php?id=100092628580525">VisageLivre</a> <a class="text-link" style="color: #f00062" href="https://www.instagram.com/les_running_gags/">Instagram</a></p>
   <hr class="sub-sep">
   <h2>Club Musique - EPITA</h2>
-  <p>J'ai repris la présidence du club musique de l'école en première année, mais il manque de membres. À deux, on peine à faire marcher le club et à intéresser les gens. Heureusement, la nouvelle promotion a l'air motivée</p>
+  <p>Site du club : <a class="text-link" style="color: rgb(124, 246, 187)" href="https://rtfm.marcelus.net">RTFM</a></p>
   <hr class="section-sep">
   <h1>Compositions & productions</h1>
-  <p>Quand l'inspiration vient, je note ça sur un coin de papier, puis je reporte mes notes dans Guitar Pro. Je voudrais passer sur MuseScore, principalement parce que c'est un logiciel libre, mais l'utilisation est très peu intuitive. Ultimement, en fin de composition, j'enregistre tout via Ableton, puis je termine en faisant le mixage. J'ai quelques productions à mon actif, mais celle sur laquelle j'ai le plus travaillé est la BO du projet de groupe du 2è semestre. La plupart des mes productions sont trouvables sur <a class="text-link" style="color: #fa7b12" href="https://on.soundcloud.com/VmXE8">SoundCloud</a></p></div>
+  <p>Quand l'inspiration vient, je note ça sur un coin de papier, puis je reporte mes notes dans Guitar Pro. Je voudrais passer sur MuseScore, principalement parce que c'est un logiciel libre, mais l'utilisation est très peu intuitive. Ultimement, en fin de composition, j'enregistre tout via Ableton, puis je termine en faisant le mixage. J'ai quelques productions à mon actif, mais celle sur laquelle j'ai le plus travaillé est la BO du projet de groupe du 2è semestre. La plupart des mes productions sont trouvables sur <a class="text-link" style="color: #fa7b12" href="https://on.soundcloud.com/VmXE8">SoundCloud</a>.</p></div>
   <a class="footer" href="index.html">Retour</a>
 </body>
 </html>
diff --git a/style.css b/style.css
index 08d2be3..f4b6443 100644
--- a/style.css
+++ b/style.css
@@ -136,6 +136,40 @@ marquee{
 	border-top: 3px dotted rgba(0, 0, 255, 0.6);
 }
 
+.gif {
+	position: fixed;
+	opacity: 0.9;
+}
+
+.gif:hover {
+	animation-name: spin;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+}
+
+.side-scroller {
+	overflow-x: auto;
+	white-space: nowrap;
+}
+
+.side-scroller .content {
+	display: inline-block;
+	border-color: #9DDFFF;
+	width: 310px;
+	margin: 10px;
+	color: white;
+	background-image: url(img/bg.gif);
+}
+
+.side-scroller .content h2 {
+	width: 100%;
+}
+
+.side-scroller .content img {
+	width: 95%;
+}
+
 .footer{
 	/*position: fixed;
 	top: 5px;*/
author	Martial Simon <msimon_fr@hotmail.com>	2024-01-22 00:09:06 +0200
committer	Martial Simon <msimon_fr@hotmail.com>	2024-01-22 00:09:06 +0200
commit	f643681bbbb361f5fe074554d75f32c4e684a61f (patch)
tree	982929c63d4468200e0f22e4757261df807deb31
parent	2859c0acd5dd57aa52818216fa995b98f03882b8 (diff)