11/01/230- 13h

recette2
cherif 2023-01-11 13:01:31 +01:00
parent 1ba188e230
commit 25dbe29dd3
3 changed files with 441 additions and 146 deletions

View File

@ -567,7 +567,7 @@ const DisplayDetailClass_new_v2 = (props) => {
<div style={{ "display": "flex", "flexDirection": "column", }}> <div style={{ "display": "flex", "flexDirection": "column", }}>
<div className="displaydetailclass_new_v2" style={{ <div className="displaydetailclass_new_v2" style={{
"background": "#F7F7F7", "height": "300vh", "background": "#F7F7F7", "height": "530vh",
"width": "100%", "display": "flex", "flexDirection": "column", "width": "100%", "display": "flex", "flexDirection": "column",
}}> }}>
@ -584,44 +584,44 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="mob_img"> <div className="mob_img">
{DetailTraining.img_url && String(DetailTraining.img_url).length > 0 && {DetailTraining.img_url && String(DetailTraining.img_url).length > 0 &&
<img src={`${DetailTraining.img_url}`} className="training_img" />} <img src={`${DetailTraining.img_url}`} className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
!DetailTraining.metier && <img src={img_met_autre} alt="autre" className="training_img" />} !DetailTraining.metier && <img src={img_met_autre} alt="autre" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img" />} <img src={img_met_program} alt="informatique" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img" />} <img src={img_met_graphisme} alt="graphisme" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img" />} <img src={img_met_management} alt="management" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img" />} <img src={img_met_digital} alt="digital" className="mob_training_img" />}
{(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) && {(!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0) &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img" />} <img src={img_met_bureautic} alt="office" className="mob_training_img" />}
{!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img" />} <img src={img_met_rh} alt="ressources humaines" className="mob_training_img" />}
{!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img" />} <img src={img_met_vente} alt="vente" className="mob_training_img" />}
{!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 && {!DetailTraining.img_url || String(DetailTraining.img_url).length <= 0 &&
DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") && DetailTraining.metier && String(DetailTraining.metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img" />} <img src={img_met_dev_perso} alt="developpement personnel" className="mob_training_img" />}
@ -639,23 +639,23 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="mob_block_content_title"> <div className="mob_block_content_title">
{DetailTraining["title"]} {DetailTraining["title"]}
</div> </div>
<div className="mob_tag_cpf">
</div> <div className="mob_tag_cpf_txt">
{DetailTraining["cpf"] && String(DetailTraining["cpf"]) === "1" &&
"Éligible au CPF"}
<div className="mob_tag_cpf"> {!DetailTraining["cpf"] || String(DetailTraining["cpf"]) !== "1" &&
"NON Éligible au CPF"}
</div>
<div className="mob_tag_cpf_txt">
{DetailTraining["cpf"] && String(DetailTraining["cpf"]) === "1" &&
"Éligible au CPF"}
{!DetailTraining["cpf"] || String(DetailTraining["cpf"]) !== "1" &&
"NON Éligible au CPF"}
</div> </div>
</div> </div>
<div className="mob_price"> <div className="mob_price">
{String(DetailTraining["price"])} HT {String(DetailTraining["price"])} HT
</div> </div>
@ -696,11 +696,29 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="mob_caracteristic_list_title_desc"> <div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title"> <div className="mob_caracteristic_list_title_desc_title">
Lieu : A Distance :
</div> </div>
<div className="mob_caracteristic_list_title_desc_desc"> <div className="mob_caracteristic_list_title_desc_desc">
À distance xx ??? {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && " Oui "}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "0" && " Non "}
</div>
</div>
</li>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Présentiel :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && " Oui "}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "0" && " Non "}
</div> </div>
@ -725,13 +743,88 @@ const DisplayDetailClass_new_v2 = (props) => {
</li> </li>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Certification :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining["certif"] && String(DetailTraining["certif"]) !== String("1") && " Non "
}
{DetailTraining["certif"] && String(DetailTraining["certif"]) === String("1") && " Oui "
}
</div>
</div>
</li>
<li>
<div className="mob_caracteristic_list_title_desc">
<div className="mob_caracteristic_list_title_desc_title">
Support :
</div>
<div className="mob_caracteristic_list_title_desc_desc">
{DetailTraining["support"] && <nav> {DetailTraining["support"]} </nav>}
{!DetailTraining["support"] && "Non précisé"}
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</div> </div>
<div className="mob_block_social_icon">
<div className="mob_block_social_icon_RS">
<SocialIcon network="facebook" className="mob_social_icone_SocialIcon" />
</div>
<div className="mob_block_social_icon_RS">
<SocialIcon network="linkedin" className="mob_social_icone_SocialIcon" />
</div>
<div className="mob_block_social_icon_RS">
<SocialIcon network="twitter" className="mob_social_icone_SocialIcon" />
</div>
</div>
<div className="mob_block_organisme_ftion">
<div className="mob_block_organisme_ftion_orga">
Organisme de formation :
</div>
<div className="mob_block_organisme_ftion_link">
MySyTraining.com
</div>
</div>
<div className="mob_info_page"> <div className="mob_info_page">
<div className="mob_info_page_title_desc"> <div className="mob_info_page_title_desc">
@ -747,36 +840,39 @@ const DisplayDetailClass_new_v2 = (props) => {
</div> </div>
<div className="mob_info_page_title_desc">
<div className="mob_info_page_title_desc_title">
Les Sessions
</div>
<div className="mob_info_page_title_desc_desc">
<ul style={{ "width": "100%" }}>
{GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => ( {GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
<li style={{ "height": "2.8rem" }}> <div className="mob_info_page_title_desc">
{(JSON.parse(formation).distantiel) === "1" && <nav> <div className="mob_info_page_title_desc_title">
{(JSON.parse(formation).date_debut).substring(0, 10)} au Les Sessions
{(JSON.parse(formation).date_fin).substring(0, 10)} A Distance </nav>} </div>
{(JSON.parse(formation).presentiel) === "1" && <nav> {(JSON.parse(formation).date_debut).substring(0, 10)} au {(JSON.parse(formation).date_fin).substring(0, 10)} En Présentiel - {(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)} </nav>}
<div className="mob_info_page_title_desc_desc">
<ul style={{ "width": "100%" }}>
</li>
))} {GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => (
<li style={{ "height": "2.8rem" }}>
</ul> {(JSON.parse(formation).distantiel) === "1" && <nav>
</div> {(JSON.parse(formation).date_debut).substring(0, 10)} au
{(JSON.parse(formation).date_fin).substring(0, 10)} A Distance </nav>}
{(JSON.parse(formation).presentiel) === "1" && <nav> {(JSON.parse(formation).date_debut).substring(0, 10)} au {(JSON.parse(formation).date_fin).substring(0, 10)} En Présentiel - {(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)} </nav>}
</div> </li>
))}
</ul>
</div>
</div>}
<div className="mob_info_page_title_desc"> <div className="mob_info_page_title_desc">
@ -791,6 +887,23 @@ const DisplayDetailClass_new_v2 = (props) => {
</div> </div>
<div className="mob_info_page_title_desc_long_txt">
<div className="mob_info_page_title_desc_title">
Programme
</div>
<div className="mob_info_page_title_desc_desc">
{parse(String(DetailTraining["programme"]))}
</div>
</div>
</div> </div>
<div className="mob_block_cross_sell_cat"> <div className="mob_block_cross_sell_cat">
@ -810,30 +923,30 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="mob_cross_sell_card_img"> <div className="mob_cross_sell_card_img">
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") && {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("it") &&
<img src={img_met_program} alt="informatique" className="training_img_crossel" />} <img src={img_met_program} alt="informatique" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") && {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("graphisme") &&
<img src={img_met_graphisme} alt="graphisme" className="training_img_crossel" />} <img src={img_met_graphisme} alt="graphisme" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") && {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("management") &&
<img src={img_met_management} alt="management" className="training_img_crossel" />} <img src={img_met_management} alt="management" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") && {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("digital") &&
<img src={img_met_digital} alt="digital" className="training_img_crossel" />} <img src={img_met_digital} alt="digital" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") && {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("office") &&
<img src={img_met_bureautic} alt="office" className="training_img_crossel" />} <img src={img_met_bureautic} alt="office" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") && {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("rh") &&
<img src={img_met_rh} alt="ressources humaines" className="training_img_crossel" />} <img src={img_met_rh} alt="ressources humaines" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") && {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("vente") &&
<img src={img_met_vente} alt="vente" className="training_img_crossel" />} <img src={img_met_vente} alt="vente" className="mob_training_img_crossel" />}
{JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") && {JSON.parse(formation).metier && String(JSON.parse(formation).metier).toLocaleLowerCase() === String("dev_perso") &&
<img src={img_met_dev_perso} alt="developpement personnel" className="training_img_crossel" />} <img src={img_met_dev_perso} alt="developpement personnel" className="mob_training_img_crossel" />}
{!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="training_img_crossel" />} {!JSON.parse(formation).metier && <img src={img_met_autre} alt="autre personnel" className="mob_training_img_crossel" />}
</div> </div>
@ -875,7 +988,16 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="mob_cross_sell_card_content_cat"> <div className="mob_cross_sell_card_content_cat">
<div className="mob_cross_sell_card_content_cat_bton_detail"> <div className="mob_cross_sell_card_content_cat_bton_detail" onClick={(e) => {
e.preventDefault();
//test(props.formation.external_code);
window.open(
"/Display-Detail-formation_v2/" + JSON.parse(formation).internal_url,
'_self'
);
}}>
<div className="mob_cross_sell_card_content_cat_bton_detail_txt"> <div className="mob_cross_sell_card_content_cat_bton_detail_txt">
Voir les détails Voir les détails
</div> </div>
@ -897,7 +1019,11 @@ const DisplayDetailClass_new_v2 = (props) => {
</div> </div>
<div style={{ "width": "100%", "position": "relative" }} >
<Footer />
</div>
</div> </div>
</div> </div>
@ -1063,33 +1189,35 @@ const DisplayDetailClass_new_v2 = (props) => {
</div> </div>
<div className="block_info_page_pave_title_desc"> {GetCurrentClass_result && GetCurrentClass_result.length > 0 &&
<div className="block_info_page_pave_title_desc_title"> <div className="block_info_page_pave_title_desc">
Les Sessions <div className="block_info_page_pave_title_desc_title">
Les Sessions
</div>
<div className="block_info_page_pave_title_desc_desc">
<ul style={{ "width": "100%" }}>
{GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => (
<li style={{ "height": "2.8rem" }}>
{(JSON.parse(formation).distantiel) === "1" && <nav>
{(JSON.parse(formation).date_debut).substring(0, 10)} au
{(JSON.parse(formation).date_fin).substring(0, 10)} A Distance </nav>}
{(JSON.parse(formation).presentiel) === "1" && <nav> {(JSON.parse(formation).date_debut).substring(0, 10)} au {(JSON.parse(formation).date_fin).substring(0, 10)} En Présentiel - {(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)} </nav>}
</li>
))}
</ul>
</div>
</div> </div>
<div className="block_info_page_pave_title_desc_desc"> }
<ul style={{ "width": "100%" }}>
{GetCurrentClass_result && GetCurrentClass_result.slice(0, 5).map((formation) => (
<li style={{ "height": "2.8rem" }}>
{(JSON.parse(formation).distantiel) === "1" && <nav>
{(JSON.parse(formation).date_debut).substring(0, 10)} au
{(JSON.parse(formation).date_fin).substring(0, 10)} A Distance </nav>}
{(JSON.parse(formation).presentiel) === "1" && <nav> {(JSON.parse(formation).date_debut).substring(0, 10)} au {(JSON.parse(formation).date_fin).substring(0, 10)} En Présentiel - {(JSON.parse(formation).adresse)} &nbsp;{(JSON.parse(formation).code_postal)} </nav>}
</li>
))}
</ul>
</div>
</div>
<div className="block_info_page_pave_title_desc"> <div className="block_info_page_pave_title_desc">
<div className="block_info_page_pave_title_desc_title"> <div className="block_info_page_pave_title_desc_title">
Objectif Objectif
@ -1176,11 +1304,28 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="block_sticky_info_caracteristique_list_title_desc"> <div className="block_sticky_info_caracteristique_list_title_desc">
<div className="block_sticky_info_caracteristique_list_title_desc_title"> <div className="block_sticky_info_caracteristique_list_title_desc_title">
Lieu : A Distance :
</div> </div>
<div className="block_sticky_info_caracteristique_list_title_desc_desc"> <div className="block_sticky_info_caracteristique_list_title_desc_desc">
À distance xx ??? {DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "1" && " Oui "}
{DetailTraining.presentiel && DetailTraining.presentiel.distantiel === "0" && " Non "}
</div>
</div>
</li>
<li>
<div className="block_sticky_info_caracteristique_list_title_desc">
<div className="block_sticky_info_caracteristique_list_title_desc_title">
Presentiel :
</div>
<div className="block_sticky_info_caracteristique_list_title_desc_desc">
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "1" && " Oui "}
{DetailTraining.presentiel && DetailTraining.presentiel.presentiel === "0" && " Non "}
</div> </div>
@ -1272,7 +1417,7 @@ const DisplayDetailClass_new_v2 = (props) => {
{DetailTraining["support"]} &nbsp; </div> {DetailTraining["support"]} &nbsp; </div>
} }
{!DetailTraining["certif"] && <div> {!DetailTraining["support"] && <div>
Non précisé &nbsp; </div> Non précisé &nbsp; </div>
} }
@ -1310,7 +1455,7 @@ const DisplayDetailClass_new_v2 = (props) => {
<div className="block_sticky_info_Sessions"> {GetCurrentClass_result && GetCurrentClass_result.length > 0 && <div className="block_sticky_info_Sessions">
<div className="block_sticky_info_Sessions_title"> <div className="block_sticky_info_Sessions_title">
Les sessions : Les sessions :
</div> </div>
@ -1344,7 +1489,7 @@ const DisplayDetailClass_new_v2 = (props) => {
</div> </div>
</div> </div>}
<div className="sticky_cats"> <div className="sticky_cats">
<div className="sticky_cats_buton_inscrire" onClick={Inscription_bton}> <div className="sticky_cats_buton_inscrire" onClick={Inscription_bton}>
@ -1478,7 +1623,7 @@ const DisplayDetailClass_new_v2 = (props) => {
//test(props.formation.external_code); //test(props.formation.external_code);
window.open( window.open(
"/Display-Detail-formation_v2/" + JSON.parse(formation).internal_url, "/Display-Detail-formation_v2/" + JSON.parse(formation).internal_url,
'_blank' '_self'
); );

View File

@ -421,10 +421,10 @@
.mob_img { .mob_img {
position: absolute; position: absolute;
width: 375px; width: 100%;
height: 210px; max-height: 120px;
left: 0px; left: 0px;
top: 140px; top: 90px;
} }
@ -440,8 +440,8 @@
position: absolute; position: absolute;
width: 327px; width: 327px;
height: 116px; height: 116px;
left: 24px; left: 20px;
top: 374px; top: 190px;
} }
.mob_block_content_rating { .mob_block_content_rating {
@ -466,14 +466,14 @@
} }
.mob_block_content_title { .mob_block_content_title {
width: 327px; //width: 327px;
height: 78px; height: 78px;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 22px; font-size: 20px;
line-height: 26px; line-height: 22px;
/* Deep Blue */ /* Deep Blue */
@ -491,14 +491,14 @@
position: absolute; position: absolute;
width: 277px; width: 277px;
height: 38px; height: 28px;
left: 24px; left: 24px;
top: 559px; top: 320px;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
font-weight: 800; font-weight: 700;
font-size: 32px; font-size: 22px;
line-height: 38px; line-height: 38px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -523,8 +523,8 @@
position: absolute; position: absolute;
//width: 80%; //width: 80%;
height: 37px; height: 37px;
right: 213px; //right: 213px;
top: 506px; top: 80px;
/* Beige */ /* Beige */
@ -540,7 +540,7 @@
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
font-weight: 900; font-weight: 900;
font-size: 14px; font-size: 12px;
line-height: 17px; line-height: 17px;
/* identical to box height */ /* identical to box height */
@ -572,21 +572,23 @@
width: 327px; width: 327px;
height: 120px; height: 120px;
left: 24px; left: 24px;
top: 613px; top: 360px;
} }
.mob_cats_bton_inscr { .mob_cats_bton_inscr {
/* Auto layout */ /* Auto layout */
cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 13px 26px; padding: 10px;
gap: 10px; gap: 10px;
width: 80%;
margin-left: 10%;
width: 327px; //width: 327px;
height: 56px; height: 36px;
/* Green */ /* Green */
@ -631,16 +633,18 @@
.mob_cats_bton_info { .mob_cats_bton_info {
/* Auto layout */ /* Auto layout */
cursor: pointer;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 13px 26px; padding: 10px;
gap: 10px; gap: 10px;
border: solid 1px silver;
width: 327px; //width: 327px;
height: 56px; height: 36px;
width: 80%;
margin-left: 10%;
border-radius: 8px; border-radius: 8px;
/* Inside auto layout */ /* Inside auto layout */
@ -655,7 +659,7 @@
/* Voir les détails */ /* Voir les détails */
width: 202px; //width: 202px;
height: 30px; height: 30px;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
@ -694,7 +698,7 @@
width: 90%; width: 90%;
height: 183px; height: 183px;
left: 24px; left: 24px;
top: 749px; top: 449px;
} }
.mob_caracteristic_title { .mob_caracteristic_title {
@ -731,6 +735,7 @@
.mob_caracteristic_list { .mob_caracteristic_list {
/* Auto layout */ /* Auto layout */
text-align: left;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -751,7 +756,7 @@
.mob_caracteristic_list_title_desc { .mob_caracteristic_list_title_desc {
/* Auto layout */ /* Auto layout */
text-align: left;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
@ -817,7 +822,7 @@
.mob_info_page { .mob_info_page {
/* Auto layout */ /* Auto layout */
text-align: left; text-align: left;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
@ -828,9 +833,35 @@ text-align: left;
width: 96%; width: 96%;
height: 1470px; height: 1470px;
left: 2%; left: 2%;
top: 1095px; top: 750px;
} }
.mob_info_page_title_desc_long_txt {
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 10px;
gap: 16px;
width: 100%;
//height: 285px;
/* White */
background: #FFFFFF;
border-radius: 8px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.mob_info_page_title_desc { .mob_info_page_title_desc {
/* Auto layout */ /* Auto layout */
@ -841,7 +872,7 @@ text-align: left;
gap: 16px; gap: 16px;
width: 100%; width: 100%;
height: 285px; //height: 285px;
/* White */ /* White */
@ -887,13 +918,13 @@ text-align: left;
.mob_info_page_title_desc_desc { .mob_info_page_title_desc_desc {
width: 100%; width: 100%;
height: 192px; //height: 192px;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 14px;
line-height: 24px; line-height: 20px;
/* or 150% */ /* or 150% */
font-feature-settings: 'liga' off; font-feature-settings: 'liga' off;
@ -921,10 +952,10 @@ text-align: left;
gap: 40px; gap: 40px;
position: absolute; position: absolute;
width: 327px; width: 96%;
height: 1425px; height: 1425px;
left: 24px; left: 2%;
top: 2625px; top: 3100px;
} }
.mob_block_sous_cross_sell { .mob_block_sous_cross_sell {
@ -936,7 +967,8 @@ text-align: left;
padding: 0px; padding: 0px;
gap: 16px; gap: 16px;
width: 327px; width: 90%;
margin-left: 5%;
height: 1329px; height: 1329px;
@ -948,13 +980,13 @@ text-align: left;
} }
.mob_block_sous_cross_sell_title { .mob_block_sous_cross_sell_title {
width: 327px; //width: 327px;
height: 114px; height: 114px;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 25px;
line-height: 38px; line-height: 38px;
/* Black */ /* Black */
@ -978,7 +1010,7 @@ text-align: left;
padding: 0px; padding: 0px;
gap: 16px; gap: 16px;
width: 327px; width: 100%;
height: 1199px; height: 1199px;
@ -999,13 +1031,13 @@ text-align: left;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; //align-items: center;
padding: 8px; padding: 8px;
gap: 16px; gap: 16px;
isolation: isolate; isolation: isolate;
width: 327px; width: 100%;
height: 389px; //height: 389px;
/* White */ /* White */
@ -1023,8 +1055,8 @@ text-align: left;
} }
.mob_cross_sell_card_img { .mob_cross_sell_card_img {
width: 311px; //width: 311px;
height: 90px; //height: 90px;
//background: url(.jpg); //background: url(.jpg);
border-radius: 4px; border-radius: 4px;
@ -1049,11 +1081,10 @@ text-align: left;
padding: 10px; padding: 10px;
gap: 10px; gap: 10px;
width: 138px; //width: 138px;
height: 37px; height: 37px;
right: 8px; width: 60%;
top: 8px;
/* Beige */ /* Beige */
@ -1069,8 +1100,9 @@ text-align: left;
} }
.mob_cross_sell_card_tag_cpf_txt { .mob_cross_sell_card_tag_cpf_txt {
width: 118px; //width: 118px;
height: 17px; height: 17px;
width: 100%;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
@ -1137,16 +1169,17 @@ text-align: left;
} }
.mob_cross_sell_card_content_title { .mob_cross_sell_card_content_title {
width: 310px; width: 100%;
height: 78px; text-align: left;
height: 58px;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 600;
font-size: 22px; font-size: 18px;
line-height: 26px; line-height: 22px;
font-feature-settings: 'liga' off; font-feature-settings: 'liga' off;
text-transform: uppercase;
/* Blue */ /* Blue */
color: #3E6EE3; color: #3E6EE3;
@ -1162,7 +1195,8 @@ text-align: left;
.mob_cross_sell_card_content_price { .mob_cross_sell_card_content_price {
width: 65px; width: 100%;
text-align: left;
height: 22px; height: 22px;
font-family: 'Albert Sans'; font-family: 'Albert Sans';
@ -1197,8 +1231,8 @@ text-align: left;
padding: 0px; padding: 0px;
gap: 8px; gap: 8px;
width: 310px; //width: 310px;
height: 120px; //height: 120px;
/* Inside auto layout */ /* Inside auto layout */
@ -1217,11 +1251,13 @@ text-align: left;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 13px 26px; padding: 10px;
gap: 10px; gap: 10px;
cursor: pointer;
width: 310px; width: 80%;
height: 56px; margin-left: 10%;
height: 36px;
/* Deep Blue */ /* Deep Blue */
@ -1261,6 +1297,118 @@ text-align: left;
order: 1; order: 1;
flex-grow: 0; flex-grow: 0;
} }
.mob_block_social_icon {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 0px;
gap: 16px;
position: absolute;
width: 80px;
height: 16px;
left: 24px;
top: 620px;
}
.mob_block_social_icon_RS {
width: 16px;
height: 16px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.mob_social_icone_SocialIcon {
height: 20px !important;
width: 20px !important;
}
.mob_block_organisme_ftion {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 4px;
position: absolute;
width: 190px;
height: 42px;
left: 24px;
top: 660px;
}
.mob_block_organisme_ftion_orga {
width: 190px;
height: 19px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
font-feature-settings: 'liga' off;
/* Deep Blue */
color: #0A043C;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
}
.mob_block_organisme_ftion_link {
width: 134px;
height: 19px;
font-family: 'Albert Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
text-decoration-line: underline;
font-feature-settings: 'liga' off;
/* Blue */
color: #3E6EE3;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
}
.mob_training_img {
border-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
max-width: 90%;
}
.css-ryrseu-MuiRating-root {
font-size: 1.2rem;
}
.mob_training_img_crossel {
border-radius: 10px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
width: 99%;
}
} }
@media only screen and (min-width: 601px) and (max-width: 991px) { @media only screen and (min-width: 601px) and (max-width: 991px) {

View File

@ -85,6 +85,7 @@
.ch_burger_menu { .ch_burger_menu {
left: 2px !important; left: 2px !important;
top: 3px !important; top: 3px !important;
} }
#page-wrap { #page-wrap {
@ -172,6 +173,7 @@
margin: 10px; margin: 10px;
font-size: small; font-size: small;
overflow: hidden !important; overflow: hidden !important;
border-radius: 10px;
} }
/* Morph shape necessary with bubble or elastic */ /* Morph shape necessary with bubble or elastic */