www_jungle_paradise/templates/shortcodes/roadmap1.html

<!-- component -->

<div class="container mx-auto">
    <div class="relative wrap overflow-hidden px-2 mx-2 sm:mx-20 md:mx-28 lg:mx-40 my-8">
      <h2 class="text-center py-4">ThreeFold Foundation Roadmap</h2>

      <hr class="green_line">
      <br>
      <br>
      <div class="border-2-2 absolute border-opacity-20 border-green-700 h-full border" style="left: 50%"></div>

      <!-- Q2 2017 right timeline -->
      <div class="mb-8 flex justify-between items-center w-full right-timeline">
        <div class="order-1 w-5/12"></div>
        <!--  number -->
        <div class="z-20 flex items-center order-1 bg-gray-600 shadow-xl w-8 h-8 rounded-full">
          <h1 class="mx-auto font-semibold text-lg text-white">1</h1>
        </div>
        <div class="order-1 bg-gray-100 rounded-lg shadow-md w-5/12 px-2 lg:px-6 py-4">
          <h3 class="mb-3 font-bold green_header text-lg lg:text-xl">Q2 2017<br>PROJECT LAUNCH</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Launch of ThreeFold Decentralized Internet</p>
        </div>
      </div>
  
      <!-- Q2 2018 left timeline -->
      <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
        <div class="order-1 w-5/12"></div>
        <!--  number -->
        <div class="z-20 flex items-center order-1 bg-gray-600 shadow-xl w-8 h-8 rounded-full">
          <h1 class="mx-auto text-white font-semibold text-lg">2</h1>
        </div>
        <div class="order-1 bg-gray-100 rounded-lg shadow-md w-5/12 px-2 lg:px-6 py-4">
          <h3 class="mb-3 font-bold green_header text-lg lg:text-xl">Q2 2018<br>BLOCKCHAIN ACTIVATED</h3>
          <p class="text-sm font-medium leading-snug tracking-wide text-gray-900text-opacity-100">Grid Capacity Generation<br>
            Blockchain / Token Launch</p>
        </div>
      </div>

       <!-- Q3/Q4 2018 right timeline -->
       <div class="mb-8 flex justify-between items-center w-full right-timeline">
        <div class="order-1 w-5/12"></div>
        <!--  number -->
        <div class="z-20 flex items-center order-1 bg-gray-600 shadow-xl w-8 h-8 rounded-full">
          <h1 class="mx-auto font-semibold text-lg text-white">3</h1>
        </div>
        <div class="order-1 bg-gray-100 rounded-lg shadow-md w-5/12 px-2 lg:px-6 py-4">
          <h3 class="mb-3 font-bold green_header text-lg lg:text-xl">Q3/Q4 2018<br>BIG PARTNERSHIP AND CAPACITY DEPLOYMENT</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Atomic Swap Support for decentralized exchange
            10x more capacity active compared to other blockchain projects (79Pb)<br>
            HPE & SOLIDARIDAD partnerships to promote farming of capacity<br>
            HPE Partnership</p>
        </div>
      </div>
  
      <!-- Q2 2019 left timeline -->
      <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
        <div class="order-1 w-5/12"></div>
        <!--  number -->
        <div class="z-20 flex items-center order-1 bg-gray-600 shadow-xl w-8 h-8 rounded-full">
          <h1 class="mx-auto text-white font-semibold text-lg">4</h1>
        </div>
        <div class="order-1 bg-gray-100 rounded-lg shadow-md w-5/12 px-2 lg:px-6 py-4">
          <h3 class="mb-3 font-bold green_header text-lg lg:text-xl">Q2 2019<br>TESTNET AND MINTING LAUNCH</h3>
          <p class="text-sm font-medium leading-snug tracking-wide text-gray-900text-opacity-100">Grid Capacity Utilization (Testnet)<br>
            Grid 1.0 Services<br>
            ThreeFold Token Minting in public grid<br>
            Private Zero OS, S3 storage, Web- Gateway, ZeroDB, Launch FreeFlow Pages (Beta),<br>
            Launch Digital Twin<br>
            Blockchain / Token Launch</p>
        </div>
      </div>


       <!-- Q2 2020 right timeline -->
       <div class="mb-8 flex justify-between items-center w-full right-timeline">
        <div class="order-1 w-5/12"></div>
        <!--  number -->
        <div class="z-20 flex items-center order-1 bg-gray-600 shadow-xl w-8 h-8 rounded-full">
          <h1 class="mx-auto font-semibold text-lg text-white">5</h1>
        </div>
        <div class="order-1 bg-gray-100 rounded-lg shadow-md w-5/12 px-2 lg:px-6 py-4">
          <h3 class="mb-3 font-bold green_header text-lg lg:text-xl">Q2 2020<br>PUBLIC GRID LAUNCH</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Grid Capacity Utilization (Public)
            Support Grid 1.1 Services<br>
            Private Zero OS, S3 storage, Web- Gateway, ZeroDB, Live Launch ThreeFold Now Marketplace<br>
            Migration from Rivine to Stellar Blockchain<br>
            Digibyte Partnership<br>
            Dash/Next Partnership<br>
            Waykichain Partnership</p>
        </div>
      </div>
  
      <!-- Q3/Q4 2020 left timeline -->
      <div class="mb-8 flex justify-between flex-row-reverse items-center w-full left-timeline">
        <div class="order-1 w-5/12"></div>
        <!--  number -->
        <div class="z-20 flex items-center order-1 bg-gray-600 shadow-xl w-8 h-8 rounded-full">
          <h1 class="mx-auto text-white font-semibold text-lg">6</h1>
        </div>
        <div class="order-1 bg-gray-100 rounded-lg shadow-md w-5/12 px-2 lg:px-6 py-4">
          <h3 class="mb-3 font-bold green_header text-lg lg:text-xl">Q3/Q4 2020<br> PUBLIC GRID UPDATES</h3>
          <p class="text-sm font-medium leading-snug tracking-wide text-gray-900text-opacity-100">Launch 2.2 and 2.4 versions of the TF Grid<br>
            Hosted Digital Twin launched for the public<br>
            Public Launch Threefold now (App Marketplace)<br>
            Skale Lab Partnership<br>
            Whitepaper 2.3 Release</p>
        </div>
      </div>

      <!-- Q1/Q2 2021 right timeline -->
      <div class="mb-8 flex justify-between items-center w-full right-timeline">
        <div class="order-1 w-5/12"></div>
        <!--  number -->
        <div class="z-20 flex items-center order-1 bg-gray-600 shadow-xl w-8 h-8 rounded-full">
          <h1 class="mx-auto font-semibold text-lg text-white">7</h1>
        </div>
        <div class="order-1 bg-gray-100 rounded-lg shadow-md w-5/12 px-2 lg:px-6 py-4">
          <h3 class="mb-3 font-bold green_header text-lg lg:text-xl">Q1/Q2 2021<br>SCALING THE GRID + MORE USECASES</h3>
          <p class="text-sm leading-snug tracking-wide text-gray-900 text-opacity-100">Public Launch Of Certified Capacity On The Grid<br>
            Public launch of ThreeFold eVDC<br>
            Whitepaper 2.4 Release</p>
        </div>
      </div>

    </div>
  </div>

  <style>
    .green_header{
    color:#68b622 ;
    }
  </style>