Style

Dimensions

Features

Themes

Colors

Preview

Task Name
Project Planning
Requirements Analysis
Design Phase
Design Review
Development
Testing
Deployment
Go Live
Thu1
Fri2
Sat3
Sun4
Mon5
Tue6
Wed7
Thu8
Fri9
Sat10
Sun11
Mon12
Tue13
Wed14
Thu15
Fri16
Sat17
Sun18
Mon19
Tue20
Wed21
Thu22
Fri23
Sat24
Sun25
Mon26
Tue27
Wed28
Thu29
Fri30
Sat31
Sun1
Mon2
Tue3
Wed4
Thu5
Fri6
Sat7
Sun8
Mon9
Tue10
Wed11
Thu12
Fri13
Sat14
Project Planning
Requirements Analysis
Design Phase
Development
Testing
Deployment
<div class="gantt-chart">
  <div class="gantt-sidebar">
    <div class="gantt-sidebar-header">Task Name</div>
    <div class="gantt-sidebar-row">Project Planning</div>
    <div class="gantt-sidebar-row">Requirements Analysis</div>
    <div class="gantt-sidebar-row">Design Phase</div>
    <div class="gantt-sidebar-row">Design Review</div>
    <div class="gantt-sidebar-row">Development</div>
    <div class="gantt-sidebar-row">Testing</div>
    <div class="gantt-sidebar-row">Deployment</div>
    <div class="gantt-sidebar-row">Go Live</div>
  </div>
  <div class="gantt-timeline">
    <div class="gantt-header">
      <div class="gantt-header-cell">
        <span class="weekday">Thu</span>
        <span class="day">1</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Fri</span>
        <span class="day">2</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sat</span>
        <span class="day">3</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sun</span>
        <span class="day">4</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Mon</span>
        <span class="day">5</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Tue</span>
        <span class="day">6</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Wed</span>
        <span class="day">7</span>
      </div>
      <div class="gantt-header-cell today">
        <span class="weekday">Thu</span>
        <span class="day">8</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Fri</span>
        <span class="day">9</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sat</span>
        <span class="day">10</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sun</span>
        <span class="day">11</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Mon</span>
        <span class="day">12</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Tue</span>
        <span class="day">13</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Wed</span>
        <span class="day">14</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Thu</span>
        <span class="day">15</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Fri</span>
        <span class="day">16</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sat</span>
        <span class="day">17</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sun</span>
        <span class="day">18</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Mon</span>
        <span class="day">19</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Tue</span>
        <span class="day">20</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Wed</span>
        <span class="day">21</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Thu</span>
        <span class="day">22</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Fri</span>
        <span class="day">23</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sat</span>
        <span class="day">24</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sun</span>
        <span class="day">25</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Mon</span>
        <span class="day">26</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Tue</span>
        <span class="day">27</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Wed</span>
        <span class="day">28</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Thu</span>
        <span class="day">29</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Fri</span>
        <span class="day">30</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sat</span>
        <span class="day">31</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sun</span>
        <span class="day">1</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Mon</span>
        <span class="day">2</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Tue</span>
        <span class="day">3</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Wed</span>
        <span class="day">4</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Thu</span>
        <span class="day">5</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Fri</span>
        <span class="day">6</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sat</span>
        <span class="day">7</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sun</span>
        <span class="day">8</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Mon</span>
        <span class="day">9</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Tue</span>
        <span class="day">10</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Wed</span>
        <span class="day">11</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Thu</span>
        <span class="day">12</span>
      </div>
      <div class="gantt-header-cell">
        <span class="weekday">Fri</span>
        <span class="day">13</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sat</span>
        <span class="day">14</span>
      </div>
      <div class="gantt-header-cell weekend">
        <span class="weekday">Sun</span>
        <span class="day">15</span>
      </div>
    </div>
    <div class="gantt-body">
      <div class="gantt-row">
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell today"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-bar" style="left: 0px; width: 196px; background-color: #3b82f6">
          <div class="gantt-progress" style="width: 100%"></div>
          <span class="gantt-bar-label">Project Planning</span>
        </div>
      </div>
      <div class="gantt-row">
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell today"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-bar" style="left: 120px; width: 276px; background-color: #8b5cf6">
          <div class="gantt-progress" style="width: 80%"></div>
          <span class="gantt-bar-label">Requirements Analysis</span>
        </div>
      </div>
      <div class="gantt-row">
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell today"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-bar" style="left: 320px; width: 396px; background-color: #22c55e">
          <div class="gantt-progress" style="width: 60%"></div>
          <span class="gantt-bar-label">Design Phase</span>
        </div>
      </div>
      <div class="gantt-row">
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell today"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-milestone" style="left: 730px; background-color: #f97316"></div>
      </div>
      <div class="gantt-row">
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell today"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-bar" style="left: 760px; width: 596px; background-color: #06b6d4">
          <div class="gantt-progress" style="width: 30%"></div>
          <span class="gantt-bar-label">Development</span>
        </div>
      </div>
      <div class="gantt-row">
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell today"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-bar" style="left: 1200px; width: 316px; background-color: #ec4899">
          <div class="gantt-progress" style="width: 0%"></div>
          <span class="gantt-bar-label">Testing</span>
        </div>
      </div>
      <div class="gantt-row">
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell today"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-bar" style="left: 1520px; width: 116px; background-color: #f97316">
          <div class="gantt-progress" style="width: 0%"></div>
          <span class="gantt-bar-label">Deployment</span>
        </div>
      </div>
      <div class="gantt-row">
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell today"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-cell weekend"></div>
        <div class="gantt-milestone" style="left: 1650px; background-color: #ef4444"></div>
      </div>
    </div>
  </div>
</div>