From d5b1de0807f483f5935bc1622e3bee86cf177c48 Mon Sep 17 00:00:00 2001 From: cherif Date: Tue, 17 Jan 2023 19:35:59 +0100 Subject: [PATCH] 17/01/2023 - 20h --- src/components/Contactez_nous.js | 13 +- src/styles/components/_sedesabonner.scss | 877 +++++++++++++++++++++++ 2 files changed, 883 insertions(+), 7 deletions(-) create mode 100644 src/styles/components/_sedesabonner.scss diff --git a/src/components/Contactez_nous.js b/src/components/Contactez_nous.js index 271fdfa..ce43078 100644 --- a/src/components/Contactez_nous.js +++ b/src/components/Contactez_nous.js @@ -12,6 +12,7 @@ import ousommesnousimg from "../mysy_img/mysy_training_technology_ici.png" import logowhite from "../mysy_img/MYSY-LOGO-WHITE.png"; import Footer from "./Fotter"; import Header from "./Header"; +import SendIcon from '@mui/icons-material/Send'; const ContactForm = () => { @@ -42,10 +43,7 @@ const ContactForm = () => { const onSubmit = async (data) => { const { name, email, subject, message } = data; - console.log('Name: ', name); - console.log('Email: ', email); - console.log('Subject: ', subject); - console.log('Message: ', message); + SendMail(); }; @@ -144,7 +142,8 @@ const ContactForm = () => {
-
 
+
 
+
Contactez-Nous
@@ -233,13 +232,13 @@ const ContactForm = () => {
+ >Envoyez le message     {} {String(myApiResponse) === String("true") &&
- Votre message a bien été envoyé. Merci. + Votre message a bien été envoyé. Merci.
} {String(myApiResponse) === String("false") &&
diff --git a/src/styles/components/_sedesabonner.scss b/src/styles/components/_sedesabonner.scss new file mode 100644 index 0000000..47b4e8d --- /dev/null +++ b/src/styles/components/_sedesabonner.scss @@ -0,0 +1,877 @@ +.Sedesabonner { + .h1_transparent { + color: transparent; + font-size: 0.1rem; + } + + .formRow { + margin-bottom: 1rem !important; + } + + @media only screen and (max-width: 600px) { + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 25px !important; + width: 25px !important; + } + } + + .div_carte { + width: 95%; + } + + .div_adresse { + width: 95%; + text-justify: auto; + } + + .nom_prenom { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + font-weight: bold; + text-align: center; + margin-bottom: 1rem; + } + + .img_gauche_taille { + max-width: 50%; + } + + .okUpdateData { + font-size: small; + color: green; + font-style: italic; + } + + .koUpdateData { + font-size: small; + color: red; + font-style: italic; + } + + .img_logo { + display: block; + height: auto; + margin-left: auto; + margin-right: auto; + max-width: 50%; + } + + .containerBox { + position: relative; + display: inline-block; + } + + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + position: fixed; + z-index: 10; + top: 0px; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + z-index: 10; + background-color: #e7f3fb; + background-image: url("../../mysy_img/MYSY-banner-compte_v2.png"); + } + + .div_mobile { + position: relative; + + top: 5rem; + z-index: 1; + width: 98%; + height: 100%; + margin: 0.3rem; + margin-left: auto; + margin-right: auto; + } + + .pieddepage { + z-index: 0; + width: 100%; + float: left; + margin-top: 5rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 20%; + float: right; + font-weight: 500; + cursor: pointer; + } + + .menuPrincipal:hover { + color: #81bc3a; + font-weight: bold; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.2rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + width: 50%; + text-align: center; + margin-left: auto; + margin-right: auto; + } + + .div_003 { + display: none; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + margin-bottom: 0.2rem; + margin-top: 0.2rem; + } + + .div_005 { + width: 95%; + margin-left: auto; + margin-right: auto; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: small; + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .titre { + width: 99%; + margin-left: 5px; + + padding-top: 10px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 30px; + line-height: 38px; + /* identical to box height */ + + text-align: center; + letter-spacing: 1px; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + .col-6 { + flex: 0 0 auto; + width: 100%; + margin-bottom: 1rem; + } + + + + } + + @media only screen and (min-width: 601px) and (max-width: 991px) { + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 25px !important; + width: 25px !important; + } + } + + .div_carte { + width: 70%; + float: left; + } + + .div_adresse { + width: 29%; + float: left; + text-align: left; + font-size: medium; + text-justify: auto; + padding-left: 0.5rem; + } + + .nom_prenom { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: small; + font-weight: bold; + text-align: center; + margin-bottom: 1rem; + } + + .img_gauche_taille { + max-width: 50%; + } + + .okUpdateData { + font-size: small; + color: green; + font-style: italic; + } + + .koUpdateData { + font-size: small; + color: red; + font-style: italic; + } + + .img_logo { + display: block; + height: auto; + margin-left: 0px; + margin-right: auto; + max-width: 30%; + } + + .containerBox { + position: relative; + display: inline-block; + } + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + position: fixed; + z-index: 10; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + width: 100%; + height: 10rem; + background-color: #e7f3fb; + z-index: 10; + background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + } + + .div_mobile { + position: absolute; + top: 8rem; + z-index: 1; + width: 100%; + } + + .pieddepage { + z-index: 0; + width: 100%; + float: left; + margin-top: 10rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 23%; + float: right; + cursor: pointer; + text-align: center; + font-size: 1rem; + border: 2px solid transparent; + } + + .menuPrincipal:hover { + color: #81bc3a; + font-weight: bold; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.2rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + float: left; + width: 50%; + text-align: left; + margin-top: 1rem; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + margin-top: 1.2rem; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + margin: 0.2rem; + } + + .div_005 { + width: 100%; + float: left; + } + + .hilightsoustitre { + background: #113459; + color: #fff; + display: block; + font-size: 1rem; + margin-bottom: 0.5rem; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 1.1rem; + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .titre { + width: 99%; + margin-left: 5px; + height: 80px; + padding-top: 10px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 30px; + line-height: 38px; + /* identical to box height */ + + text-align: center; + letter-spacing: 1px; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + } + + + } + + @media only screen and (min-width: 992px) and (max-width: 1199px) { + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 30px !important; + width: 30px !important; + } + } + + .div_carte { + width: 70%; + float: left; + } + + .div_adresse { + width: 29%; + float: left; + text-justify: auto; + padding-left: 0.5rem; + } + + .nom_prenom { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: medium; + text-align: center; + margin-bottom: 1rem; + font-weight: bold; + } + + .okUpdateData { + font-size: medium; + color: green; + font-style: italic; + } + + .koUpdateData { + font-size: medium; + color: red; + font-style: italic; + } + + .img_logo { + display: block; + height: auto; + margin-left: 0px; + margin-right: auto; + max-width: 20%; + max-height: 3rem; + } + + .containerBox { + position: relative; + display: inline-block; + } + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + position: fixed; + z-index: 10; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + width: 100%; + height: 10rem; + background-color: #e7f3fb; + z-index: 10; + background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + } + + .div_mobile { + position: absolute; + top: 8rem; + z-index: 1; + width: 100%; + } + + .pieddepage { + z-index: 0; + width: 100%; + float: left; + margin-top: 5rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 20%; + float: right; + cursor: pointer; + text-align: center; + font-size: 1rem; + border: 2px solid transparent; + } + + .menuPrincipal:hover { + color: #81bc3a; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.1rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + float: left; + width: 50%; + text-align: left; + margin-top: 1rem; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + margin-top: 1.2rem; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + margin: 0.2rem; + } + + .div_005 { + width: 100%; + float: left; + } + + .hilightsoustitre { + background: #113459; + color: #fff; + display: block; + font-size: 1rem; + margin-bottom: 0.5rem; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 1.1rem; + width: 90%; + margin-left: auto; + margin-right: auto; + } + + + .titre { + width: 99%; + margin-left: 5px; + height: 80px; + padding-top: 10px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 40px; + line-height: 48px; + /* identical to box height */ + + text-align: center; + letter-spacing: 1px; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + + } + + + } + + @media only screen and (min-width: 1200px) { + .media_sociaux { + svg { + margin-top: 0 !important; + text-align: left !important; + } + + .SocialIcon { + height: 35px !important; + width: 35px !important; + } + } + + .div_carte { + width: 70%; + float: left; + } + + .div_adresse { + width: 29%; + float: left; + text-justify: auto; + padding-left: 0.5rem; + } + + .nom_prenom { + font-family: "verdana", "Quicksand", "Signika", sans-serif; + font-size: medium !important; + text-align: center; + margin-bottom: 1rem; + font-weight: bold; + } + + .okUpdateData { + font-size: large; + color: green; + font-style: italic; + } + + .koUpdateData { + font-size: large; + color: red; + font-style: italic; + } + + .img_logo { + display: block; + height: auto; + margin-left: 0px; + margin-right: auto; + max-width: 18%; + max-height: 3rem; + } + + .containerBox { + position: relative; + display: inline-block; + } + + .div_row2 { + float: left; + //border:0px solid black; + border-width: 0.01rem; + width: 100%; + margin-bottom: 0.1rem; + //border-radius: 1rem; + position: fixed; + z-index: 10; + } + + .div_row_haut { + float: left; + //border:1px solid black; + //border-width: 0.01rem; + width: 100%; + //border-radius: 1rem; + background-color: #3b3e40; + z-index: 10; + } + + .div_row_bas { + float: right; + width: 100%; + height: 10rem; + background-color: #e7f3fb; + z-index: 10; + background: url("../../mysy_img/MYSY-banner-compte_v2.png") no-repeat; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + } + + .div_mobile { + position: absolute; + top: 8rem; + z-index: 1; + width: 100%; + } + + .pieddepage { + z-index: 0; + width: 100%; + float: left; + margin-top: 5rem; + } + + .menuPrincipal { + font-family: "Quicksand", "Signika", "sans-serif"; + color: white; + width: 20%; + float: right; + cursor: pointer; + text-align: center; + font-size: 1.1rem; + border: 2px solid transparent; + } + + .menuPrincipal:hover { + color: #81bc3a; + padding-left: 0; + transition: color 0.3s linear; + letter-spacing: 0.1rem; + text-decoration: solid; + text-underline-offset: 3px; + border-bottom-width: 1px; + border-bottom-style: solid; + text-decoration: underline; + } + + .div_001 { + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .div_002 { + float: left; + width: 50%; + text-align: left; + margin-top: 1rem; + } + + .div_003 { + float: left; + width: 50%; + text-align: right; + color: white; + margin-top: 1.2rem; + margin-bottom: 2rem; + } + + .div_004 { + color: white; + width: 100%; + height: 0.1rem; + opacity: 100%; + margin-left: auto; + margin-right: auto; + float: left; + margin: 0.2rem; + } + + .div_005 { + width: 100%; + float: left; + } + + .hilightsoustitre { + background: #113459; + color: #fff; + display: block; + font-size: 1rem; + margin-bottom: 0.5rem; + } + + .text_head { + color: white; + font-family: "verdana", "Quicksand", "Signika", "sans-serif"; + font-size: 1.2rem; + width: 90%; + margin-left: auto; + margin-right: auto; + } + + .titre { + height: 80px; + padding-top: 10px; + + font-family: 'Albert Sans'; + font-style: normal; + font-weight: 700; + font-size: 40px; + line-height: 48px; + + text-align: center; + letter-spacing: 1px; + + /* Deep Blue */ + + color: #0A043C; + + + /* Inside auto layout */ + + flex: none; + order: 0; + flex-grow: 0; + } + + } +} \ No newline at end of file