Display a synopsis of information for team members. (Alternative Design 2)
Code:
<div class="row justify-content-md-center">
<div class="col-lg-4 col-md-6">
<div class="card bg-dark text-white">
<!-- Heading Area (name/title) -->
<div class="card-body">
<div class="row">
<div class="col text-center">
<h2 class="display-4">John Doe</h2>
<p>Position or Title</p>
</div>
</div>
</div>
<!-- Description Area (skills and social links) -->
<div class="card-body">
<div class="row">
<div class="col">
Skill 1
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
Skill 2
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
Skill 3
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="row">
<div class="col">
Skill 4
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="card-body text-center">
<strong>Twitter: </strong><a href="#" class="text-warning">twitterHandle</a>
</div>
</div>
</div>
</div>