templates/emails/Inscriptionparent.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html
  2.     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.     <meta charset="utf-8"> <!-- utf-8 works for most cases -->
  8.     <meta charset="UTF-8">
  9.     <meta http-equiv="x-ua-compatible" content="ie=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1">
  11.     <title>5 sur 5</title>
  12.     <style type="text/css">
  13.         span.paracrea {
  14.             font-weight: bold;
  15.         }
  17.         a.white-btn {
  18.             display: inline-block !important;
  19.             background: transparent !important;
  20.             padding: 0px 18px !important;
  21.             font-size: 12px !important;
  22.             margin-left: 36% !important;
  23.             font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif !important;
  24.             font-weight: bold !important;
  25.             color: #41a2aa !important;
  26.             text-decoration: none !important;
  27.             text-align: center !important;
  28.             letter-spacing: 10px;
  29.         }
  31.         a.white-btn:hover {
  32.             color: #f09e7a;
  33.             text-decoration: none;
  34.         }
  36.         .blue-btn {
  37.             display: inline-block !important;
  38.             margin-bottom: 34px !important;
  39.             border: 3px solid #f09e7a !important;
  40.             padding: 3px 3px !important;
  41.             font-size: 12px !important;
  42.             font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  43.             font-weight: bold !important;
  44.             color: #fff !important;
  45.             text-decoration: none !important;
  46.             text-align: center !important;
  47.             background-color: #f09e7a !important;
  48.             border-radius: 25px !important;
  49.         }
  51.         .blue-btn:hover {
  52.             background-color: #41A2AA !important;
  53.             border-color: #41A2AA !important;
  54.         }
  56.         h2.special {
  57.             margin: 0;
  58.             font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  59.             color: #000;
  60.             padding: 15px 70px 0px 70px;
  61.             font-size: 13px;
  62.         }
  64.         p.special {
  65.             color: #fff;
  66.             font-size: 12px;
  67.             color: #000;
  68.             font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  69.             padding: 0px 70px 10px 70px;
  70.         }
  72.         p.special2 {
  74.             font-size: 10px;
  75.             color: #555151;
  76.             font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  78.             padding: 0px 70px 10px 70px;
  79.         }
  81.         #social-icons {
  82.             width: 100%;
  83.         }
  85.         .buttonwrapper {
  86.             margin-left: 49%;
  87.             width: 100%
  88.         }
  90.         body {
  91.             margin: 0;
  92.             padding: 0;
  93.             min-width: 100% !important;
  94.         }
  96.         .content {
  97.             width: 100%;
  98.             max-width: 600px;
  99.         }
  101.         .header {
  102.             padding: 40px 30px 20px 30px;
  103.         }
  105.         .header1 {
  106.             padding: 40px 30px 20px 30px;
  107.         }
  109.         .col425 {
  110.             width: 425px !important;
  111.         }
  113.         .subhead {
  114.             font-size: 15px;
  115.             color: #41A2AA;
  116.             font-family: sans-serif;
  117.             letter-spacing: 10px;
  118.         }
  120.         .h1 {
  121.             font-size: 33px;
  122.             line-height: 38px;
  123.             font-weight: bold;
  124.         }
  126.         .h1,
  127.         .h2,
  128.         .bodycopy {
  129.             color: #153643;
  130.             font-family: sans-serif;
  131.         }
  133.         .innerpadding {
  134.             padding: 30px 30px 30px 30px;
  135.         }
  137.         .borderbottom {
  138.             border-bottom: 1px solid #F2EEED;
  139.         }
  141.         .h2 {
  142.             padding: 0 0 15px 0;
  143.             font-size: 24px;
  144.             line-height: 28px;
  145.             font-weight: bold;
  146.         }
  148.         .bodycopy {
  149.             font-size: 16px;
  150.             line-height: 22px;
  151.         }
  153.         .button {
  154.             text-align: center;
  155.             font-size: 18px;
  156.             font-family: sans-serif;
  157.             font-weight: bold;
  158.             padding: 0 30px 0 30px;
  159.         }
  161.         .button a {
  162.             color: #FFFFFF;
  163.             text-decoration: none;
  164.         }
  166.         img {
  167.             height: auto;
  168.         }
  170.         .footer {
  171.             padding: 20px 30px 15px 30px;
  172.         }
  174.         .footercopy {
  175.             font-family: sans-serif;
  176.             font-size: 14px;
  177.             color: #153643;
  178.         }
  180.         .footercopy a {
  181.             color: #FFFFFF;
  182.             text-decoration: underline;
  183.         }
  185.         body[yahoo] .unsubscribe {
  186.             display: block;
  187.             margin-top: 20px;
  188.             padding: 10px 50px;
  189.             background: #2F3942;
  190.             border-radius: 5px;
  191.             text-decoration: none !important;
  192.             font-weight: bold;
  193.         }
  195.         body[yahoo] .hide {
  196.             display: none !important;
  197.         }
  198.     </style>
  199.     <style type="text/css">
  200.         @media only screen and (min-device-width: 601px) {
  201.             .header1 {
  202.                 padding: 1px 30px 20px 0px;
  203.             }
  205.             .content {
  206.                 width: 600px !important;
  207.             }
  209.             .col425 {
  210.                 width: 425px !important;
  211.             }
  213.             .col380 {
  214.                 width: 380px !important;
  215.             }
  216.         }
  218.         @media only screen and (max-width: 550px),
  219.         screen and (max-device-width: 550px) {
  220.             body[yahoo] .buttonwrapper {
  221.                 background-color: transparent !important;
  222.                 margin-left: 33%;
  223.                 width: 100%
  224.             }
  226.             body[yahoo] .button a {
  227.                 background-color: #E05443;
  228.                 padding: 15px 15px 13px !important;
  229.                 display: block !important;
  230.             }
  231.         }
  232.     </style>
  233.     <style type="text/css">
  234.         table {
  235.             border-collapse: separate;
  236.         }
  238.         a {
  239.             text-decoration: none;
  240.             color: #00788A;
  241.         }
  243.         a:hover {
  244.             text-decoration: underline;
  245.         }
  247.         h2,
  248.         h2 a,
  249.         h3,
  250.         h3 a,
  251.         h4,
  252.         h5,
  253.         h6,
  254.         .t_cht {
  255.             color: #000 !important;
  256.         }
  258.         .ExternalClass p,
  259.         .ExternalClass span,
  260.         .ExternalClass font,
  261.         .ExternalClass td {
  262.             line-height: 100%;
  263.         }
  265.         .ExternalClass {
  266.             width: 100%;
  267.         }
  268.     </style>
  269. </head>
  271. <body yahoo bgcolor="#fff">
  272.     <table width="100%" bgcolor="#fff" border="0" cellpadding="0" cellspacing="0">
  273.         <tr>
  274.             <td>
  275.                 <!--[if (gte mso 9)|(IE)]>
  276. <table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
  277.     <tr>
  278.         <td>
  279.             <![endif]-->
  280.                 <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
  281.                     <tr>
  282.                         <td class="header" bgcolor="#41A2AA">
  283.                             <!--[if (gte mso 9)|(IE)]>
  284. <table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
  285.     <tr>
  286.         <td>
  287.         <![endif]-->
  288.                             <table align="center" border="0" cellpadding="0" cellspacing="0"
  289.                                 style="width: 100%; max-width: 600px;">
  290.                                 <tr>
  291.                                     <td height="70">
  292.                                         <table width="100%" border="0" cellspacing="0" cellpadding="0">
  293.                                             <tr>
  294.                                                 <td align="center" style="padding: 10px 0 0 1px;">
  295.                                                     <img src="{{image1}}" border="0" alt="" />
  296.                                                 </td>
  297.                                             </tr>
  298.                                         </table>
  299.                                     </td>
  300.                                 </tr>
  301.                             </table>
  302.                             <!--[if (gte mso 9)|(IE)]>
  303.         </td>
  304.     </tr>
  305. </table>
  306. <![endif]-->
  307.                         </td>
  308.                     </tr>
  309.                     <tr>
  310.  <td class="header1" bgcolor="#EDEDED">
  311.  <table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
  312.      <tr>
  313.           <td height="70" style="padding: 0 20px 20px 0;">
  315.           </td>
  316.                                 </tr>
  317.      </table>
  318.                             <!--[if (gte mso 9)|(IE)]>
  319. <table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
  320.     <tr>
  321.         <td>
  322.         <![endif]-->
  323.                             <table class="col425" align="left" border="0" cellpadding="0" cellspacing="0"
  324.                                 style="width: 100%; max-width: 425px;">
  325.                                 <tr>
  326.                                     <td height="70" class="biev">
  327.                                         <table width="100%" border="0" cellspacing="0" cellpadding="0">
  328.                                             <tr>
  329.                                                 <td style="padding: 5px 0 0 31px;">
  330.                                                     <h1
  331.                                                         style="margin:0; mso-line-height-rule:exactly;text-align: center;font-size:20px;color:black">
  332.                                                         Bienvenue sur 5sur5séjour</h1><br>
  333.                                                     <p
  334.                                                         style="margin:0; mso-line-height-rule:exactly;text-align: center;font-size:16px;color: #41a2aa !important;letter-spacing: 10px;text-decoration: none !important;">
  335.                                                         <a style="font-size:16px;color: #41a2aa !important;letter-spacing: 10px;text-decoration: none !important;"
  336.                                                             href="https://5sur5sejour.com/">CONTACT</a></p><br>
  337.                                                 </td>
  338.                                             </tr>
  339.                                            
  340.                                         </table>
  341.                                     </td>
  342.                                 </tr>
  343.                             </table>
  344.                             <!--[if (gte mso 9)|(IE)]>
  345.         </td>
  346.     </tr>
  347. </table>
  348. <![endif]-->
  349.                         </td>
  350.                     </tr>
  351.                     <tr>
  352.                         <td class="innerpadding borderbottom" bgcolor="#fff" style="padding-top: 7%;">
  353.                             <table class="col425" width="100%" border="0" cellspacing="0" cellpadding="0"
  354.                                 style="width: 488px!important;padding-left: 4%!important;font-size: 16px;">
  355.                                 <tr>
  356.                                     <td class="bodycopy">
  357.                                      <p style="color:black;"> Cher(e) parent,</p><br>
  358.                                         <p style="color:black;"> Nous vous remercions d’avoir créé un compte sur
  359.                                             5sur5séjour. Vous y trouverez messages, photos, et vidéos postés par l’accompagnateur du séjour de votre enfant.</p>
  360.                                         <p style="color:black;">Il suffit pour cela d’avoir, au préalable, activer votre compte parent grâce au mail « activation compte » reçu au moment de la création. Laissez-vous guider puis vous pourrez vous connecter à tout moment et depuis n’importe quel ordinateur ou portable grâce à votre email ({{ identifiant  }}) et votre mot de passe celui que vous venez de créer.
  361.                                            </p>
  363.                                         <p style="color:black;"> Vous pouvez toujours modifier votre mot de passe sur la page « Mon compte » ou depuis « mot de passe oublié » :.
  364.                                             <a href="{{ absolute_url(path('forgotPassparent'))}}">Modifier
  365.                                                 mot de passe</a></p>
  366.                                        <tr>
  367.                                     <td style="padding: 20px 0 0 0;">
  368.                                         <table class="buttonwrapper" border="0" cellspacing="0" cellpadding="0"
  369.                                             style="margin: 0px !important;padding: 0px 134px 0px 208px;width: 500px; ">
  370.                                             <tr>
  371.                                                 <td class="button" height="45">
  372.                                                     <a <a href="{{ absolute_url(path('app_back_Parent'))}}"
  373.                                                         class="blue-btn" align="center"
  374.                                                         style=" display: inline-block !important;margin-bottom: 34px !important;border: 3px solid #f09e7a !important;padding: 3px 3px !important;font-size: 12px !important;font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;font-weight: bold !important;color: #fff !important;text-decoration: none !important;text-align: center !important;background-color: #f09e7a !important;border-radius: 25px !important;">
  375.                                                         Je me connecte </a>
  376.                                                 </td>
  377.                                             </tr>
  378.                                         </table>
  379.                                     </td>
  380.                                 </tr>
  381.                                 <tr>
  382.                                     <td class="bodycopy">
  383.                                 <tr>
  384.                                     <td class="bodycopy">
  386.                                         <p style="color:black;"> Une fois connecté, entrez le code séjour, communiqué par l’accompagnateur..</p><br>
  388.                                         <p style="font-weight: bold;">Vivez ainsi les moments forts du séjour de votre enfant en toute sécurité et dans le respect des nouvelles lois RGPD..</p><br>
  390.                                         <p style="color:black;"> A chaque nouveau dépôt d’images ou de messages, vous serez prévenu par SMS ou par emails, selon votre choix..</p><br>
  393.                                         <br>
  394.                                         <p style="color:black;">L’équipe 5sur5séjour.</p>
  395.                                     </td>
  396.                                 </tr>
  397.                         </td>
  398.                     </tr>
  399.                                     </td>
  400.                                 </tr>
  401.                             </table>
  402.                         </td>
  403.                     </tr>
  404.                     <tr>
  405.                         <td class="innerpadding borderbottom" bgcolor="#fff">
  407.                             <!--[if (gte mso 9)|(IE)]>
  408.       <table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
  409.         <tr>
  410.           <td>
  411.     <![endif]-->
  412.                             <table class="col425" border="0" cellpadding="0" cellspacing="0"
  413.                                 style="width: 488px!important;padding-left: 4%!important;font-size: 16px;">
  414.                                 <tr>
  415.                                     <td>
  416.                                         <table width="100%" border="0" cellspacing="0" cellpadding="0">
  417.                                             <tr>
  418.                                                 <td align="left">
  420.                                                     {# <p style="margin:0; color:black;" class="special"> Vous pouvez toujours modifier votre mot de passe
  421.                         sur la page « Mon compte » de notre plateforme “5 sur 5 séjour”. <a href="{{ absolute_url(path('patenaireforget'))}}"> Modifier mot de passe </a></p>#}
  422.                                                 </td>
  423.                                             </tr>
  424.                                             <tr>
  425.                                               
  426.                                             </tr>
  427.                                         </table>
  428.                                     </td>
  429.                                 </tr>
  430.                             </table>
  431.                             <!--[if (gte mso 9)|(IE)]>
  432.           </td>
  433.         </tr>
  434.     </table>
  435.     <![endif]-->
  436.                         </td>
  437.                     </tr>
  438.                    
  439.                     <tr>
  440.                         <td class="footer" bgcolor="#fff">
  441.                             <table width="600" border="0" cellpadding="0" cellspacing="0" align="center"
  442.                                 class="border-complete deviceWidth" bgcolor="#fff">
  443.                                 <tr>
  444.                                     <td align="center" valign="top" id="socials">
  445.                                         <table id="social-icons" border="0" cellspacing="0" cellpadding="0">
  446.                                             <tr>
  447.                                                 <td style="width:100px;padding-left:25px;padding-right: 25px">
  448.                                                     <table cellpadding="0" cellspacing="0" border="0">
  449.                                                         <tr>
  450.                                                             <td>
  451.                                                                 <img src="{{iconphoto}}"
  452.                                                                     style="margin:auto;width: 30px;height: 24px;margin-left: 36%; "
  453.                                                                     alt="" />
  454.                                                                 <br>
  455.                                                                 <span style="font-weight: 700;font-size: 11px;"> Photos
  456.                                                                     et vidéos</span>
  457.                                                             </td>
  458.                                                         </tr>
  459.                                                     </table>
  460.                                                 </td>
  461.                                                 <td style="width: 100px;padding-left: 25px;padding-right: 25px">
  462.                                                     <table cellpadding="0" cellspacing="0" border="0">
  463.                                                         <tr>
  464.                                                             <td>
  465.                                                                 <img src="{{iconmsg}}"
  466.                                                                     style="margin:auto;width: 31px;height: 25px;margin-left: 31%;"
  467.                                                                     alt="" />
  468.                                                                 <br>
  469.                                                                 <span style="font-weight: 700;font-size: 11px;">
  470.                                                                     Messages Audio</span>
  471.                                                             </td>
  472.                                                         </tr>
  473.                                                     </table>
  474.                                                 </td>
  475.                                                 <td style="width:100px;padding-left: 25px;padding-right: 25px">
  476.                                                     <table cellpadding="0" cellspacing="0" border="0">
  477.                                                         <tr>
  478.                                                             <td>
  480.                                                                 <img src="{{iconloca}}"
  481.                                                                     style="margin:auto;width: 17px;height: 25px;margin-left: 44%;"
  482.                                                                     alt="" />
  483.                                                                 <br>
  484.                                                                 <span style="font-weight: 700;font-size: 11px;">
  485.                                                                     Localisation / Carte</span>
  486.                                                             </td>
  487.                                                         </tr>
  488.                                                     </table>
  489.                                                 </td>
  490.                                             </tr>
  491.                                         </table>
  492.                                     </td>
  493.                                 </tr>
  495.                             </table>
  496.                         </td>
  497.                     </tr>
  498.                     <tr>
  499.                         <td width="100%">
  501.                     <tr align="center" style="width:100%;">
  502.                         <td align="center"
  503.                             style="padding-left: 0px;background-color:#fff;width:100%;max-height: 100px;height: 100px;">
  505.                             <img src="{{image2}}" style=" width:100%">
  507.                         </td>
  509.                     </tr>
  511.             </td>
  512.         </tr>
  514.         <tr>
  515.             <td width="100%">
  516.                 <table border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth"
  517.                     style="width: 100%;">
  518.                     <tr align="center" style="width:100%;">
  519.                         <td align="center"
  520.                             style="padding-left: 0px;background-color:#fff;width:100%;max-height: 100px;height: 100px;">
  522.                             <img src="{{imggarcon}}" style=" width:100%" alt="">
  524.                         </td>
  526.                     </tr>
  527.                 </table>
  528.             </td>
  529.         </tr>
  530.         <tr>
  531.             <td class="footer" bgcolor="#EDEDED">
  532.                 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  533.                     <tr>
  534.                         <td align="center" valign="top" id="socials">
  535.                             <table id="social-icons" border="0" cellspacing="0" cellpadding="0">
  536.                                 <tr>
  538.                                     <td align="center">
  539.                                         <a href="#"><img src="{{iconfooter}}" width="32" height="32"
  540.                                                 style="display:block;" alt="" /></a>
  541.                                     </td>
  543.                                 </tr>
  544.                             </table>
  545.                         </td>
  546.                     </tr>
  548.                     <tr>
  549.                         <td style="text-align: center;">
  550.                             <p style="margin:0;" id="footer-txt"> <b> 5 sur 5 séjour - 12 rue Louis Courtois de Viçose, Bâtiment 3</b>
  551.                                 <br />
  552.                                 69140 LYON France - T. <a  href="tel:+33 5 36 28 29 30" style="color:#41A2AA !important;">05 36 28 29 30</a> - <a href = "mailto: contact@5sur5sejour.com" style="color:#41A2AA !important;">contact@5sur5sejour.com</a>
  553.                             </p>
  554.                         </td>
  556.                     </tr>
  557.                     <tr>
  558.                         <td style="text-align: center;">
  559.                             <p style="margin:0;" class="footer-txt">
  560.                                 Veuillez ajouter <a href = "mailto: contact@5sur5sejour.com" style="color:#41A2AA !important;">contact@5sur5sejour.com</a> à votre liste d’expéditeurs
  561.                                 autorisé pour assurer la réception de ces emails.
  562.                             </p>
  563.                         </td>
  565.                     </tr>
  566.                 </table>
  567.             </td>
  568.         </tr>
  569.     </table>
  570.     <!--[if (gte mso 9)|(IE)]>
  571.         </td>
  572.     </tr>
  573. </table>
  574. <![endif]-->
  575.     </td>
  576.     </tr>
  577.     </table>
  578. </body>
  580. </html>