<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="spacer"></div> <div class="card"> <div class="card-body"> <h5 class="card-title">List of ongoing projects</h5> <div class="row"> <div class="col-md-3"> <div class="card"> <div class="card-body"> <button class="btn btn-link btn-sm">Atomic bicycle V1</button> <span class="badge badge-pill badge-success">On time</span> </div> </div> </div> <div class="col-md-3"> <div class="card"> <div class="card-body"> <button class="btn btn-link btn-sm">Lawnmower 500HP</button> <span class="badge badge-pill badge-success">On time</span> </div> </div> </div> <div class="col-md-3"> <div class="card"> <div class="card-body"> <button class="btn btn-link btn-sm">Flying car V1</button> <span class="badge badge-pill badge-warning">Dalayed</span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12"> <div style="height: 2em"></div> <div class="card"> <div class="card-header"> <h5>Atomic Bicycle V1</h5> <ul class="nav nav-tabs card-header-tabs"> <li class="nav-item"> <a class="nav-link active" id="stat-1-tab" data-toggle="tab" href="#stat-1" role="tab" aria-controls="stat-1" aria-selected="true">Statistics</a> </li> <li class="nav-item"> <a class="nav-link"id="task-1-tab" data-toggle="tab" href="#task-1" role="tab" aria-controls="task-1" aria-selected="false">Tasks</a> </li> <li class="nav-item"> <a class="nav-link"id="team-1-tab" data-toggle="tab" href="#team-1" role="tab" aria-controls="team-1" aria-selected="false">Team</a> </li> </ul> </div> <div class="card-body"> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="stat-1" role="tabpanel" aria-labelledby="stat-1-tab"> <div class="row"> <div class="col-md-12"> <table class="table table-bordered table-striped"> <thead> <tr class="table"> <th scope="col">Today date</td> <th scope="col">Deadline</td> <th scope="col">Time left</td> <th scope="col">Time needed</td> </tr> </thead> <tbody> <tr> <td>17/07/2019</td> <td>27/09/2019</td> <td>52 days</td> <td>45 days <span class="badge badge-pill badge-success">- 7d</span></td> </tr> </tbody> </table> </div> </div> <div class="row"> <div class="col-md-4"> <div class="card"> <div class="card-body"> <span><strong style="font-size: 2em" class="card-title">28</strong></span> <small class="card-text">Agile Velocity <span class="badge badge-pill badge-success">+ 2</span></small> </div> <div class="card-footer"> <button class="btn btn-link btn-sm">Burndown Chart</button> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <span><strong style="font-size: 2em" class="card-title">74</strong></span> <small class="card-text">Unit test <span class="badge badge-pill badge-success">OK</span></small> </div> <div class="card-footer"> <button class="btn btn-link btn-sm">Test report</button> </div> </div> </div> <div class="col-md-4"> <div class="card"> <div class="card-body"> <span><strong style="font-size: 2em" class="card-title">7</strong></span> <small class="card-text">Unit test <span class="badge badge-pill badge-danger">KO</span></small> </div> <div class="card-footer"> <button class="btn btn-link btn-sm">Test resport</button> </div> </div> </div> </div> <div class="spacer"></div> <div class="row"> <div class="col-md-12"> <label>Completion Percentage :</label> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div> </div> </div> </div> <div class="spacer"></div> <div class="row"> <div class="col-md-12"> <label>Man-days used percentage : <span class="badge badge-pill badge-warning">+ 5%</span></label> <div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 85%;" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">85%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 5%;" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100">5%</div> </div> </div> </div> </div> <div class="tab-pane fade" id="task-1" role="tabpanel" aria-labelledby="task-1-tab"> <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Desc</th> <th scope="col">State</th> <th scope="col">Actions</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Conception</td> <td>Make studies on UX design, technology needs and budget.</td> <td><span class="badge badge-pill badge-success">Ended</span></td> <td><button class="btn btn-link btn-sm">Go to task info</button></td> </tr> <tr> <th scope="row">2</th> <td>Piece developement</td> <td>Construct motor, wheels, lights ...</td> <td><span class="badge badge-pill badge-success">Ended</span></td> <td><button class="btn btn-link btn-sm">Go to task info</button></td> </tr> <tr> <th scope="row">3</th> <td>Assembly</td> <td>Make the bicycle with pieces.</td> <td><span class="badge badge-pill badge-warning">Work in progress</span></td> <td><button class="btn btn-link btn-sm">Go to task info</button></td> </tr> <tr> <th scope="row">4</th> <td>Tests</td> <td>Verify product with the Testing plan.</td> <td><span class="badge badge-pill badge-primary">To do</span></td> <td><button class="btn btn-link btn-sm">Go to task info</button></td> </tr> <tr> <th scope="row">5</th> <td>Sending</td> <td>Send the bicycle</td> <td><span class="badge badge-pill badge-primary">To do</span></td> <td><button class="btn btn-link btn-sm">Go to task info</button></td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="team-1" role="tabpanel" aria-labelledby="team-1-tab"> <table class="table table-striped"> <thead> <tr> <th scope="col">#</th> <th scope="col">Name</th> <th scope="col">Type</th> <th scope="col">Actions</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark Otto</td> <td><span class="badge badge-pill badge-primary">UX/UI Designer</span></td> <td><button class="btn btn-link btn-sm">Go to profile</button></td> </tr> <tr> <th scope="row">2</th> <td>Jhon Doe</td> <td><span class="badge badge-pill badge-warning">Engineer</span></td> <td><button class="btn btn-link btn-sm">Go to profile</button></td> </tr> <tr> <th scope="row">3</th> <td>Thibault Leveau</td> <td><span class="badge badge-pill badge-warning">Engineer</span></td> <td><button class="btn btn-link btn-sm">Go to profile</button></td> </tr> <tr> <th scope="row">4</th> <td>Jean Zobbix</td> <td><span class="badge badge-pill badge-primary">UX/UI Designer</span></td> <td><button class="btn btn-link btn-sm">Go to profile</button></td> </tr> <tr> <th scope="row">5</th> <td>Thibeauf Dupont</td> <td><span class="badge badge-pill badge-danger">Project Manager</span></td> <td><button class="btn btn-link btn-sm">Go to profile</button></td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div> </div>

body { background-color: #e9ebee99; } .spacer { height: 1em; }