templates/about/about-steps.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5. <main class="mhcc-wrapper">
  6.     <!-- Main content block starts //-->
  7.     <article class="mhcc-sec-page-outer mb-4 about-paramedics-wrapper">
  8.         <!--// Main title block STARTS-->
  9.         <header class="mt-0 mb-4 text-center light-green-bg sec-page-main-header">
  10.           <h1 class="text-left sec-page-main-title sec-page-main-title__how-to-use sec-page-lead-text--light-blue sec-page-main-title--big">
  11.             {{"how-to-use"|trans|raw}}
  12.           </h1>
  13.         </header>
  14.         <!--// Main title block ENDS-->
  15.         <!--// Follow six steps wrapper starts -->
  16.         <div class="how-to-use-inner-content">
  17.             <!--Boxes wrapper starts //-->
  18.             <div class="mb-4">
  19.                  <header class="mb-4 how-to-use-subheader">
  20.                 <h2 class="sec-page-lead-text--light-blue how-to-use-subheader__title">
  21.                   {{"six-steps"|trans|raw}}
  22.                 </h2>
  23.                 </header>
  24.                 <!-- Follow six steps block starts //-->
  25.                 <div class="mb-2 how-to-use-wrapper">
  26.                     <!--Box starts //-->
  27.                     <div class="how-to-use-block">
  28.                         <!--Card starts //-->
  29.                         <div class="card pl-2 pr-2 pt-2 pb-2 st-border st-radius how-to-use-card">
  30.                             <!--Card block starts //-->
  31.                             <a href="/about/about-psychosocial-factors">
  32.                                 <!--Card block content starts //-->
  33.                                 <div class="card-block st-radius">
  34.                                     <!--Card block's figure starts //-->
  35.                                     <figure>
  36.                                         <!--Card block's icon wrapper starts //-->
  37.                                         <div class="mb-6 pt-2 pb-2 pl-2 pr-2 center-block st-radius bg-primary how-to-use-icon-wrapper">
  38.                                             <img src="../assets/img/six_steps_icon1.svg" class="center-block how-to-use-icon" alt="" />
  39.                                         </div>
  40.                                         <!--Card block's icon wrapper ends //-->
  41.                                         <!--Card block's figcaption starts //-->
  42.                                         <figcaption class="center-block">
  43.                                             <!--Card block's number with title start //-->
  44.                                             <div class="text-center center-block">
  45.                                                 <!--Card block's number starts //-->
  46.                                                 <div class="how-to-use-numberCircle-block">
  47.                                                     <span class="numberCircle bg-info color-white"><span>1</span></span>
  48.                                                 </div>
  49.                                                 <!--Card block's number ends //-->
  50.                                                 <!--Card block's title starts //-->
  51.                                                 <p class="text-center sec-page-main-title--dark-blue how-to-use-caption">
  52.                                                   {{"understand"|trans|raw}}
  53.                                                 </p>
  54.                                                 <!--Card block's title ends //-->
  55.                                             </div>
  56.                                             <!--Card block's number with title end //-->
  57.                                         </figcaption>
  58.                                         <!--Card block's figcaption ends //-->
  59.                                     </figure>
  60.                                     <!--Card block's figure ends //-->
  61.                                 </div>
  62.                                 <!--Card block content ends //-->
  63.                             </a>
  64.                             <!--Card block ends //-->
  65.                         </div>
  66.                         <!--Card ends //-->
  67.                     </div>
  68.                     <!--Box ends //-->
  69.                     <!--Box starts //-->
  70.                     <div class="how-to-use-block">
  71.                         <!--Card starts //-->
  72.                         <div class="card pl-2 pr-2 pt-2 pb-2 st-border st-radius how-to-use-card">
  73.                             <!--Card block starts //-->
  74.                             <a href="/about/about-plan">
  75.                                 <!--Card block content starts //-->
  76.                                 <div class="card-block st-radius">
  77.                                     <!--Card block's figure starts //-->
  78.                                     <figure>
  79.                                         <!--Card block's icon wrapper starts //-->
  80.                                         <div class="mb-6 pt-2 pb-2 pl-2 pr-2 center-block st-radius bg-primary how-to-use-icon-wrapper">
  81.                                             <img src="../assets/img/six_steps_icon2.svg" class="center-block how-to-use-icon" alt="">
  82.                                         </div>
  83.                                         <!--Card block's icon wrapper ends //-->
  84.                                         <!--Card block's figcaption starts //-->
  85.                                         <figcaption class="center-block">
  86.                                             <!--Card block's number with title start //-->
  87.                                             <div class="text-center center-block">
  88.                                                 <!--Card block's number starts //-->
  89.                                                 <div class="how-to-use-numberCircle-block">
  90.                                                     <span class="numberCircle bg-info color-white"><span>2</span></span>
  91.                                                 </div>
  92.                                                 <!--Card block's number ends //-->
  93.                                                 <!--Card block's title starts //-->
  94.                                                 <p class="text-center sec-page-main-title--dark-blue how-to-use-caption">
  95.                                                   {{"howtouse-step-5"|trans|raw}}
  96.                                                 </p>
  97.                                                 <!--Card block's title ends //-->
  98.                                             </div>
  99.                                             <!--Card block's number with title end //-->
  100.                                         </figcaption>
  101.                                         <!--Card block's figcaption ends //-->
  102.                                     </figure>
  103.                                     <!--Card block's figure ends //-->
  104.                                 </div>
  105.                                 <!--Card block content ends //-->
  106.                             </a>
  107.                             <!--Card block ends //-->
  108.                         </div>
  109.                         <!--Card ends //-->
  110.                     </div>
  111.                     <!--Box ends //-->
  112.                     <!--Box starts //-->
  113.                     <div class="how-to-use-block">
  114.                         <!--Card starts //-->
  115.                         <div class="card pl-2 pr-2 pt-2 pb-2 st-border st-radius how-to-use-card">
  116.                             <!--Card block starts //-->
  117.                             <a href="/about/about-signup">
  118.                                 <!--Card block content starts //-->
  119.                                 <div class="card-block st-radius">
  120.                                     <!--Card block's figure starts //-->
  121.                                     <figure>
  122.                                         <!--Card block's icon wrapper starts //-->
  123.                                         <div class="mb-6 pt-2 pb-2 pl-2 pr-2 center-block st-radius bg-primary how-to-use-icon-wrapper">
  124.                                             <img src="../assets/img/six_steps_icon3.svg" class="center-block how-to-use-icon" alt="">
  125.                                         </div>
  126.                                         <!--Card block's icon wrapper ends //-->
  127.                                         <!--Card block's figcaption starts //-->
  128.                                         <figcaption class="center-block">
  129.                                             <!--Card block's number with title start //-->
  130.                                             <div class="text-center center-block">
  131.                                                 <!--Card block's number starts //-->
  132.                                                 <div class="how-to-use-numberCircle-block">
  133.                                                     <span class="numberCircle bg-info color-white"><span>3</span></span>
  134.                                                 </div>
  135.                                                 <!--Card block's number ends //-->
  136.                                                 <!--Card block's title starts //-->
  137.                                                 <p class="text-center sec-page-main-title--dark-blue how-to-use-caption">
  138.                                                   {{"signup-account"|trans|raw}}
  139.                                                 </p>
  140.                                                 <!--Card block's title ends //-->
  141.                                             </div>
  142.                                             <!--Card block's number with title end //-->
  143.                                         </figcaption>
  144.                                         <!--Card block's figcaption ends //-->
  145.                                     </figure>
  146.                                     <!--Card block's figure ends //-->
  147.                                 </div>
  148.                                 <!--Card block content ends //-->
  149.                             </a>
  150.                             <!--Card block ends //-->
  151.                         </div>
  152.                         <!--Card ends //-->
  153.                     </div>
  154.                     <!--Box ends //-->
  155.                     <!--Box starts //-->
  156.                     <div class="how-to-use-block">
  157.                         <!--Card starts //-->
  158.                         <div class="card pl-2 pr-2 pt-2 pb-2 st-border st-radius how-to-use-card">
  159.                             <!--Card block starts //-->
  160.                             <a href="/about/about-review">
  161.                                 <!--Card block content starts //-->
  162.                                 <div class="card-block st-radius">
  163.                                     <!--Card block's figure starts //-->
  164.                                     <figure>
  165.                                         <!--Card block's icon wrapper starts //-->
  166.                                         <div class="mb-6 pt-2 pb-2 pl-2 pr-2 center-block st-radius bg-primary how-to-use-icon-wrapper">
  167.                                             <img src="../assets/img/six_steps_icon4.svg" class="center-block how-to-use-icon" alt="">
  168.                                         </div>
  169.                                         <!--Card block's icon wrapper ends //-->
  170.                                         <!--Card block's figcaption starts //-->
  171.                                         <figcaption class="center-block">
  172.                                             <!--Card block's number with title start //-->
  173.                                             <div class="text-center center-block">
  174.                                                 <!--Card block's number starts //-->
  175.                                                 <div class="how-to-use-numberCircle-block">
  176.                                                     <span class="numberCircle bg-info color-white"><span>4</span></span>
  177.                                                 </div>
  178.                                                 <!--Card block's number ends //-->
  179.                                                 <!--Card block's title starts //-->
  180.                                                 <p class="text-center sec-page-main-title--dark-blue how-to-use-caption">
  181.                                                   {{"complete-review"|trans|raw}}
  182.                                                 </p>
  183.                                                 <!--Card block's title ends //-->
  184.                                             </div>
  185.                                             <!--Card block's number with title end //-->
  186.                                         </figcaption>
  187.                                         <!--Card block's figcaption ends //-->
  188.                                     </figure>
  189.                                     <!--Card block's figure ends //-->
  190.                                 </div>
  191.                                 <!--Card block content ends //-->
  192.                             </a>
  193.                             <!--Card block ends //-->
  194.                         </div>
  195.                         <!--Card ends //-->
  196.                     </div>
  197.                     <!--Box ends //-->
  198.                     <!--Box starts //-->
  199.                     <div class="how-to-use-block">
  200.                         <!--Card starts //-->
  201.                         <div class="card pl-2 pr-2 pt-2 pb-2 st-border st-radius how-to-use-card">
  202.                             <!--Card block starts //-->
  203.                             <a href="/about/about-results">
  204.                                 <!--Card block content starts //-->
  205.                                 <div class="card-block st-radius">
  206.                                     <!--Card block's figure starts //-->
  207.                                     <figure>
  208.                                         <!--Card block's icon wrapper starts //-->
  209.                                         <div class="mb-6 pt-2 pb-2 pl-2 pr-2 center-block st-radius bg-primary how-to-use-icon-wrapper">
  210.                                             <img src="../assets/img/six_steps_icon5.svg" class="center-block how-to-use-icon" alt="">
  211.                                         </div>
  212.                                         <!--Card block's icon wrapper ends //-->
  213.                                         <!--Card block's figcaption starts //-->
  214.                                         <figcaption class="center-block">
  215.                                             <!--Card block's number with title start //-->
  216.                                             <div class="text-center center-block">
  217.                                                 <!--Card block's number starts //-->
  218.                                                 <div class="how-to-use-numberCircle-block">
  219.                                                     <span class="numberCircle bg-info color-white"><span>5</span></span>
  220.                                                 </div>
  221.                                                 <!--Card block's number ends //-->
  222.                                                 <!--Card block's title starts //-->
  223.                                                 <p class="text-center sec-page-main-title--dark-blue how-to-use-caption">
  224.                                                   {{"track"|trans|raw}}
  225.                                                 </p>
  226.                                                 <!--Card block's title ends //-->
  227.                                             </div>
  228.                                             <!--Card block's number with title end //-->
  229.                                         </figcaption>
  230.                                         <!--Card block's figcaption ends //-->
  231.                                     </figure>
  232.                                     <!--Card block's figure ends //-->
  233.                                 </div>
  234.                                 <!--Card block content ends //-->
  235.                             </a>
  236.                             <!--Card block ends //-->
  237.                         </div>
  238.                         <!--Card ends //-->
  239.                     </div>
  240.                     <!--Box ends //-->
  241.                     <!--Box starts //-->
  242.                     <div class="how-to-use-block">
  243.                         <!--Card starts //-->
  244.                         <div class="card pl-2 pr-2 pt-2 pb-2 st-border st-radius how-to-use-card">
  245.                             <!--Card block starts //-->
  246.                             <a href="/about/about-evaluate">
  247.                                 <!--Card block content starts //-->
  248.                                 <div class="card-block st-radius">
  249.                                     <!--Card block's figure starts //-->
  250.                                     <figure>
  251.                                         <!--Card block's icon wrapper starts //-->
  252.                                         <div class="mb-6 pt-2 pb-2 pl-2 pr-2 center-block st-radius bg-primary how-to-use-icon-wrapper">
  253.                                             <img src="../assets/img/six_steps_icon6.svg" class="center-block how-to-use-icon" alt="">
  254.                                         </div>
  255.                                         <!--Card block's icon wrapper ends //-->
  256.                                         <!--Card block's figcaption starts //-->
  257.                                         <figcaption class="center-block">
  258.                                             <!--Card block's number with title start //-->
  259.                                             <div class="text-center center-block">
  260.                                                 <!--Card block's number starts //-->
  261.                                                 <div class="how-to-use-numberCircle-block">
  262.                                                     <span class="numberCircle bg-info color-white"><span>6</span></span>
  263.                                                 </div>
  264.                                                 <!--Card block's number ends //-->
  265.                                                 <!--Card block's title starts //-->
  266.                                                 <p class="text-center sec-page-main-title--dark-blue how-to-use-caption">
  267.                                                   {{"evaluate"|trans|raw}}
  268.                                                 </p>
  269.                                                 <!--Card block's title ends //-->
  270.                                             </div>
  271.                                             <!--Card block's number with title end //-->
  272.                                         </figcaption>
  273.                                         <!--Card block's figcaption ends //-->
  274.                                     </figure>
  275.                                     <!--Card block's figure ends //-->
  276.                                 </div>
  277.                                 <!--Card block content ends //-->
  278.                             </a>
  279.                             <!--Card block ends //-->
  280.                         </div>
  281.                         <!--Card ends //-->
  282.                     </div>
  283.                     <!--Box ends //-->
  284.                 </div>
  285.                 <!-- Follow six steps block ends //-->
  286.             </div>
  287.             <!--Boxes wrapper ends //-->
  288.         
  289.             <!-- Follow six steps wrapper ends //-->
  290.         
  291.         </div>
  292.         <!--// Follow six steps wrapper ends -->
  293.      </article>
  294.     <!-- Main content block ends //-->
  295. </main>
  296. {% endblock %}