Travail sur la page A propos au niveau du style et des textes.

a-propos.html

@@ -107,11 +107,12 @@ <h5 class="coul-accent">Je suis</h5>
     </section>
 
 
-    <section class="section-texte bg-dark">
-        <div class="content container">
+    <section class="section-texte texte-gauche bg-dark">
+        <div class="content">
             <h2 class="section-title coul-accent">la designer graphique</h2>
             <p class="coul-white">
-                Après avoir obtenu mon <b>DEC en Graphisme du Cégep du Vieux-Montréal en 2008</b>, j'ai travaillé en imprimerie
+                Après avoir obtenu mon <b>DEC en Graphisme du Cégep du Vieux-Montréal en 2008</b>, j'ai travaillé en
+                imprimerie
                 jusqu'en août 2020, période durant laquelle j'ai acquis une vaste expérience. De l'ultra-technique à
                 l'ultra-créatif, j'ai touché à presque tous les domaines : médias sociaux, papeterie corporative,
                 invitations de tous genres, matériel publicitaire, magazines, journaux, objets promotionnels, et
@@ -124,46 +125,63 @@ <h2 class="section-title coul-accent">la designer graphique</h2>
                 projets m'a permis de développer un large éventail de compétences et une grande flexibilité dans mon
                 travail.</p>
         </div>
+
+        <div class="section-texte-image">
+            <img class="shape"  src="assets/img/apropos_poly_1.svg" alt="">
+        </div>
     </section>
 
 
-    <section class="section-texte bg-accent">
-        <div class="content container">
-            <h2 class="section-title coul-light">changement de parcours, direction le web!</h2>
+
+
+    <section class="section-texte texte-droite bg-accent">
+
+        <div class="content">
+            <h2 class="section-title coul-light">changement de parcours, <br> direction le web!</h2>
             <p class="coul-white">
                 <b>En janvier 2021</b>, en pleine pandémie, j'ai décidé qu'un retour aux études était essentiel pour ma
                 carrière. Avec la vague de fermetures dans le domaine de l'imprimerie, c'était le moment parfait pour
                 revenir à mon premier amour : le web. Avant de choisir le graphisme, j'avais envisagé un DEC en
                 informatique, ce qui faisait de ce moment une opportunité idéale pour retourner à ce que je voulais
                 faire au début de ma carrière professionnelle.</p>
-
             <p class="coul-white">
                 <b>En septembre 2021</b>, j'ai donc entrepris l'AEC en Développement Web au Cégep Garneau à Québec pour
                 approfondir et acquérir de nouvelles compétences dans le domaine du web.
             </p>
-
             <p class="coul-white">
                 J'ai ensuite effectué mon <b>stage de janvier à mars 2023</b> chez Totem Web, sous la supervision de la
                 merveilleuse Andréanne Beaulieu. Cette expérience m'a permis de renforcer mes connaissances en WordPress
                 et PHP.</p>
         </div>
+
+        <div class="section-texte-image">
+            <img class="shape" src="assets/img/apropos_poly_2.svg" alt="">
+        </div>
     </section>
 
-    <section class="section-texte bg-white">
-        <div class="content container">
-            <h2 class="section-title coul-accent">je n'ai pas travaillé qu'en entreprise. Ho que non!</h2>
-            <p class="coul-dark"><b>À mon compte depuis 2009</b>, sous la bannière Mareve Design, j'ai réalisé des identités
+
+
+    <section class="section-texte texte-gauche bg-white">
+        <div class="content">
+            <h2 class="section-title coul-accent">je n'ai pas travaillé qu'en entreprise. <br>Ho que non!</h2>
+            <p class="coul-dark"><b>À mon compte depuis 2009</b>, sous la bannière Mareve Design, j'ai réalisé des
+                identités
                 visuelles pour diverses entreprises, conçu des invitations de tous genres, créé des ensembles de
                 papeterie et, surtout, je me suis spécialisée dans l'illustration de vêtements basés sur des thèmes
                 populaires. Certaines de mes œuvres ont été vendues sur des sites de vêtements en édition limitée tels
                 que Tee Fury et Ript Apparel. Actuellement, vous pouvez retrouver mes créations sur des sites de type
-                <i>print-on-demand</i> comme Tee Public. J’ai même eu la chance de voir une de mes illustrations être licenciée
+                <i>print-on-demand</i> comme Tee Public. J’ai même eu la chance de voir une de mes illustrations être
+                licenciée
                 pour la série <i>Dexter</i>, présentée par <i>Showtime.</i></p>
-
-            <p class="coul-dark"><b>En mars 2023</b>, Mareve Design a fait peau neuve et réorienté son offre de services vers
+            <p class="coul-dark"><b>En mars 2023</b>, Mareve Design a fait peau neuve et réorienté son offre de services
+                vers
                 le développement web, tout en continuant à offrir des services de graphisme intégrés pour une solution
                 complète.</p>
         </div>
+
+        <div class="section-texte-image">
+            <img class="shape"  src="assets/img/apropos_poly_3.svg" alt="">
+        </div>
     </section>
 
 
@@ -172,12 +190,10 @@ <h2 class="section-title coul-accent">je n'ai pas travaillé qu'en entreprise. H
         <div class="shapes">
             <img id="shape4" class="shape" src="assets/img/cta_poly_1.svg" alt="polygone quatre">
         </div>
-
         <div class="content">
             <div class="cta-arrow arrow">
                 <img src="assets/img/cta_arrow1.svg" alt="arrow cta">
             </div>
-
             <div class="contact-info">
                 <h2 class="section-title coul-accent">vous avez un projet en tête <br> ou des questions?</h2>
                 <p class="coul-white">N'hésitez pas à me contacter! Ensemble, nous pouvons créer quelque chose de
@@ -191,15 +207,12 @@ <h2 class="section-title coul-accent">vous avez un projet en tête <br> ou des q
 
     <footer class="bg-dark">
         <div class="footer-logo">
-
             <a href="/portfolio"><img class="logo" src="assets/img/Logo_blanc.svg" alt="logo"></a>
-
             <div class="shapes">
                 <img id="shape5" class="shape-footer" src="assets/img/header_poly_1.svg" alt="polygone cinq">
                 <img id="shape6" class="shape-footer" src="assets/img/header_poly_2.svg" alt="polygone six">
             </div>
         </div>
-
         <div class="footer-content">
             <div class="footer-menu">
                 <div class="menu">
@@ -219,9 +232,7 @@ <h2 class="section-title coul-accent">vous avez un projet en tête <br> ou des q
                             class="fa-brands fa-instagram"></i></a>
                 </div>
             </div>
-
             <div class="footer-divider"></div>
-
             <div class="footer-copyright">
                 <p>2024 © Mareve Design. Tous droits réservés.</p>
             </div>

assets/scss/style.scss

@@ -761,6 +761,31 @@ section {
     }
 }
 
+/* Page A Propos - Section Texte */
+.section-texte {
+    display: flex;
+    column-gap: 4%;
+    align-items: center;
+}
+
+/* Page A Propos - Section Texte a gauche */
+.section-texte.texte-gauche {
+    flex-direction: row;
+
+    .content {
+        padding-left: 120px;
+    }
+}
+
+/* Page A Propos - Section Texte a droite */
+.section-texte.texte-droite {
+    flex-direction: row-reverse;
+
+    .content {
+        padding-right: 120px;
+    }
+}
+
 /* ------------------------------------------------------------ */
 
 /* Page Contact */