From fbee8376b4fcddf5911a6ab4f1ad73f473006cc2 Mon Sep 17 00:00:00 2001 From: cherif Date: Fri, 19 Jan 2024 13:12:58 +0100 Subject: [PATCH] 19/01/2024 - 13h --- src/App.js | 2 +- src/components/QuisSommesNous_V3.js | 114 +- src/styles/components/_quisommesnous_v3.scss | 1601 +++++++++++++++++- 3 files changed, 1638 insertions(+), 79 deletions(-) diff --git a/src/App.js b/src/App.js index 099d957..36d3f52 100644 --- a/src/App.js +++ b/src/App.js @@ -92,7 +92,7 @@ function App() { - + diff --git a/src/components/QuisSommesNous_V3.js b/src/components/QuisSommesNous_V3.js index 6a32c54..6cc1ff3 100644 --- a/src/components/QuisSommesNous_V3.js +++ b/src/components/QuisSommesNous_V3.js @@ -66,13 +66,14 @@ const QuiSommesNous_v3 = () => {
+
-
+
@@ -92,47 +93,79 @@ const QuiSommesNous_v3 = () => {

- MySy Training Gestion administrative + MySy Training Gestion administrative
Gestion Administrative
- +
- MySy Training E-Learning LMS + MySy Training E-Learning LMS

E-Learning
- +

- MySy Training gestion relation client CRM + MySy Training gestion relation client CRM
Relation Client (CRM)
- +
- Nous conseillons, accompagnons nos clients dans la structuration , l’audit et l’organisation de leurs processus et outils. Avec une équipe d’une dizaine de personnes, nous développons des solutions axées sur l’efficacité et le gain de productivité de nos clients, sans oublier la sécurisation de leurs systèmes. + Nous conseillons, accompagnons nos clients dans  la structuration  , l’ audit  et l’ organisation  de leurs processus et outils . Avec une équipe d’une dizaine de personnes, nous développons des solutions axées sur l’efficacité et le gain de productivité de nos clients, sans oublier la sécurisation de leurs systèmes.
+
 
-
- MySy Training Gestion administrative +
+ MySy Training Gestion administrative
@@ -142,8 +175,8 @@ const QuiSommesNous_v3 = () => { GESTION
-
- MySy Gestion Administrative +
+ Gestion Administrative
@@ -157,11 +190,12 @@ const QuiSommesNous_v3 = () => {
-
+
 
+
-
- MySy Training E-Learning LMS +
+ MySy Training E-Learning LMS
@@ -171,8 +205,8 @@ const QuiSommesNous_v3 = () => { E-LEARNING
-
- MySy E-Learning (LMS) +
+ E-Learning (LMS)
@@ -185,11 +219,12 @@ const QuiSommesNous_v3 = () => {
+
 
-
- MySy Training gestion relation client CRM +
+ MySy Training gestion relation client CRM
@@ -200,7 +235,7 @@ const QuiSommesNous_v3 = () => {
- MySy Gestion Relation Client + Gestion Relation Client
@@ -406,7 +441,7 @@ const QuiSommesNous_v3 = () => {
-
+
Le catalogue de formation
@@ -427,8 +462,15 @@ const QuiSommesNous_v3 = () => {
-
+
+
+
+ Le catalogue de formation +
+ + +
{
-
+
Les sessions de formation
@@ -464,8 +506,17 @@ const QuiSommesNous_v3 = () => {
-
+
+ +
+
+
+ Les sessions de formation +
+ +
+
{
-
+
Les séquences de Formation
@@ -501,8 +552,15 @@ const QuiSommesNous_v3 = () => {
-
+
+ +
+
+ Les séquences de Formation +
+ +
{

- + - +
MySy Training Technology
diff --git a/src/styles/components/_quisommesnous_v3.scss b/src/styles/components/_quisommesnous_v3.scss index bd9fef6..e6b73d7 100644 --- a/src/styles/components/_quisommesnous_v3.scss +++ b/src/styles/components/_quisommesnous_v3.scss @@ -28,7 +28,7 @@ } .div_carte { - width: 95%; + width: 100%; } .div_adresse { @@ -452,6 +452,501 @@ display: none; } + .image_illustration { + width: 100%; + } + + + // ------------ + // debut iciii + + .div_mobile_v3 { + position: absolute; + top: 5rem; + z-index: 1; + width: 100%; + //background: #104277; + height: 4000px; + } + + .main_frame { + width: 100%; + height: 8007px; + background: var(--Light-Grey, #FCFCFC); + + } + + + .Background-header { + width: 100%; + height: 30rem; + flex-shrink: 0; + //opacity: 0.5; + background: var(--Beige, #FFF5DA); + padding: 20px; + } + + + .Title { + display: block; + flex-direction: column; + align-items: center; + color: #0A043C; + width: Hug (319px); + height: Hug (80px); + top: 200px; + margin-left: auto; + margin-right: auto; + //position: fixed; + width: 100%; + } + + .Title_txt1 { + color: var(--Deep-Blue, #0A043C); + text-align: center; + font-family: Albert Sans; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + /* 125% */ + text-transform: uppercase; + width: 169px; + height: 20px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + letter-spacing: 2px; + + } + + .Title_txt2 { + color: var(--Green, #20BFA9); + text-align: center; + font-family: Albert Sans; + font-size: 40px; + font-style: normal; + //font-weight: 700; + line-height: 60px; + /* 120% */ + letter-spacing: -1px; + width: 319px; + height: 60px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + top: 15rem; + + } + + .text_seul_1 { + + color: var(--Deep-Blue, #0A043C); + text-align: center; + font-family: Albert Sans; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; + height: 44px; + top: 20rem; + width: 90%; + margin-right: auto; + letter-spacing: 2px; + height: 8rem; + margin-top: 1rem; + margin-left: auto; + margin-right: auto; + } + + .text_activite_head { + width: 100%; + height: 50px; + font-family: Albert Sans; + font-size: 18px; + font-weight: 600; + line-height: 32px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + letter-spacing: 1px; + margin-bottom: 1rem; + + } + + .image_activite_head { + width: 100%; + } + + .image_activite_detail { + display: none; + } + + .bton_en_savoir_plus_header { + margin-top: 1rem; + width: 100%; + height: 56px; + + padding: 13px, 26px, 13px, 26px; + border-radius: 8px; + border: 1px; + gap: 10px; + + background: white; + border: 1px solid #0A043C; + color: #0A043C; + font-family: Albert Sans; + font-size: 16px; + font-weight: 600; + line-height: 30px; + letter-spacing: 0px; + text-align: center; + } + + + + + // ici 2 + .parent { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: repeat(3, 1fr); + grid-column-gap: 11px; + grid-row-gap: 13px; + + padding: 1rem; + margin-bottom: 2rem; + } + + .div1 { + grid-area: 1 / 1 / 2 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div2 { + grid-area: 2 / 1 / 3 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div3 { + grid-area: 3 / 1 / 4 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .text_nous_conseillons { + width: 90%; + margin-left: auto; + margin-right: auto; + font-family: Albert Sans; + font-size: medium; + font-weight: normal; + line-height: 28px; + letter-spacing: 0px; + text-align: justify; + color: #0A043C; + letter-spacing: 1px; + margin-bottom: 3rem; + } + + + + .content_gestion_admin { + width: 95%; + margin-left: auto; + margin-right: auto; + height: 400px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_admin_img { + display: none; + } + + .content_gestion_admin_txt { + z-index: 9; + width: 100%; + height: 400px; + position: absolute; + top: 10px; + left: 0; + + background: #FFF5DA; + padding-top: 3rem; + padding: 5px; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + .detail_content_text_head_1 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: center; + color: #3E6EE3; + padding-bottom: 1rem; + letter-spacing: 1px; + } + + .detail_content_text_head_2 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 500; + line-height: 40px; + letter-spacing: 1px; + text-align: center; + color: #0A043C; + padding-bottom: 1rem; + text-transform: uppercase; + } + + .detail_content_text_head_3 { + + font-family: Albert Sans; + font-size: small; + font-weight: normal; + line-height: 22px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 1.5rem; + letter-spacing: 1px; + text-align: justify; + width: 95%; + + } + + + .detail_content_text_head_3_gauche { + + font-family: Albert Sans; + font-size: small; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + letter-spacing: 1px; + text-align: justify; + width: 95%; + + } + + .content_gestion_elearning { + width: 95%; + margin-left: auto; + margin-right: auto; + height: 400px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_elearning_img { + display: none; + } + + .content_gestion_elearning_txt { + z-index: 9; + width: 100%; + height: 400px; + position: absolute; + top: 10px; + left: 0; + background: #FFF5DA; + padding-top: 3rem; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + padding: 5px; + } + + + .fonctionalite_header { + + font-family: Albert Sans; + font-size: 24px; + font-weight: 700; + line-height: 40px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + + letter-spacing: 1px; + } + + + .tick_fonctionalite { + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + letter-spacing: 1px; + text-align: left; + padding-left: 1rem; + color: #0A043C; + width: 100%; + height: 2rem; + padding-right: 10px; + text-align: justify; + } + + .tick_fonctionalite_tick { + width: 5%; + float: left; + height: 2rem; + } + + .tick_fonctionalite_txt { + width: 95%; + float: left; + height: 4rem; + padding-left: 10px; + line-height: 1rem; + } + + + .video_titre { + font-family: Albert Sans; + font-size: 18px; + font-weight: 600; + letter-spacing: 0em; + text-align: left; + // margin-top: 5rem; + color: #0A043C; + margin-left: 1rem; + padding: 10px; + + } + + .pave_video_gauche { + display: none; + + } + + .pave_video_droite { + width: 100%; + float: right; + + } + + + .pave_video { + box-shadow: 0px 4px 54px 0px rgba(114, 92, 92, 0.19); + width: 90%; + margin-left: auto; + margin-right: auto; + height: 30rem; + margin-bottom: 1rem; + padding-top: 2rem; + } + + .video_sous_titre { + font-family: Albert Sans; + font-size: 32px; + font-weight: 700; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-left: 1rem; + padding: 10px; + + } + + .video_mp4 { + // width: 860px; + //height: 520px; + } + + + .contactez_nous_new { + + // width: 100%; + text-align: center; + padding: 0; + border: 0px; + font-weight: bold; + font-size: small; + color: white; + padding-top: 5px; + + + font-family: Albert Sans; + font-size: 16px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + + } + + + .contactez_nous_titre { + // width: 392px; + //height: 40px; + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 30px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-bottom: 1rem; + margin-top: 1rem; + + } + + .contactez_nous_info { + //width: 392px; + //height: 28px; + + + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + line-height: 26px; + letter-spacing: 0em; + text-align: left; + + } + + .div_adresse_new { + padding-left: 2rem; + float: left; + width: 100%; + + } + + .image_illustration { + width: 100%; + height: 15rem; + } + + .div_mobile_v3_debut { + margin-top: -27rem; + } + } @media only screen and (min-width: 601px) and (max-width: 991px) { @@ -468,7 +963,7 @@ } .div_carte { - width: 70%; + width: 60%; float: left; } @@ -916,6 +1411,522 @@ text-align: justify; padding-left: 2rem; } + + // ------------ + // debut iciii + + .div_mobile_v3 { + position: absolute; + top: 8rem; + z-index: 1; + width: 100%; + //background: #104277; + height: 4000px; + } + + .main_frame { + width: 100%; + height: 8007px; + background: var(--Light-Grey, #FCFCFC); + + } + + + .Background-header { + width: 100%; + height: 30rem; + flex-shrink: 0; + //opacity: 0.5; + background: var(--Beige, #FFF5DA); + padding: 20px; + } + + + .Title { + display: block; + flex-direction: column; + align-items: center; + color: #0A043C; + width: Hug (319px); + height: Hug (80px); + top: 200px; + margin-left: auto; + margin-right: auto; + //position: fixed; + width: 100%; + } + + .Title_txt1 { + color: var(--Deep-Blue, #0A043C); + text-align: center; + font-family: Albert Sans; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + /* 125% */ + text-transform: uppercase; + width: 169px; + height: 20px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + letter-spacing: 2px; + + } + + .Title_txt2 { + color: var(--Green, #20BFA9); + text-align: center; + font-family: Albert Sans; + font-size: 40px; + font-style: normal; + //font-weight: 700; + line-height: 60px; + /* 120% */ + letter-spacing: -1px; + width: 319px; + height: 60px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + top: 15rem; + + } + + .text_seul_1 { + + color: var(--Deep-Blue, #0A043C); + text-align: center; + font-family: Albert Sans; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; + /* 157.143% */ + + height: 44px; + top: 20rem; + + //position: fixed; + width: 80%; + margin-left: 10%; + margin-right: auto; + letter-spacing: 2px; + } + + .text_activite_head { + width: 100%; + height: 50px; + font-family: Albert Sans; + font-size: 18px; + font-weight: 600; + line-height: 32px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + letter-spacing: 1px; + margin-bottom: 1rem; + + } + + .image_activite_head { + //height: 22rem; + width: 100%; + } + + + .image_activite_detail { + //height: 22rem; + width: 100%; + } + + .bton_en_savoir_plus_header { + margin-top: 1rem; + width: 100%; + height: 56px; + + padding: 13px, 26px, 13px, 26px; + border-radius: 8px; + border: 1px; + gap: 10px; + + background: white; + border: 1px solid #0A043C; + color: #0A043C; + font-family: Albert Sans; + font-size: 16px; + font-weight: 600; + line-height: 30px; + letter-spacing: 0px; + text-align: center; + } + + + + + // ici 2 + .parent { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 25px; + grid-row-gap: 5px; + margin: 2rem; + padding: 1rem; + margin-bottom: 3rem; + } + + .div1 { + grid-area: 1 / 1 / 2 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div2 { + grid-area: 1 / 2 / 2 / 3; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div3 { + grid-area: 1 / 3 / 2 / 4; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .text_nous_conseillons { + width: 80%; + margin-left: auto; + margin-right: auto; + + font-family: Albert Sans; + font-size: 20px; + font-weight: normal; + line-height: 32px; + letter-spacing: 0px; + text-align: center; + //position: fixed; + color: #0A043C; + letter-spacing: 1px; + margin-bottom: 3rem; + } + + + + .content_gestion_admin { + width: 80%; + margin-left: auto; + margin-right: auto; + height: 500px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_admin_img { + z-index: 10; + width: 40%; + height: 400px; + position: absolute; + top: 0; + left: 10px; + margin-top: 50px; + background: white; + box-shadow: 50px 50px 80px 15px #1E1E1E0A; + border-radius: 15px; + } + + .content_gestion_admin_txt { + z-index: 9; + width: 80%; + height: 480px; + position: absolute; + top: 10px; + left: 0; + margin-left: 19%; + background: #FFF5DA; + padding-top: 3rem; + padding-left: 25%; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + .detail_content_text_head_1 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + padding-bottom: 2rem; + letter-spacing: 1px; + } + + .detail_content_text_head_2 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 500; + line-height: 40px; + letter-spacing: 1px; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + text-transform: uppercase; + } + + .detail_content_text_head_3 { + + font-family: Albert Sans; + font-size: 16px; + font-weight: normal; + line-height: 22px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 1.5rem; + letter-spacing: 1px; + text-align: justify; + width: 95%; + + } + + + .detail_content_text_head_3_gauche { + + font-family: Albert Sans; + font-size: 16px; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + letter-spacing: 1px; + text-align: justify; + width: 70%; + + } + + .content_gestion_elearning { + width: 80%; + margin-left: auto; + margin-right: auto; + height: 500px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_elearning_img { + z-index: 10; + width: 40%; + height: 400px; + position: absolute; + top: 0; + right: 0px; + margin-top: 50px; + background: white; + box-shadow: 50px 50px 80px 15px #1E1E1E0A; + border-radius: 15px; + } + + .content_gestion_elearning_txt { + z-index: 9; + width: 80%; + height: 480px; + position: absolute; + top: 10px; + left: 0; + margin-right: 19%; + background: #FFF5DA; + padding-top: 3rem; + padding-left: 5%; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + + .fonctionalite_header { + + font-family: Albert Sans; + font-size: 28px; + font-weight: 700; + line-height: 40px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + margin-left: auto; + margin-right: auto; + margin-top: 3rem; + margin-bottom: 2rem; + letter-spacing: 1px; + } + + + .tick_fonctionalite { + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + letter-spacing: 1px; + text-align: left; + padding-left: 1rem; + color: #0A043C; + width: 100%; + height: 2rem; + padding-right: 10px; + text-align: justify; + } + + .tick_fonctionalite_tick { + width: 5%; + float: left; + height: 2rem; + } + + .tick_fonctionalite_txt { + width: 95%; + float: left; + height: 4rem; + padding-left: 10px; + line-height: 1rem; + } + + + .video_titre { + font-family: Albert Sans; + font-size: 18px; + font-weight: 600; + letter-spacing: 0em; + text-align: left; + margin-top: 5rem; + color: #0A043C; + margin-left: 1rem; + padding: 10px; + + } + + .pave_video_gauche { + width: 30%; + float: left; + + } + + .pave_video_droite { + width: 70%; + float: right; + + } + + .pave_video { + box-shadow: 0px 4px 54px 0px rgba(114, 92, 92, 0.19); + width: 90%; + margin-left: auto; + margin-right: auto; + height: 30rem; + margin-bottom: 1rem; + padding-top: 2rem; + } + + .video_sous_titre { + font-family: Albert Sans; + font-size: 32px; + font-weight: 700; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-left: 1rem; + padding: 10px; + + } + + .video_mp4 { + // width: 860px; + //height: 520px; + } + + + .contactez_nous_new { + + // width: 100%; + text-align: center; + padding: 0; + border: 0px; + font-weight: bold; + font-size: small; + color: white; + padding-top: 5px; + + + font-family: Albert Sans; + font-size: 16px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + + } + + + .contactez_nous_titre { + // width: 392px; + //height: 40px; + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 30px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-bottom: 1rem; + margin-top: 1rem; + + } + + .contactez_nous_info { + //width: 392px; + //height: 28px; + + + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + line-height: 26px; + letter-spacing: 0em; + text-align: left; + + } + + .div_adresse_new { + padding-left: 2rem; + float: left; + width: 35%; + + } + + .image_illustration { + width: 100%; + height: 15rem; + } + + .div_mobile_v3_debut { + margin-top: -27rem; + } + } @media only screen and (min-width: 992px) and (max-width: 1199px) { @@ -932,7 +1943,7 @@ } .div_carte { - width: 70%; + width: 60%; float: left; } @@ -1388,6 +2399,523 @@ padding-left: 2rem; } + //------------- + // debut iciii + + .div_mobile_v3 { + position: absolute; + top: 7rem; + z-index: 1; + width: 100%; + //background: #104277; + height: 4000px; + } + + .main_frame { + width: 100%; + height: 8007px; + background: var(--Light-Grey, #FCFCFC); + + } + + + .Background-header { + width: 100%; + height: 30rem; + flex-shrink: 0; + //opacity: 0.5; + background: var(--Beige, #FFF5DA); + padding: 20px; + } + + + .Title { + display: block; + flex-direction: column; + align-items: center; + color: #0A043C; + width: Hug (319px); + height: Hug (80px); + top: 200px; + margin-left: auto; + margin-right: auto; + //position: fixed; + width: 100%; + } + + .Title_txt1 { + color: var(--Deep-Blue, #0A043C); + text-align: center; + font-family: Albert Sans; + font-size: 16px; + font-style: normal; + font-weight: 700; + line-height: 20px; + /* 125% */ + text-transform: uppercase; + width: 169px; + height: 20px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + letter-spacing: 2px; + + } + + .Title_txt2 { + color: var(--Green, #20BFA9); + text-align: center; + font-family: Albert Sans; + font-size: 40px; + font-style: normal; + //font-weight: 700; + line-height: 60px; + /* 120% */ + letter-spacing: -1px; + width: 319px; + height: 60px; + //position: fixed; + width: 100%; + margin-left: auto; + margin-right: auto; + top: 15rem; + + } + + .text_seul_1 { + + color: var(--Deep-Blue, #0A043C); + text-align: center; + font-family: Albert Sans; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 22px; + /* 157.143% */ + + height: 44px; + top: 20rem; + + //position: fixed; + width: 60%; + margin-left: 25%; + margin-right: auto; + letter-spacing: 2px; + } + + .text_activite_head { + width: 100%; + height: 32px; + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 32px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + letter-spacing: 1px; + margin-bottom: 1rem; + + } + + .image_activite_head { + //height: 22rem; + width: 100%; + } + + .image_activite_detail { + //height: 22rem; + width: 100%; + } + + .bton_en_savoir_plus_header { + margin-top: 1rem; + width: 100%; + height: 56px; + + padding: 13px, 26px, 13px, 26px; + border-radius: 8px; + border: 1px; + gap: 10px; + + background: white; + border: 1px solid #0A043C; + color: #0A043C; + font-family: Albert Sans; + font-size: 16px; + font-weight: 600; + line-height: 30px; + letter-spacing: 0px; + text-align: center; + } + + + + + // ici 2 + .parent { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr; + grid-column-gap: 25px; + grid-row-gap: 5px; + margin: 2rem; + padding: 1rem; + margin-bottom: 3rem; + } + + .div1 { + grid-area: 1 / 1 / 2 / 2; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div2 { + grid-area: 1 / 2 / 2 / 3; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .div3 { + grid-area: 1 / 3 / 2 / 4; + border-radius: 8px; + background: var(--White, #FFF); + box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); + padding-bottom: 2rem; + } + + .text_nous_conseillons { + width: 60%; + margin-left: auto; + margin-right: auto; + + font-family: Albert Sans; + font-size: 20px; + font-weight: normal; + line-height: 32px; + letter-spacing: 0px; + text-align: center; + //position: fixed; + color: #0A043C; + letter-spacing: 1px; + margin-bottom: 3rem; + } + + + + .content_gestion_admin { + width: 80%; + margin-left: auto; + margin-right: auto; + height: 500px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_admin_img { + z-index: 10; + width: 40%; + height: 400px; + position: absolute; + top: 0; + left: 10px; + margin-top: 50px; + background: white; + box-shadow: 50px 50px 80px 15px #1E1E1E0A; + border-radius: 15px; + } + + .content_gestion_admin_txt { + z-index: 9; + width: 80%; + height: 480px; + position: absolute; + top: 10px; + left: 0; + margin-left: 19%; + background: #FFF5DA; + padding-top: 3rem; + padding-left: 25%; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + .detail_content_text_head_1 { + + font-family: Albert Sans; + font-size: 20px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + padding-bottom: 2rem; + letter-spacing: 1px; + } + + .detail_content_text_head_2 { + + font-family: Albert Sans; + font-size: 24px; + font-weight: 500; + line-height: 48px; + letter-spacing: 1px; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + text-transform: uppercase; + } + + .detail_content_text_head_3 { + + font-family: Albert Sans; + font-size: 16px; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 1.5rem; + letter-spacing: 1px; + text-align: justify; + width: 90%; + + } + + + .detail_content_text_head_3_gauche { + + font-family: Albert Sans; + font-size: 16px; + font-weight: normal; + line-height: 24px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + padding-bottom: 2rem; + letter-spacing: 1px; + text-align: justify; + width: 60%; + + } + + .content_gestion_elearning { + width: 80%; + margin-left: auto; + margin-right: auto; + height: 500px; + position: relative; + margin-bottom: 1rem; + + } + + .content_gestion_elearning_img { + z-index: 10; + width: 40%; + height: 400px; + position: absolute; + top: 0; + right: 10px; + margin-top: 50px; + background: white; + box-shadow: 50px 50px 80px 15px #1E1E1E0A; + border-radius: 15px; + } + + .content_gestion_elearning_txt { + z-index: 9; + width: 80%; + height: 480px; + position: absolute; + top: 10px; + left: 0; + margin-right: 19%; + background: #FFF5DA; + padding-top: 3rem; + padding-left: 5%; + text-align: justify; + border-radius: 15px; + box-shadow: 50px 50px 80px 15px rgba(30, 30, 30, 0.0392156863); + } + + + .fonctionalite_header { + + height: 50px; + font-family: Albert Sans; + font-size: 30px; + font-weight: 700; + line-height: 48px; + letter-spacing: 0em; + text-align: center; + color: #0A043C; + margin-left: auto; + margin-right: auto; + margin-top: 2rem; + margin-bottom: 2rem; + letter-spacing: 1px; + } + + + .tick_fonctionalite { + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + letter-spacing: 1px; + text-align: left; + padding-left: 1rem; + color: #0A043C; + width: 100%; + height: 2rem; + padding-right: 10px; + text-align: justify; + } + + .tick_fonctionalite_tick { + width: 5%; + float: left; + height: 2rem; + } + + .tick_fonctionalite_txt { + width: 95%; + float: left; + height: 4rem; + padding-left: 10px; + line-height: 1rem; + } + + + .video_titre { + font-family: Albert Sans; + font-size: 26px; + font-weight: 600; + line-height: 48px; + letter-spacing: 0em; + text-align: left; + margin-top: 5rem; + color: #0A043C; + margin-left: 2rem; + padding: 10px; + + } + + .pave_video_gauche { + width: 30%; + float: left; + + } + + .pave_video_droite { + width: 70%; + float: right; + + } + + .pave_video { + box-shadow: 0px 4px 54px 0px rgba(114, 92, 92, 0.19); + width: 90%; + margin-left: auto; + margin-right: auto; + height: 30rem; + margin-bottom: 1rem; + padding-top: 2rem; + } + + .video_sous_titre { + font-family: Albert Sans; + font-size: 32px; + font-weight: 700; + + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-left: 4rem; + padding: 10px; + + } + + .video_mp4 { + //width: 860px; + // height: 520px; + } + + + .contactez_nous_new { + + // width: 100%; + text-align: center; + padding: 0; + border: 0px; + font-weight: bold; + font-size: small; + color: white; + padding-top: 5px; + + + font-family: Albert Sans; + font-size: 16px; + font-weight: 700; + line-height: 20px; + letter-spacing: 0em; + text-align: left; + color: #3E6EE3; + + } + + + .contactez_nous_titre { + // width: 392px; + //height: 40px; + font-family: Albert Sans; + font-size: 26px; + font-weight: 700; + line-height: 35px; + letter-spacing: 0em; + text-align: left; + color: #0A043C; + margin-bottom: 1rem; + margin-top: 1rem; + + } + + .contactez_nous_info { + //width: 392px; + //height: 28px; + + + font-family: Albert Sans; + font-size: 14px; + font-weight: 400; + line-height: 26px; + letter-spacing: 0em; + text-align: left; + + } + + .div_adresse_new { + padding-left: 2rem; + float: left; + + } + + + .image_illustration { + width: 100%; + height: 15rem; + } + + .div_mobile_v3_debut { + margin-top: -26rem; + } + } @media only screen and (min-width: 1200px) { @@ -1966,52 +3494,6 @@ letter-spacing: 2px; } - .Card1 { - width: 450px; - height: 517px; - flex-shrink: 0; - border-radius: 8px; - background: var(--White, #FFF); - box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); - - height: 517px; - top: 400px; - left: 222px; - border-radius: 8px; - //position: fixed; - - } - - .Card2 { - width: 450px; - height: 517px; - flex-shrink: 0; - border-radius: 8px; - background: var(--White, #FFF); - box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); - - height: 517px; - top: 400px; - left: 750px; - border-radius: 8px; - //position: fixed; - } - - .Card3 { - - height: 517px; - flex-shrink: 0; - border-radius: 8px; - background: var(--White, #FFF); - box-shadow: 0px 4px 54px 0px rgba(30, 30, 30, 0.08); - width: 450px; - height: 517px; - top: 400px; - left: 1280px; - border-radius: 8px; - //position: fixed; - } - .text_activite_head { width: 100%; height: 32px; @@ -2031,6 +3513,10 @@ height: 22rem; } + .image_activite_detail { + height: 22rem; + } + .bton_en_savoir_plus_header { margin-top: 1rem; width: 339px; @@ -2291,6 +3777,7 @@ float: left; height: 3rem; padding-left: 10px; + line-height: 1rem; } @@ -2308,6 +3795,17 @@ } + .pave_video_gauche { + width: 30%; + float: left; + + } + + .pave_video_droite { + width: 70%; + float: right; + + } .pave_video { box-shadow: 0px 4px 54px 0px rgba(114, 92, 92, 0.19); @@ -2323,7 +3821,7 @@ font-family: Albert Sans; font-size: 32px; font-weight: 700; - line-height: 48px; + letter-spacing: 0em; text-align: left; color: #0A043C; @@ -2396,6 +3894,9 @@ } + .div_mobile_v3_debut { + margin-top: -26rem; + } } // end media