src/Flexy/FrontBundle/templates/home/refundOrder.html.twig line 1

Open in your IDE?
  1. {% extends '@Flexy/FrontBundle/templates/layout.html.twig' %}
  3. {% block body %}
  5.         <!-- Begin Body Wrapper -->
  6.         <div class="body-wrapper">
  8.             <!-- Begin Li's Breadcrumb Area -->
  9.             <div class="breadcrumb-area">
  10.                 <div class="container">
  11.                     <div class="breadcrumb-content">
  12.                         <ul>
  13.                             <li><a href="index.html">Accueil</a></li>
  14.                             <li class="active">Retour & rembourcement </li>
  15.                         </ul>
  16.                     </div>
  17.                 </div>
  18.             </div>
  19.             <!-- Li's Breadcrumb Area End Here -->     
  20.             <!-- Begin Contact Main Page Area -->
  21.             <div class="contact-main-page mt-60 mb-40 mb-md-40 mb-sm-40 mb-xs-40">
  22.                 
  23.                 <div class="container">
  24.                      <main class="osh-container static-page" role="main"><style type="text/css">
  25.      
  27.   
  28.     .clear {
  29.       clear: both;
  30.     }
  31.   
  32.     .tbbanner {
  33.       width: 1170px;
  34.     }
  35.   
  36.     .-return-refund_policy {
  37.       padding: 15px 0px;
  38.     }
  39.   
  40.     .-return-refund_policy>.-title,
  41.     .-how_does>.-title,
  42.     .-benefits>.-title {
  43.       text-transform: uppercase;
  44.       font-weight: 700;
  45.       font-size: 1.5em;
  46.       margin-top: 20px;
  47.     }
  48.   
  49.     .-return-refund_policy>.-policies,
  50.     .-how_does>.-how-does_items {
  51.       margin-top: 15px;
  52.     }
  53.   
  54.     .-return-refund_policy>.-policies>.-policy {
  55.       display: inline-block;
  56.       vertical-align: top;
  57.       width: calc(100% / 3.2);
  58.       margin: 0.5%;
  59.       padding: 10px;
  60.       height: 315px;
  61.       box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  62.     }
  63.   
  64.     .-return-refund_policy>.-policies>.-policy>.-img {
  65.       display: inline-block;
  66.       border-radius: 50%;
  67.       background-color: #f3f3f3;
  68.       padding: 19px;
  69.       border: 3px solid #ff9a00;
  70.     }
  71.   
  72.     .-return-refund_policy>.-policies>.-policy>.-text>h1,
  73.     .-how_does>.-how-does_items>.-how-does_item>.-text>h1 {
  74.       font-size: 1.2em;
  75.       color: #000;
  76.       text-transform: uppercase;
  77.       font-weight: 700;
  78.       height: 25px;
  79.     }
  80.   
  81.     .-return-refund_policy>.-policies>.-policy>.-text>.-content,
  82.     .-how_does>.-how-does_items>.-how-does_item>.-text>.-content,
  83.     .-benefits>.-benefit>.-txt>.-content {
  84.       text-align: center;
  85.       font-size: 1.1em;
  86.     }
  87.   
  88.     .-how_does>.-how-does_items>.-how-does_item {
  89.       display: inline-block;
  90.       vertical-align: top;
  91.       width: 25%;
  92.       height: 350px;
  93.       padding: 15px;
  94.       box-sizing: border-box;
  95.       position: relative
  96.     }
  97.     
  98.     .-how_does>.-how-does_items>.-how-does_item::after {
  99.       content: '';
  100.       width: 63%;
  101.       height: 2px;
  102.       background-color: #ff9900;
  103.       position: absolute;
  104.       top: 20%;
  105.       transform: translateY(-50%);
  106.       left: calc(50% + 52px);
  107.     }
  108.     
  109.     .-how_does>.-how-does_items>.-how-does_item:last-child::after {
  110.       display: none;
  111.     }
  112.   
  113.     .-how_does>.-how-does_items>.-how-does_item>.-img {
  114.       display: inline-block;
  115.       vertical-align: top;
  116.       border: 3px solid #ff9a00;
  117.       border-radius: 50%;
  118.       padding: 14px;
  119.     }
  120.   
  121.     .-how_does>.-how-does_items>.-how-does_item>.-img>img {
  122.       width: 100%;
  123.       max-width: 70px;
  124.       border-radius: 50%;
  125.     }
  126.   
  127.     .-faq {
  128.       position: absolute;
  129.       width: 8.3%;
  130.       left: 4%;
  131.       height: 10%;
  132.       top: 58%;
  133.     }
  134.     .-timelines {
  135.       position: absolute;
  136.       width: 11%;
  137.       left: 12.3%;
  138.       height: 10%;
  139.       top: 58%;
  140.     }
  141.     .-refunds {
  142.       position: absolute;
  143.       width: 11%;
  144.       left: 23.5%;
  145.       height: 10%;
  146.       top: 58%;
  147.     }
  148.     
  149.     .-benefits {
  150.   
  151.     }
  152.     .-benefits>.-benefit {
  153.       display: inline-block;
  154.       vertical-align: top;
  155.       width: 25%;
  156.       background-color: white;
  157.       border: 1px solid #eaeded;
  158.       height: 300px;
  159.       padding: 1px 10px;
  160.     }
  161.     .-benefits>.-benefit>.-img {
  162.       width: 40%;
  163.       margin: 0 auto;
  164.       margin-top: 5%;
  165.     }
  166.     .-benefits>.-benefit>.-img>img {
  167.   
  168.     }
  169.     .-benefits>.-benefit>.-txt {
  170.   
  171.     }
  172.     .-benefits>.-benefit>.-txt>.-title {
  173.       margin: 10px 0;
  174.       font-size: 1.3em;
  175.       font-weight: 700;
  176.       text-transform: uppercase;
  177.     }
  178.     .-how_does {
  179.         padding: 0 29px;
  180.     }
  181.     .-benefits {
  182.         padding: 20px;
  183.     }
  185.     .ab-how-does-block {}
  187. .ab-how-does-block-middle {
  188.     border: 2px solid #fe9b02;
  189.     height: 0px;
  190.     overflow: visible;
  191.     width: 100%;
  192.     position: relative;
  193. }
  195. .ab-how-does-block-top {
  196.     width: 100%;
  197.     position: relative;
  198.     height: 200px;
  199. }
  201. .ab-how-does-block-bottom {
  202.     width: 100%;
  203.     height: 170px;
  204.     position: relative;
  205. }
  208. .ab-circle {
  209.     height: 30px;
  210.     width: 30px;
  212.     position: absolute;
  213.     top: -15px;
  214. }
  216. #ab-circle1 {
  217.     left: 16.66%;
  219. }
  221. #ab-circle2 {
  222.     left: 33.12%;
  223. }
  225. #ab-circle3 {
  226.     left: 50%;
  227. }
  229. #ab-circle4 {
  230.     left: 66.66%;
  231. }
  233. #ab-circle5 {
  234.     left: 83.32%;
  235. }
  237. .ab-number {
  238.     position: absolute;
  239.     font-size: 3em;
  240.     font-family: "Lobster";
  241. }
  243. #ab-number1 {
  244.     left: 17.1%;
  245.     bottom: 25px;
  246. }
  248. #ab-number2 {
  249.     left: 33.56%;
  250.     top: 25px;
  251. }
  253. #ab-number3 {
  254.     left: 50.44%;
  255.     bottom: 25px;
  256. }
  258. #ab-number4 {
  259.     left: 66.8%;
  260.     top: 25px;
  261. }
  263. #ab-number5 {
  264.     left: 83.50%;
  265.     bottom: 25px;
  266. }
  268. .ab-text {
  269.     width: 25%;
  270.     position: absolute;
  271.     text-align: center;
  272.     font-family: Roboto, Helvetica, Arial, sans-serif;
  273.     font-size: 1.2em;
  274.     font-weight: bold;
  276. }
  278. #ab-text1 {
  279.     left: 21.16%;
  280.     bottom: 25px;
  281. }
  283. #ab-text2 {
  284.     left: 54%;
  285.     bottom: 25px;
  286. }
  288. #ab-text3 {
  289.     left: 4.6%;
  290.     top: 25px;
  291. }
  293. #ab-text4 {
  294.     left: 71%;
  295.     top: 25px;
  296. }
  298. #ab-text5 {
  299.     left: 37.94%;
  300.     top: 25px;
  301. }
  303. .-m-vw-mr {width: 200px; margin: 0 auto; background: #fead31; color: #fff; text-align: center; text-transform: uppercase; padding: 8px 15px 7px 15px; border-radius: 15px;}
  304. .-m-vw-mr a:hover {color:#000 !important;}
  310.   </style>
  311.   
  312.   
  313.   <div id="container">
  315. <div class="row" style="
  316.     background: url({{asset('omall/refund_omall.png')}});
  317.     height: 428px;
  318. ">
  319.    
  321. </div>
  322. <div id="PageCenter"></div>
  324.     <div class="ab-how-does-block">
  325.       <div class="ab-how-does-block-top ">
  326.           <div class="ab-number" id="ab-number1"></div>
  327.           <div class="ab-text" id="ab-text1">
  328.               <p>
  329.                   Remplir le nombre d’articles à retourner
  330.                   et la raison du retour + un complément
  331.                   d’informations <br> afin de faciliter la procédure
  332.               </p>
  333.           </div>
  334.           <div class="ab-number" id="ab-number3">2</div>
  335.           <div class="ab-text" id="ab-text2">
  336.               <p>
  337.                   
  340.                   demande de la
  341.                   collecte par un de nos agents de livraison <b style="color: #fe9b02 " >Chronodyali</b> on appellons le numéro suivant <span style="color: #fe9b02 ">0522889990</span> 
  342.               </p>
  343.           </div>
  344.           
  345.       </div>
  346.       <div class="ab-how-does-block-middle">
  347.             <img class="ab-circle" id="ab-circle2" src="https://static.jumia.ma/cms/1_2020/Week06/LP_Returns/ICON_RETRUN.png" alt="">
  348.           <img class="ab-circle" id="ab-circle3" src="https://static.jumia.ma/cms/1_2020/Week06/LP_Returns/ICON_RETRUN.png" alt="">
  349.           <img class="ab-circle" id="ab-circle4" src="https://static.jumia.ma/cms/1_2020/Week06/LP_Returns/ICON_RETRUN.png" alt="">
  350.          </div>
  351.       <div class="ab-how-does-block-bottom">
  352.           <div class="ab-text" id="ab-text3">
  353.               <p>
  354.                   Télécharger le document ci-dessous et  
  355.                   saisir la commande contenant l(es) article(s) à retourner.
  357.               </p>
  358.           </div>
  359.           <div class="ab-number" id="ab-number2">1</div>
  360.            
  361.           <div class="ab-number" id="ab-number4">3</div>
  362.           <div class="ab-text" id="ab-text4">
  363.               <p>
  364.                   Re-vérifier les détails de votre demande de retour, puis soumettez-la.
  365.               </p>
  366.           </div>
  367.       </div>
  368.   </div>
  373.   <br class="clear">
  375.     <div class="-m-vw-mr menu-item" >
  376.       <a href="/omall/RetourOmall.pdf"  target="_blank"  style="color:#FFF; font-weight:bold; font-size: 14.2px;">TÉLÉCHARGER DOCUMENT DE RETOUR</a>
  377.     </div>   <br class="clear">
  378.   
  380.   <div class="row -benefits">
  381.       <div class="-benefit">
  382.         <div class="-img">
  383.           <img src="https://static.jumia.ma/cms/1_2020/Week06/LP_Returns/initiate-return.jpg" alt="icon">
  384.         </div>
  385.         <div class="-txt">
  386.           <div class="-title">PROFITEZ D’UNE POLITIQUE DE RETOUR ET DE REMBOURSEMENT SIMPLE</div>
  387.           <div class="-content">
  388.            Télécharger le document retour et mentionné les articles à retourner
  389.             et la raison du retour + un complément
  390.             d’informations afin de faciliter la procédure
  391.           </div>
  392.         </div>
  393.       </div><div class="-benefit">
  394.         <div class="-img">
  395.           <img src="https://static.jumia.ma/cms/1_2020/Week06/LP_Returns/return-item.jpg" alt="icon">
  396.         </div>
  397.         <div class="-txt">
  398.           <div class="-title">PREPAREZ L’ARTICLE</div>
  399.           <div class="-content">
  400.             Remettez l’article dans son emballage d’origine en incluant tout accessoire (coupons, gadgets,
  401.             etc…) ayant été livré avec.
  402.           </div>
  403.         </div>
  404.       </div><div class="-benefit">
  405.         <div class="-img">
  406.           <img src="https://static.jumia.ma/cms/1_2020/Week06/LP_Returns/drop-off.jpg" alt="icon">
  407.         </div>
  408.         <div class="-txt">
  409.           <div class="-title">RAPPORTER L’ARTICLE OU DEMANDER SA RÉCUPERATION</div>
  410.           <div class="-content">
  411.             Contactez   <span style="color: #fe9b02 ">chronodyali</span> et demande de la collecte par    et  organisez la récupération 
  412.                     auprès de vous.
  413.           </div>
  414.         </div>
  415.       </div><div class="-benefit">
  416.         <div class="-img">
  417.           <img src="https://static.jumia.ma/cms/1_2020/Week06/LP_Returns/refund-processed.jpg" alt="icon">
  418.         </div>
  419.         <div class="-txt">
  420.           <div class="-title">REMBOURSEMENT</div>
  421.           <div class="-content">
  422.             Une fois votre colis ré-acheminé, nous procéderons à une dernière vérification au terme de
  423.             laquelle votre remboursement pourrait être effectué suivant votre méthode de remboursement
  424.             favorite.
  425.           </div>
  426.         </div>
  427.       </div>
  428.     </div>
  430.     
  431.   </div>  
  433.   <br class="clear">
  434. </main>
  435.                 </div>
  436.             </div>
  437.             <!-- Contact Main Page Area End Here -->
  439.         </div>
  440.         <!-- Body Wrapper End Here -->
  442. {% endblock %}