<?php
/* panel for start tad in tutorials page */
 ?>
<div class="container">
  <div class="row">
    <div class="columns one-third">
      <div class="iframe">
        <iframe src="https://www.youtube-nocookie.com/embed/snKSPByqbBM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <h3>
        Overview of the Smart Grid and type of forms that can be achieved using this extension.
      </h3>
      <ul>
        <li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&amp;t=10s">00:00:10</a><span> - From simple CF7 to professional forms</span></li></li>
        <li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&amp;t=75s">00:01:15</a><span> - dynamic dropdown fields</span></li>
        <li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&amp;t=150s">00:02:30</a><span> - collapsed &amp; toggled sections </span></li>
        <li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&amp;t=190s">00:03:10</a><span> - table of fields constructs for repetitive inputs</span></li>
        <li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&amp;t=210s">00:03:30</a><span> - multi-steps slider forms</span></li>
        <li><a href="https://www.youtube.com/watch?v=snKSPByqbBM&amp;t=275s">00:04:35</a><span> - tabbed form sections for repetitive field inputs.</span></li>
      </ul>
    </div>
    <div class="columns one-third">
      <div class="iframe">
        <iframe src="https://www.youtube-nocookie.com/embed/vBSsfra2s48" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <h3>
        Basic introduction to the Smart Grid UI editor and the colour HTML text editor.
      </h3>
      <ul>
        <li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&amp;t=15s">00:00:15</a><span> - Installing the plugin,</span></li>
        <li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&amp;t=75s">00:01:15</a><span> - disabled grid editor for existing forms,</span></li>
        <li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&amp;t=125s">00:02:05</a><span> - creating a new form,</span></li>
        <li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&amp;t=155s">00:02:35</a><span> - forms are automatically responsive,</span></li>
        <li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&amp;t=185s">00:03:05</a><span> - starting a new form,</span></li>
        <li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&amp;t=195s">00:03:15</a><span> - adding/deleting/moving rows,</span></li>
        <li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&amp;t=250s">00:04:10</a><span> - adding/deleting/moving columns,</span></li>
        <li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&amp;t=370s">00:06:10</a><span> - resizing/offsetting columns,</span></li>
        <li><a href="https://www.youtube.com/watch?v=vBSsfra2s48&amp;t=453s">00:07:33</a><span> - navigating between the grid and HTML editor.</span></li>
      </ul>
    </div>
  <!--/div>
  <div class="row" -->
    <div class="columns one-third">
      <div class="iframe">
        <iframe src="https://www.youtube-nocookie.com/embed/0DYxRpWc_F0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
      </div>
      <h3>
        Example how to design a 2-column form layout
      </h3>
      <ul>
        <li><a href="https://www.youtube.com/watch?v=0DYxRpWc_F0&amp;t=159s">00:02:39</a><span> - Form start</span></li>
        <li><a href="https://www.youtube.com/watch?v=0DYxRpWc_F0&amp;t=640s">00:10:40</a><span> - Initial result</span></li>
        <li><a href="https://www.youtube.com/watch?v=0DYxRpWc_F0&amp;t=825s">00:13:45</a><span> - customising the HTML code</span></li>
        <li><a href="https://www.youtube.com/watch?v=0DYxRpWc_F0&amp;t=1080s">00:18:00</a><span> - custom CSS styling</span></li>
      </ul>
    </div>
  </div>
</div>
