<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<!-- Card -->
<div class="card">
<!-- Card image -->
<div class="background-color rounded-pill mx-auto mt-5">
<img class="rounded-pill" src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg" width="200"
height="200" alt="Card image cap">
</div>
<!-- Card content -->
<div class="card-body text-center">
<!-- Title -->
<p class="fa-lg mt-5 title-text">Anna</p>
<p class="fa-2x font-weight-bold title-text">Doe</p>
<!-- Text -->
<!--Position-->
<p class="mt-3 position">Graphic designer</p>
<!--Position-->
<p><i class=" fa-sm fas fa-circle divider mt-3"></i></p>
<img class="img-fluid" src="https://i.ibb.co/9cyZPZH/signature-1.png">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="pills-home-tab">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet euismod dui.
In auctor dapibus lorem eget lobortis. Aliquam tincidunt, sem vel sagittis tempus, justo diam tempor
magna, eu molestie velit arcu a ex. Suspendisse quis faucibus elit. Aliquam ex quam, dignissim eu
dignissim in, dapibus eu purus. Aliquam nec facilisis ante. Pellentesque vehicula velit ipsum, eu
fermentum nunc sagittis non</div>
<div class="tab-pane fade" id="mail" role="tabpanel" aria-labelledby="pills-profile-tab">
[email protected]</div>
<div class="tab-pane fade" id="page" role="tabpanel" aria-labelledby="pills-contact-tab">example-page.com</div>
</div>
<ul class="nav md-pills nav-justified pills-brown">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#about" role="tab">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#mail" role="tab">Mail</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page" role="tab">Page</a>
</li>
</ul>
</div>
</div>
<!-- Card -->
</div>
</div>
</div>
.background-color {
background-color: #d7ccc8;
}
.background-color > img {
transform: translateY(20%);
}
.title-text {
margin-bottom: 0 !important;
letter-spacing: 15px;
color: #bcaaa4;
}
.title-text:first-child {
color: #d7ccc8;
}
.position {
letter-spacing: 5px;
}
.divider {
color: #d7ccc8;
}
#pills-tabContent {
padding-top: 0 !important;
}
.tab-pane {
color:#8d6e63;
}