templates/beautytada/page/index/how-works.twig line 1

Open in your IDE?
  1. <section class="steps-order section">
  2.     <div class="k-container">
  3.         <div class="steps-inner">
  4.             <h3 class="sub-head-title">
  5.                 {{ translation.getData('how-work').howWorkSubTitle }}
  6.             </h3>
  7.             <h2 class="head-title">
  8.                 {{ translation.getData('how-work').howWorkTitle }}
  9.             </h2>
  10.             <div class="steps-order-wrapper">
  11.                 <div class="step-item">
  12.                     <span class="step-icon">
  13.                         <svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  14.                             <path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm8.94 3c-.46-4.17-3.77-7.48-7.94-7.94V1h-2v2.06C6.83 3.52 3.52 6.83 3.06 11H1v2h2.06c.46 4.17 3.77 7.48 7.94 7.94V23h2v-2.06c4.17-.46 7.48-3.77 7.94-7.94H23v-2h-2.06zM12 19c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z"/>
  15.                         </svg>
  16.                     </span>
  17.                     <span class="step-number">1.</span>
  18.                     <span class="step-headline">{{ translation.getData('how-work').howWorkStep1Title }}</span>
  19.                     <p class="step-description">{{ translation.getData('how-work').howWorkStep1Content }}</p>
  20.                 </div>
  21.                 <span class="step-seperator">
  22.                     <svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
  23.                 </span>
  24.                 <div class="step-item">
  25.                     <span class="step-icon">
  26.                         <svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 511.998 511.998" style="enable-background:new 0 0 511.998 511.998;" xml:space="preserve"><g><g><path d="M151.128,494.335h-36.04V392.014c0-19.887,10.165-37.93,27.193-48.268c4.17-2.532,5.497-7.964,2.966-12.133    c-2.531-4.169-7.963-5.497-12.133-2.966c-22.348,13.567-35.69,37.257-35.69,63.367v111.153c0,4.878,3.954,8.832,8.832,8.832    h44.872c4.878,0,8.832-3.954,8.832-8.832S156.006,494.335,151.128,494.335z"/></g></g><g><g><path d="M329.458,494.335h-86.013v-73.233l63.301-62.171c3.48-3.419,3.53-9.01,0.113-12.49c-3.417-3.48-9.009-3.53-12.49-0.113    l-59.757,58.69l-59.757-58.691c-3.48-3.417-9.072-3.367-12.49,0.113c-3.417,3.48-3.367,9.072,0.113,12.489l63.301,62.171v73.233    h-45.214c-4.878,0-8.832,3.954-8.832,8.832c0,4.878,3.954,8.832,8.832,8.832h148.891c4.878,0,8.832-3.954,8.832-8.832    C338.29,498.288,334.336,494.335,329.458,494.335z"/></g></g><g><g><path d="M359.236,350.734c-5.979-8.891-13.979-16.529-23.135-22.088c-4.17-2.531-9.602-1.202-12.133,2.966    c-2.531,4.169-1.202,9.601,2.966,12.133c6.983,4.239,13.084,10.064,17.644,16.845c1.705,2.535,4.495,3.905,7.336,3.905    c1.695,0,3.408-0.486,4.92-1.504C360.884,360.269,361.958,354.781,359.236,350.734z"/></g></g><g><g><path d="M366.429,49.83c-25.801-33.438-79.03-53.261-132.465-49.339c-0.142,0.011-0.285,0.025-0.427,0.042    c-2.783,0.341-62.425,8.088-73.294,43.878c-5.013-1.282-11.405-2.42-18.379-2.452c-15.305-0.069-36.353,5.151-49.352,30.423    c-12.631,24.565-17.925,67.469-6.166,98.13c-6.738,6.594-10.93,15.781-10.93,25.93c0,16.339,10.717,30.179,25.646,34.726    c-1.395,32.596,13.727,64.215,40.276,83.498l48.34,35.127c13.436,9.765,29.179,14.645,44.93,14.645    c15.747,0,31.5-4.882,44.94-14.645l48.339-35.126c3.953-2.871,7.717-6.066,11.192-9.497c3.901-3.257,35.236-30.28,54.699-73.531    C412.76,189.458,423.424,123.675,366.429,49.83z M102.687,212.759c-5.747-3.178-9.607-9.291-9.607-16.315    c0-8.273,5.422-15.296,12.895-17.725L102.687,212.759z M325.428,293.801c-2.492,2.356-5.15,4.563-7.923,6.577l-48.338,35.126    c-20.674,15.014-48.445,15.014-69.106,0.001l-48.342-35.129c-22.912-16.641-35.452-44.49-32.728-72.683l5.683-58.849    c23.979-9.687,43.963-35.61,54.071-50.796c12.141,14.521,37.358,38.015,73.477,38.01c1.746,0,3.526-0.055,5.323-0.17    c26.651-1.686,46.669,5.928,59.506,22.631C339.137,207.259,336.917,257.929,325.428,293.801z M377.921,223.832    c-8.283,18.58-19.159,34.075-28.684,45.55c1.842-11.915,2.625-23.992,2.257-35.61c-0.85-26.895-7.918-49.722-20.438-66.013    c-16.641-21.652-41.741-31.575-74.627-29.495c-43.625,2.747-70.542-40.113-70.799-40.531c-1.638-2.685-4.58-4.301-7.726-4.231    c-3.145,0.066-6.019,1.801-7.544,4.551c-0.263,0.473-26.581,47.446-56.318,55.794c-3.131,0.878-5.48,3.396-6.204,6.504    c-2.057,0.22-4.061,0.618-6.003,1.169c-9.213-26.956-2.814-63.167,6.386-81.059c7.167-13.934,17.981-20.751,33.06-20.837    c12.147-0.099,22.366,4.452,22.442,4.488c2.734,1.245,5.913,1.015,8.44-0.611c2.527-1.625,4.053-4.423,4.053-7.427    c0-28.99,55.82-37.489,59.306-37.984c47.676-3.427,94.635,13.646,116.924,42.533C393.763,114.154,402.333,169.066,377.921,223.832    z"/></g></g><g><g><path d="M182.187,198.418c-4.878,0-8.832,3.954-8.832,8.832v14.126c0,4.878,3.954,8.832,8.832,8.832    c4.878,0,8.832-3.954,8.832-8.832V207.25C191.019,202.373,187.065,198.418,182.187,198.418z"/></g></g><g><g><path d="M313.468,179.219c-14.576-14.577-38.296-14.577-52.874,0c-3.449,3.449-3.449,9.042,0,12.49    c3.449,3.449,9.042,3.449,12.49,0c7.691-7.69,20.204-7.69,27.895,0c1.724,1.724,3.985,2.587,6.245,2.587    c2.26,0,4.521-0.862,6.245-2.587C316.917,188.259,316.917,182.667,313.468,179.219z"/></g></g><g><g><path d="M208.624,179.219c-14.577-14.579-38.298-14.577-52.875,0c-3.449,3.449-3.449,9.042,0,12.49    c3.449,3.449,9.042,3.449,12.49,0c7.692-7.69,20.205-7.69,27.895,0c1.724,1.724,3.985,2.587,6.245,2.587    c2.26,0,4.521-0.862,6.245-2.587C212.073,188.261,212.073,182.668,208.624,179.219z"/></g></g><g><g><path d="M287.032,198.418c-4.878,0-8.832,3.954-8.832,8.832v14.126c0,4.878,3.954,8.832,8.832,8.832s8.832-3.954,8.832-8.832    V207.25C295.864,202.373,291.91,198.418,287.032,198.418z"/></g></g><g><g><path d="M264.184,272.568c-3.448-3.449-9.04-3.449-12.49,0c-9.421,9.421-24.751,9.421-34.171,0c-3.449-3.449-9.042-3.449-12.49,0    c-3.449,3.449-3.449,9.042,0,12.49c8.154,8.154,18.865,12.232,29.575,12.232c10.71,0,21.421-4.077,29.575-12.232    C267.633,281.608,267.633,276.016,264.184,272.568z"/></g></g><g><g><path d="M243.841,231.561h-0.402v-18.253c0-4.878-3.954-8.832-8.832-8.832s-8.832,3.954-8.832,8.832v18.253h-0.402    c-4.878,0-8.832,3.954-8.832,8.832s3.954,8.832,8.832,8.832h18.467c4.878,0,8.832-3.954,8.832-8.832    S248.718,231.561,243.841,231.561z"/></g></g><g><g><path d="M427.897,455.654c-4.878,0-8.832,3.954-8.832,8.832v29.848h-52.612v-70.236h9.403h33.805h9.403v10.948    c0,4.878,3.954,8.832,8.832,8.832s8.832-3.954,8.832-8.832v-19.78c0.001-4.878-3.953-8.832-8.831-8.832h-9.403V357.04    c0-11.492-9.349-20.841-20.841-20.841h-9.788c-11.492,0-20.841,9.349-20.841,20.841v49.395h-9.403    c-4.878,0-8.832,3.954-8.832,8.832v87.9c0,4.878,3.954,8.832,8.832,8.832h70.276c4.878,0,8.832-3.954,8.832-8.832v-38.68    C436.729,459.609,432.774,455.654,427.897,455.654z M384.689,357.04c0-1.752,1.425-3.177,3.177-3.177h9.788    c1.752,0,3.177,1.425,3.177,3.177v49.395h-16.142V357.04z"/></g></g><g><g><path d="M98.651,333.185h-3.376v-33.874c0-4.531-3.415-8.262-7.811-8.768v-33.938c0-2.448-1.016-4.786-2.805-6.457l-27.084-25.28    c-2.573-2.401-6.321-3.045-9.546-1.644c-3.225,1.401-5.312,4.584-5.312,8.101v59.219c-4.396,0.506-7.811,4.237-7.811,8.768v33.875    H31.53c-4.878,0-8.832,3.954-8.832,8.832v98.917c0,4.878,3.954,8.832,8.832,8.832h49.459c4.878,0,8.832-3.954,8.832-8.832    s-3.956-8.832-8.833-8.832H40.361v-81.254h58.291c4.878,0,8.832-3.954,8.832-8.832C107.483,337.14,103.529,333.185,98.651,333.185    z M60.38,251.649l9.421,8.793v30.037H60.38V251.649z M77.612,333.185H52.57v-25.043h25.043V333.185z"/></g></g><g><g><path d="M486.712,32.609c-3.449-3.45-9.042-3.449-12.49,0l-15.587,15.587c-3.449,3.449-3.449,9.042,0,12.49    c1.724,1.726,3.985,2.587,6.245,2.587c2.26,0,4.521-0.862,6.245-2.587l15.587-15.587C490.162,41.65,490.162,36.057,486.712,32.609    z"/></g></g><g><g><path d="M440.265,79.057c-3.449-3.449-9.042-3.448-12.49,0l-15.587,15.587c-3.449,3.449-3.449,9.042,0,12.49    c1.724,1.725,3.985,2.587,6.245,2.587c2.26,0,4.521-0.862,6.245-2.587l15.587-15.587    C443.714,88.097,443.714,82.505,440.265,79.057z"/></g></g><g><g><path d="M486.714,94.644l-15.587-15.587c-3.449-3.449-9.042-3.449-12.49,0c-3.449,3.449-3.449,9.04,0,12.49l15.587,15.587    c1.724,1.725,3.985,2.587,6.245,2.587c2.26,0,4.521-0.862,6.245-2.587C490.163,103.684,490.163,98.093,486.714,94.644z"/></g></g><g><g><path d="M440.265,48.196l-15.587-15.587c-3.448-3.45-9.04-3.449-12.49,0c-3.449,3.449-3.449,9.04,0,12.49l15.587,15.587    c1.724,1.725,3.985,2.587,6.245,2.587c2.26,0,4.521-0.862,6.245-2.587C443.714,57.236,443.714,51.645,440.265,48.196z"/></g></g><g><g><circle cx="265.451" cy="432.927" r="8.832"/></g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g></svg>
  27.                     </span>
  28.                     <span class="step-number">2.</span>
  29.                     <span class="step-headline">{{ translation.getData('how-work').howWorkStep2Title }}</span>
  30.                     <p class="step-description">{{ translation.getData('how-work').howWorkStep2Content }}</p>
  31.                 </div>
  32.                 <span class="step-seperator">
  33.                     <svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 24H0V0h24v24z" fill="none" opacity=".87"/><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"/></svg>
  34.                 </span>
  35.                 <div class="step-item">
  36.                     <span class="step-icon">
  37.                         <svg class="icon-svg" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24">
  38.                             <g><rect fill="none" height="24" width="24" y="0"/></g><g><g><g><path d="M19,7c0-1.1-0.9-2-2-2h-3v2h3v2.65L13.52,14H10V9H6c-2.21,0-4,1.79-4,4v3h2c0,1.66,1.34,3,3,3s3-1.34,3-3h4.48L19,10.35 V7z M4,14v-1c0-1.1,0.9-2,2-2h2v3H4z M7,17c-0.55,0-1-0.45-1-1h2C8,16.55,7.55,17,7,17z"/><rect height="2" width="5" x="5" y="6"/><path d="M19,13c-1.66,0-3,1.34-3,3s1.34,3,3,3s3-1.34,3-3S20.66,13,19,13z M19,17c-0.55,0-1-0.45-1-1s0.45-1,1-1s1,0.45,1,1 C20,16.55,19.55,17,19,17z"/></g></g></g>
  39.                         </svg>
  40.                     </span>
  41.                     <span class="step-number">3.</span>
  42.                     <span class="step-headline">{{ translation.getData('how-work').howWorkStep3Title }}</span>
  43.                     <p class="step-description">{{ translation.getData('how-work').howWorkStep3Content }}</p>
  44.                 </div>
  45.             </div>
  46.         </div>
  47.     </div>
  48. </section>