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

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