blouse finito

assets/css/page/blouse.css

@@ -1,11 +1,41 @@
 section {
-	display: block;
 	background-color: rgba(255,255,255,0.3);
-	width: 80%;
 	max-width: 800px;
 	margin-left: auto;
 	margin-right: auto;
-	padding: 50px;
+	/*padding: 50px;*/
 	font-size: 1.2rem;
 	margin-top: 40px;
+	text-align: left;
+}
+
+
+#texte {
+	margin: 50px;
+}
+
+section ul li {
+	list-style: inside;
+}
+
+.ex_blouse {
+	display: block;
+	margin-right: auto;
+	margin-left: auto;
+	max-width: 60vw;
+}
+
+.img_blouse {
+	diplay: inline-block;
+	width: 20vw;
+	margin: 10px;
+}
+
+#photos_blouse {
+	display: block;
+	margin-right: auto;
+	margin-left: auto;
+	width: 100%;
+	margin: 0;
+	text-align: center;
 }

blouse.php

@@ -13,96 +13,73 @@ ob_start(); // Start reading html
     </div>
 
     <section>
-        <p>Salut à toi Petit Paneméen Astucieux,!</p>
-        <p>Te voilà en train de lire la partie la plus intéressante, que dis-je, la partie la plus IMPORTANTE
-            de la plaquette ! Tu as été tiré au sort pour participer aux prochains INSA Games, et pas n’importe
-            lesquels ! Cette année, une tradition ancestrale a été perpétuée : <strong>la Blouse</strong>.
-            Nous allons donc t’initier à l’art de confectionner la plus belle des blouses qui te suivra tout au long
-            de tes 5 ans (ou éventuellement plus, mais on va pas te spoiler...). Celle qui te fera peut-être remporter
-            le titre tant convoité de Vainqueur des jeux... euuuh Miss et Mister Blouse !
-            Comme tout bon tribut qui se respecte, tu viendras dès le premier jour paré de ton habit de
-            combat qui ne te servira pas seulement à être aussi badass que Katniss mais surtout à te représenter
-            toi et TA PROMO (parce que tu aimes beaucoup ta promo).</p>
-        <p>A l’INSAAAAA Touuuulouse (oups on est en train de s’égarer) tu pourras rencontrer :
-        <ul id="list-blouse">
-            <li>Les aventuriers de Koh-L’INSA en jaune et rouge (ou rouge et jaune pour ceux qui préfèrent)
-                que nous sommes.</li>
-            <li>Les sorciers que nous sommes aux couleurs des 4 maisons d’Harry Potter. (aussi connus comme tes futurs
-                grands-parrains).</li>
-            <li>Les soldats de la Guerre froide de la promo 56 en Bleu Galactique et en Rouge
-            Intersidéral.</li>
-            <li>D’autres types de spécimens qu’on te laisse le plaisir de découvrir.
+        <div id="texte">
+            <p>Cher Plante Piranha Affamée,</p>
 
-        </ul></b>
-        <p>C’est maintenant à ton tour de réaliser cette œuvre d’art, ce chef d’œuvre avec lequel tu
-            arriveras à la rentrée. Toute la semaine durant, tu devras en être vêtu, il en sera de même lors de tes
-            TP et tu ne pourras PAS déroger à la règle si tu ne veux pas t’attirer les foudres des Grands Dirigeants
-            Adoré et leurs malus.
-        <p></p>
-            Alors hop hop hop, on se retrousse les manches, on prend un fil, une aiguille et on lit
-            attentivement les lignes qui suivent car elles vont déterminer tes chances de devenir Miss ou Mister
-            Blouse.
-        </p><p>
-            Maintenant que tu as été accepté à l’Institut pour Nouveaux tributs Sans Angoisses, une tâche très
-            importante t’attend, on oublie les sorties à droite, à gauche et on se concentre sur notre véritable
-            passion : La couture !!!
-        </p>
-        <ul>
-            <li><strong>Récupère ta blouse blanche</strong> de chimie ou procures-en toi une nouvelle (jusque-là ça va).</li>
-            <li><strong>Teins là aux véritables couleurs de ton équipe</strong> (les roses on vous aime quand même), c’est-
-                à-dire, <strong>vert flamboyant si tu es <strong class="score-boo">BOOMIFLORE</strong> et violet intense pour <strong class="score-pek">PEKSUREAU</strong></strong> .</li>
-            <li>Décore ta blouse selon le thème des <strong>INSA Games</strong> et de ton équipe.</li>
-        </ul>
-        <p><strong>Mais attention ! Tu ne peux pas faire n’importe quoi, il y a des règles à respecter si tu
-        ne veux pas rester coincé à l’aéroport !</strong></p>
+           <p> Voici LE mot le plus important, que dis-je, le plus essentiel et inéluctable, le mot de la blouse. Pendant cette semaine d’immersion dans l’incroyable des INSA Bros, cette dernière est un élément indispensable. Sache que ta blouse te sera utile en TP mais aussi lors de la semaine d’accueil pour qu’on puisse reconnaître le PPA que tu es !</p>
 
+            <p>Et oui, tu as choisi de faire partie de la grande famille qu’est l’Institut Nintendo Super Athlétique de Toulouse donc tu te dois, comme les anciens combattants tels que tes parrains/marraines, de respecter la tradition ancestrale ! A savoir, concocter la plus ravissante blouse aux couleurs de ton équipe :</p>
             
-        <h3>Les 5 commandements de la Blouse :</h3>
-        <p><ul id="list-blouse">
-            <li>Uniquement <strong>de fils et d’aiguilles</strong> tu t’armeras.</li>
-            <li><strong>Par toi-même</strong> orner ta blouse tu devras, l’aide de maman, papa, mamie ou papi tu ne
-            demanderas donc pas. Eh oui, on y est tous passés, à ton tour maintenant !</li>
-            <li><strong>Pas de marqueurs ou de feutres</strong>, ils sont réservés aux Géniaux Donneurs d’Avis que nous sommes
-        pour t’octroyer bonus ou malus ainsi que des tags comme le veut la tradition.</li>
-            <li>Comme sur le schéma qui suit, et avec ces consignes, ta blouse tu décoreras :<br>
-            - Sur le <strong>devant</strong> on veut voir <Strong>ton prénom, le blason et le nom de ton bled
-            d’origine</Strong>.<br>
-            - À <strong>l’arrière</strong>, tu mettras ton <strong>surnom (en gros et bien visible) et “INSA 59” en
-            TRÈS gros</strong>, car tu aimes ta promo.<br>
-            - Quant aux espaces vides, aux poches et aux manches, il faudra les <strong>combler
-            de broderies et fantaisies</strong>, cousues sur le thème des INSA GAMES et de TON DISTRICT.</li>
-            <li>Créatif et original tu seras, <Strong>des bonus à la clé il y aura</strong>. Et bien-sûr, faire preuve
-            d’humour tu n’oublieras pas ! Et on ne le dira jamais assez …. GARE AUX
-            TRICHEURS !
-            Voilà un exemple illustratif de ta blouse après customisation, le but étant de s’en inspirer
-            mais pas de la reproduire…</li>
-        </ul></p>
-        <img src="assets/img/blouse/Blouses.png" alt="Exemple blouse" style="max-height:30rem;">
+            <ul>
+                <li> Bleu pour Boomario</li>
+                <li> Rose pour PK Peach</li>
+            </ul>
 
-        <p>Applique-toi bien, car ce sera peut-être le seul
-            titre de Miss ou Mister que tu obtiendras dans ta
-            vie (rip), au terme d’un concours épique entre les
-            meilleurs couturiers de l’arène.
-            « A la fin, il n’en restera qu’un ! » mince ça c’était
-            le thème de l’année dernière...
             <br>
-            Joyeux INSA Games, et puisse le sort t’être
-    favorable ! *sifflement du Geai moqueur*</p>
 
-        <h3>
-            Pour te motiver, voici ce que notre Miss Blouse avait fait l'année dernière :
-        </h3>
+            <p>Et oui, même si tu as mieux à faire pendant tes vacances d’été bien méritées, tu devras tout de même faire ressortir le côté artistique qui sommeille en toi. Entre deux parties de MARIO Kart tu utiliseras un fil et une aiguille pour broder TA BLOUSE ! Pour que ta blouse soit la plus topissime possible, suis bien à la lettre ces 5 commandements :</p>
 
-        <img src="assets/img/blouse/blouse_devant_maeva.jpg" alt="Blouse Maeva devant">
-        <img src="assets/img/blouse/blouse_derriere_maeva.jpg" alt="Blouse Maeva dos">
+            <p>Uniquement fils et aiguilles, tu utiliseras.</p>
 
-        <h3>
-            Et voici la blouse de notre Mister Blouse :
-        </h3>
+            <p>Par toi-même décorer ta blouse, tu devras, l’aide de maman et mamie, tu ne demanderas donc pas. Eh oui, on y est tous passés, à ton tour maintenant.</p>
 
-        <img src="assets/img/blouse/blouse_devant_nathan.jpg" alt="Blouse Nathan devant" id="reverse" onclick="reverse()">
+            <p>Pas de marqueurs ou de feutres, ils sont réservés aux Géniaux Donneurs d’Avis que nous sommes pour t'attribuer bonus ou malus ainsi que des tags comme le veut la tradition.</p>
 
-        <img src="assets/img/blouse/blouse_derriere_nathan.jpg" alt="Blouse Nathan dos">
+            <p>Décorer ta blouse, tu devras, afin de la rendre belle et unique ! Tu peux t’inspirer du schéma, mais il ne s’agit pas de le copier !</p>
+
+            <ul>
+                <li>On veut voir sur le devant de ta blouse, ton prénom, le blason et le nom de ton bled d’origine.</li>
+
+                <li>A l’arrière de ta blouse, il est indispensable de mettre ton surnom (en gros et bien visible) et “INSA 60” en très gros, car tu aimes ta promo.</li>
+
+                <li>Quant aux espaces vides, aux poches et aux manches, il faudra les combler de broderies et de fantaisies sur le thème de Mario aux couleurs de TON ÉQUIPE !</li>
+            </ul>
+
+            <img src="assets/img/blouse/exemple.png" class="ex_blouse">
+            <br>
+
+            <p>Créatif et original, tu seras, des bonus à la clé, il y aura. Et bien sûr, faire preuve d’humour, tu n’oublieras pas !</p>
+
+            <p>Et garde toujours en tête... LES TRICHEURS SERONT EMPRISONNÉS CHEZ BOWSER !</p>
+
+            <p>La blouse est un moyen de nous reconnaître entre promos, c’est un peu notre carte d’identité ! Tu devras donc teinter et décorer ta blouse aux couleurs de ton équipe : bleu ou rose, au cas où tu ne l’aurais toujours pas compris. Et qui sait, tu seras peut-être élu miss ou mister blouse !</p>
+
+            <p>Lors des différents niveaux du jeu, tu pourras croiser :</p>
+            <ul>
+                <li>Les tributs des INSA Games en violet et vert (meilleure promo de l’histoire de cette école)</li>
+
+                <li>Les aventuriers de Koh-L’INSA en jaune et rouge (aussi connus comme tes futurs grands-parrains).</li>
+
+                <li>Les sorciers aux couleurs des 4 maisons de l’INSARD</li>
+
+                <li>D’autres types de spécimens qu’on te laisse le plaisir de découvrir.</li>
+            </ul>
+
+            <br>
+
+            <p>Letsa Goo !<br>
+            Pauline et Pierre, Miss et Mister Blouse 2021</p>
+
+            <p> et sinon voici quelques exemples :</p>
+
+        </div>
+        <div id="photos_blouse">
+            <?php 
+            for($i = 1; $i<=4; $i++) {
+                echo "<img src='assets/img/blouse/blouse_".$i.".jpg' class='img_blouse'>";
+            }
+            ?>
+        </div>
     </section>
 
 </main>