mdbootstrap4-pro
Version:
MDBootstrap 4 PRO
1,100 lines (900 loc) • 73.5 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="../../css/bootstrap.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="../../css/mdb.min.css">
<!-- Your custom styles (optional) -->
<style>
.border-dark {
border-color: #d2d2d2 !important;
background: #fff;
}
.primary-text {
color: #4285F4;
}
body {
background-color: #f1f1f5;
}
</style>
</head>
<body class="fixed-sn">
<!--Main Navigation-->
<header>
</header>
<!--Main Navigation-->
<!--Main layout-->
<main>
<div class="container-fluid my-5">
<div class="row">
<!-- Main column -->
<div class="col-md-10">
<!-- HERE DOCS -->
<!--Section: Page content-->
<section>
<!--Section: Modals-->
<section>
<!--Modal: modalEditProfile-->
<div class="modal fade" id="modalEditProfile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-2 primary-color" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel77" role="tab">
<i class="fa fa-user mr-1"></i> Public info</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel88" role="tab">
<i class="fa fa-lock mr-1"></i> Account</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!--Panel 7-->
<div class="tab-pane fade in show active" id="panel77" role="tabpanel">
<!--Body-->
<div class="modal-body mb-1">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<!--First Name-->
<div class="md-form form-sm">
<input type="text" id="editProfile1" class="form-control">
<label for="editProfile1" class="">First name</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<!--Last Name-->
<div class="md-form form-sm">
<input type="text" id="editProfile2" class="form-control">
<label for="editProfile2" class="">Last name</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<!--Position-->
<div class="md-form form-sm">
<input type="text" id="editProfile3" class="form-control">
<label for="editProfile3" class="">Position</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<!--Company Name-->
<div class="md-form form-sm">
<input type="text" id="editProfile4" class="form-control">
<label for="editProfile4" class="">Company name</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-12">
<!--Company website-->
<div class="md-form form-sm">
<input type="text" id="editProfile5" class="form-control">
<label for="editProfile5" class="">Company website</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<!--Country-->
<select class="mdb-select colorful-select dropdown-primary" searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="3">Poland</option>
<option value="3">Japan</option>
</select>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<!--City-->
<div class="md-form form-sm mt-2">
<input type="text" id="editProfile6" class="form-control">
<label for="editProfile6" class="">City</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-12">
<!--Description-->
<div class="md-form">
<textarea type="text" id="editProfile7" class="md-textarea"></textarea>
<label for="editProfile7">Description</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<!--Facebook-->
<div class="md-form form-sm mt-2">
<input type="text" id="editProfile8" class="form-control">
<label for="editProfile8" class="">Facebook</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<!--Twitter-->
<div class="md-form form-sm mt-2">
<input type="text" id="editProfile9" class="form-control">
<label for="editProfile9" class="">Twitter</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<!--LinkedIn-->
<div class="md-form form-sm mt-2">
<input type="text" id="editProfile10" class="form-control">
<label for="editProfile10" class="">LinkedIn</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<!--Dribbble-->
<div class="md-form form-sm mt-2">
<input type="text" id="editProfile11" class="form-control">
<label for="editProfile11" class="">Dribbble</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes
<i class="fa fa-check ml-1"></i>
</button>
</div>
</div>
<!--/.Panel 7-->
<!--Panel 8-->
<div class="tab-pane fade" id="panel88" role="tabpanel">
<!--Body-->
<div class="modal-body">
<div class="md-form form-sm">
<input type="text" id="form224" class="form-control">
<label for="form24">User name</label>
</div>
<div class="md-form form-sm">
<input type="text" id="form24" class="form-control">
<label for="form24">Email address</label>
</div>
<p class="h5 text-center mt-5">Password change</p>
<div class="md-form form-sm">
<input type="password" id="form25" class="form-control">
<label for="form25">Current password</label>
</div>
<div class="md-form form-sm">
<input type="password" id="form26" class="form-control">
<label for="form26">New password</label>
</div>
<div class="md-form form-sm">
<input type="password" id="form27" class="form-control">
<label for="form27">Confirm new password</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes
<i class="fa fa-check ml-1"></i>
</button>
</div>
</div>
<!--/.Panel 8-->
</div>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalEditProfile-->
<!--Modal: modalFeedback-->
<div class="modal fade" id="modalFeedback" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header primary-color white-text">
<h4 class="title">
<i class="fa fa-newspaper-o"></i> New message</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mb-0">
<!--Subject-->
<div class="md-form form-sm">
<input type="text" id="modalFeedback1" class="form-control">
<label for="modalFeedback1" class="">Subject</label>
</div>
<!--Topic-->
<select class="mdb-select colorful-select dropdown-primary">
<option value="" disabled selected>Choose category</option>
<option value="1">Idea</option>
<option value="2">Feedback</option>
<option value="3">Bug</option>
</select>
<!--Message-->
<div class="md-form">
<textarea type="text" id="modalFeedback2" class="md-textarea" style="height: 150px;"></textarea>
<label for="modalFeedback2">Your message</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send
<i class="fa fa-paper-plane ml-1"></i>
</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalFeedback-->
<!--Modal: modalAchievment-->
<div class="modal fade" id="modalAchievment" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header primary-color white-text">
<h4 class="title">
<i class="fa fa-newspaper-o"></i> Bootstrap Master</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quibusdam modi veritatis non accusamus
distinctio consequuntur aliquam, assumenda tempore in illum aspernatur quia, minus ex! Eius tenetur
praesentium, consectetur quod!</p>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to
<i class="fa fa-arrow-right ml-1"></i>
</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalAchievment-->
<!--Modal: modalContactUser -->
<div class="modal fade" id="modalContactUser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal modal-lg" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header primary-color white-text">
<h4 class="title">
<i class="fa fa-envelope-o"></i> New Message</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mb-0">
<!--Basic textarea-->
<div class="md-form">
<textarea type="text" id="modalContactUser1" class="md-textarea" style="height: 400px;"></textarea>
<label for="modalContactUser1">Your message</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Send
<i class="fa fa-paper-plane ml-1"></i>
</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalContactUser-->
<!--Modal: modalSubmitProject-->
<div class="modal fade" id="modalSubmitProject" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog cascading-modal" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header primary-color white-text">
<h4 class="title">
<i class="fa fa-newspaper-o"></i> Submit new project</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body mb-0">
<!--Name-->
<div class="md-form form-sm">
<input type="text" id="newProject1" class="form-control">
<label for="newProject1" class="">Project name</label>
</div>
<!--Project URL address-->
<div class="md-form form-sm">
<input type="text" id="newProject2" class="form-control">
<label for="newProject2" class="">Project URL address</label>
</div>
<!--Image URL-->
<div class="md-form form-sm">
<input type="text" id="newProject3" class="form-control">
<label for="newProject3" class="">Image URL</label>
</div>
<!--Description-->
<div class="md-form">
<textarea type="text" id="newProject4" class="md-textarea"></textarea>
<label for="newProject4">Description</label>
</div>
</div>
<!--Footer-->
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit
<i class="fa fa-check ml-1"></i>
</button>
</div>
</div>
<!--/.Content-->
</div>
</div>
<!--Modal: modalSubmitProject-->
</section>
<!--Section: Modals-->
<!--Section: Tabs-->
<section>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified mdb-color lighten-2 mb-5" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#mainProfile1" role="tab">Profile
<i class="fa fa-user ml-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#mainProfile2" role="tab">Orders & invoices
<i class="fa fa-file-text ml-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#mainProfile3" role="tab">Affiliate
<i class="fa fa-money ml-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#mainProfile4" role="tab">
<span class="badge badge-danger badge-pill mr-2">4</span>
Messages
<i class="fa fa-envelope ml-2"></i>
</a>
</li>
</ul>
<!-- Nav tabs -->
<!-- Tab panels -->
<div class="tab-content pt-5">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="mainProfile1" role="tabpanel">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12">
<!--Section: Basic Info-->
<section class="card card-cascade card-avatar mb-4">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).jpg" alt="">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">
<strong>John Doe</strong>
</h4>
<h5>Web designer at
<a href="">MDBootstrap</a>
</h5>
<p class="grey-text mb-4">Warsaw, Poland</p>
<!-- Social -->
<a class="icons-sm fb-ic">
<i class="fa fa-facebook primary-text"> </i>
</a>
<a class="icons-sm tw-ic">
<i class="fa fa-twitter primary-text"> </i>
</a>
<a class="icons-sm gplus-ic">
<i class="fa fa-google-plus primary-text"> </i>
</a>
<a class="icons-sm email-ic">
<i class="fa fa-envelope primary-text"> </i>
</a>
<!--Text-->
<p class="card-text mt-4">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-primary btn-md" href="" role="button" data-toggle="modal" data-target="#modalEditProfile">Edit profile
<i class="fa fa-pencil ml-2"></i>
</a>
<a class="btn btn-mdb btn-md" href="" role="button" data-toggle="modal" data-target="#modalEditProfile">Log out
<i class="fa fa-sign-out ml-2"></i>
</a>
</section>
<!--Section: Basic Info-->
<!--Section: Achievements-->
<section class="card mb-4">
<div class="card-body text-center">
<h5>
<strong>John's Achievements</strong>
</h5>
<hr class="my-3">
<button type="button" class="btn btn-purple btn-sm btn-rounded px-2" data-toggle="modal" data-target="#modalAchievment">Bootstrap Master</button>
<button type="button" class="btn btn-primary btn-sm btn-rounded px-2" data-toggle="modal" data-target="#modalAchievment">WordPress Master</button>
<button type="button" class="btn btn-default btn-sm btn-rounded px-2" data-toggle="modal" data-target="#modalAchievment">Angular Master</button>
<button type="button" class="btn btn-unique btn-sm btn-rounded px-2" data-toggle="modal" data-target="#modalAchievment">MDB Expert</button>
<button type="button" class="btn btn-light-blue btn-sm btn-rounded px-2" data-toggle="modal" data-target="#modalAchievment">Creator</button>
<button type="button" class="btn btn-deep-purple btn-sm btn-rounded px-2" data-toggle="modal" data-target="#modalAchievment">Community contributor</button>
<button type="button" class="btn btn-deep-orange btn-sm btn-rounded px-2" data-toggle="modal" data-target="#modalAchievment">BrandFlow expert</button>
<button type="button" class="btn btn-indigo btn-sm btn-rounded px-2" data-toggle="modal" data-target="#modalAchievment">MDB Pro User</button>
<button type="button" class="btn btn-cyan btn-sm btn-rounded px-2" data-toggle="modal" data-target="#modalAchievment">MDB contributor</button>
<button type="button" class="btn btn-mdb btn-sm btn-rounded px-2" data-toggle="modal" data-target="#modalAchievment">MDB partner</button>
</div>
</section>
<!--Section: Achievements-->
<!--Section: Experience-->
<section class="card mb-4">
<div class="card-body">
<h5 class=" text-center">
<strong>John's Contributions </strong>
</h5>
<hr class="my-3">
<ul class="list-unstyled pt-4">
<li>
<p>Questions
<span class="badge badge-primary pull-right">14</span>
</p>
</li>
<hr>
<li>
<p>Answers
<span class="badge badge-primary pull-right">14</span>
</p>
</li>
<hr>
<li>
<p>Submited projects
<span class="badge badge-primary pull-right">14</span>
</p>
</li>
<hr>
<li>
<p>Pull requests
<span class="badge badge-primary pull-right">14</span>
</p>
</li>
<hr>
<li>
<p>Ideas & bug reports
<span class="badge badge-primary pull-right">14</span>
</p>
</li>
</ul>
</div>
</section>
<!--Section: Experience-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-8 col-md-12 text-center">
<!-- Heading -->
<div class="text-center mt-3 mb-5">
<h4>
<strong>John's projects</strong>
</h4>
<button type="button" class="btn btn-primary btn-md mt-4" data-toggle="modal" data-target="#modalSubmitProject">Submit new project
<i class="fa fa-photo ml-1"></i>
</button>
<button type="button" class="btn btn-outline-primary btn-md font-bold mt-4" data-toggle="modal" data-target="#modalFeedback">Send idea, feedback or bug
<i class="fa fa-paper-plane ml-2"></i>
</button>
</div>
<!-- Heading -->
<!-- Card row -->
<div class="card-deck">
<!--Card-->
<div class="card card-cascade narrower mb-5">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Others/images/72.jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></div>
</a>
</div>
<!--Card content-->
<div class="card-body pb-0">
<!--Title-->
<h4 class="card-title">Project name</h4>
<!--Text-->
<p class="card-text grey-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text grey-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--Card footer-->
<div class="card-footer links-light">
<span class="left pt-2">
<a>
<i class="fa fa-share-alt mr-2"></i>
</a>
<a>
<i class="fa fa-heart-o mr-2"></i>10</a>
</span>
<span class="right">
<a href="" class="waves-effect p-2">Live Preview
<i class="fa fa-photo ml-1"></i>
</a>
</span>
</div>
</div>
<!--/.Card-->
<!--Card-->
<div class="card card-cascade narrower d-flex mb-5">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Others/images/64.jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Project name</h4>
<!--Text-->
<p class="card-text grey-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--Card footer-->
<div class="card-footer links-light">
<span class="left pt-2">
<a>
<i class="fa fa-share-alt mr-2"></i>
</a>
<a>
<i class="fa fa-heart-o mr-2"></i>10</a>
</span>
<span class="right">
<a href="" class="waves-effect p-2">Live Preview
<i class="fa fa-photo ml-1"></i>
</a>
</span>
</div>
</div>
<!--/.Card-->
</div>
<!-- Card row -->
<!-- Card row -->
<div class="card-deck">
<!--Card-->
<div class="card card-cascade narrower d-flex mb-5">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Others/images/75.jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Project name</h4>
<!--Text-->
<p class="card-text grey-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--Card footer-->
<div class="card-footer links-light">
<span class="left pt-2">
<a>
<i class="fa fa-share-alt mr-2"></i>
</a>
<a>
<i class="fa fa-heart-o mr-2"></i>10</a>
</span>
<span class="right">
<a href="" class="waves-effect p-2">Live Preview
<i class="fa fa-photo ml-1"></i>
</a>
</span>
</div>
</div>
<!--/.Card-->
<!--Card-->
<div class="card card-cascade narrower d-flex mb-5">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Others/images/71.jpg" class="img-fluid" alt="">
<a href="#">
<div class="mask"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Project name</h4>
<!--Text-->
<p class="card-text grey-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<p class="card-text grey-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<!--Card footer-->
<div class="card-footer links-light">
<span class="left pt-2">
<a>
<i class="fa fa-share-alt mr-2"></i>
</a>
<a>
<i class="fa fa-heart-o mr-2"></i>10</a>
</span>
<span class="right">
<a href="" class="waves-effect p-2">Live Preview
<i class="fa fa-photo ml-1"></i>
</a>
</span>
</div>
</div>
<!--/.Card-->
</div>
<!-- Card row -->
<!--Pagination -->
<nav class="my-4 d-flex justify-content-center">
<ul class="pagination pagination-circle pg-blue mb-0">
<!--First-->
<li class="page-item disabled">
<a class="page-link">First</a>
</li>
<!--Arrow left-->
<li class="page-item disabled">
<a class="page-link" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<!--Numbers-->
<li class="page-item active">
<a class="page-link">1</a>
</li>
<li class="page-item">
<a class="page-link">2</a>
</li>
<li class="page-item">
<a class="page-link">3</a>
</li>
<li class="page-item">
<a class="page-link">4</a>
</li>
<li class="page-item">
<a class="page-link">5</a>
</li>
<!--Arrow right-->
<li class="page-item">
<a class="page-link" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
<!--First-->
<li class="page-item">
<a class="page-link">Last</a>
</li>
</ul>
</nav>
<!--/Pagination -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="mainProfile2" role="tabpanel">
<!-- Nav tabs -->
<div class="row">
<div class="col-md-3">
<ul class="nav md-pills pills-primary flex-column" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel21" role="tab">Downloads
<i class="fa fa-download ml-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel22" role="tab">Orders & invoices
<i class="fa fa-file-text ml-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel23" role="tab">Billing details
<i class="fa fa-address-card ml-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel24" role="tab">Payment methods
<i class="fa fa-credit-card ml-2"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-9">
<!-- Tab panels -->
<div class="tab-content vertical">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="panel21" role="tabpanel">
<!-- Table -->
<table class="table table-hover table-responsive">
<!-- Table head -->
<thead>
<tr>
<th>Product</th>
<th>Latest version</th>
<th>License</th>
<th>File</th>
</tr>
</thead>
<!-- Table head -->
<!-- Table body -->
<tbody>
<tr>
<td>MDB jQuery</td>
<td>4.4.0</td>
<td>10+ people & unlimited projects</td>
<td>
<button type="button" class="btn btn-primary btn-table px-3">Download</button>
</td>
</tr>
<tr>
<td>MDB Angular</td>
<td>4.4.0</td>
<td>10+ people & unlimited projects</td>
<td>
<button type="button" class="btn btn-primary btn-table px-3">Download</button>
</td>
</tr>
<tr>
<td>Big Bundle jQuery</td>
<td>4.4.0</td>
<td>10+ people & unlimited projects</td>
<td>
<button type="button" class="btn btn-primary btn-table px-3">Download</button>
</td>
</tr>
</tbody>
<!-- Table body -->
</table>
<!-- Table -->
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel22" role="tabpanel">
<!-- Table -->
<table class="table table-hover table-responsive">
<!-- Table head -->
<thead>
<tr>
<th class="th-lg">Order</th>
<th class="th-lg">Date</th>
<th class="th-lg">Status</th>
<th class="th-lg">Total</th>
<th class="th-lg">Invoice</th>
</tr>
</thead>
<!-- Table head -->
<!-- Table body -->
<tbody>
<tr>
<td>
<a href="">#9910</a>
</td>
<td>July 7, 2016</td>
<td>Completed</td>
<td>€ 49.00 for 1 item</td>
<td>
<button type="button" class="btn btn-primary btn-table px-3">Download</button>
</td>
</tr>
<tr>
<td>
<a href="">#9930</a>
</td>
<td>July 7, 2016</td>
<td>Completed</td>
<td>€ 49.00 for 1 item</td>
<td>
<button type="button" class="btn btn-indigo btn-table px-3">Submit request</button>
</td>
</tr>
<tr>
<td>
<a href="">#9920</a>
</td>
<td>July 7, 2016</td>
<td>Completed</td>
<td>€ 49.00 for 1 item</td>
<td>
<button type="button" class="btn btn-primary btn-table px-3">Download</button>
</td>
</tr>
</tbody>
<!-- Table body -->
</table>
<!-- Table -->
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel23" role="tabpanel">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<!--Name-->
<div class="md-form form-sm mt-2">
<input type="text" id="form1" class="form-control">
<label for="form1" class="">Company name</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<!--Name-->
<select class="mdb-select" searchable="Search here..">
<option value="" disabled selected>Choose your country</option>
<option value="1">USA</option>
<option value="2">Germany</option>
<option value="3">France</option>
<option value="3">Poland</option>
<option value="3">Japan</option>
</select>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
</div>
<!--Grid column-->
</div>