<meta http-equiv="Content-Language" content="pt-br">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/perfil.css">
<link rel="stylesheet" href="js/perfil.js">
<!------ Include the above in your HEAD tag ---------->


<link rel="stylesheet" href="https://bootswatch.com/4/simplex/bootstrap.min.css"/>


<div class="container">
        <div class="row">
            <div class="col-12">
                <div class="card">

                    <div class="card-body">
                        <div class="card-title mb-4">
                            <div class="d-flex justify-content-start">
                                <div class="image-container">
                                    <img src="http://placehold.it/150x150" id="imgProfile" style="width: 150px; height: 150px" class="img-thumbnail" />
                                    <div class="middle">
                                        <input type="button" class="btn btn-secondary" id="btnChangePicture" value="Escolha" />
                                        <input type="file" style="display: none;" id="profilePicture" name="file" />
                                    </div>
                                </div>
                                <div class="userData ml-3">
                                    <h2 class="d-block" style="font-size: 1.5rem; font-weight: bold"><a href="javascript:void(0);">José</a></h2>
                                    <h6 class="d-block"><a href="javascript:void(0)">1,500</a>Trabalhos realizados</h6>
                                    <h6 class="d-block"><a href="javascript:void(0)">300</a>Avaliaçoes</h6>
                                </div>
                                <div class="ml-auto">
                                    <input type="button" class="btn btn-primary d-none" id="btnDiscard" value="Discard Changes" />
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <ul class="nav nav-tabs mb-4" id="myTab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="basicInfo-tab" data-toggle="tab" href="#basicInfo" role="tab" aria-controls="basicInfo" aria-selected="true">Informaçoes Basicas</a>
                                    </li>
                                </ul>
                                <div class="tab-content ml-1" id="myTabContent">
                                    <div class="tab-pane fade show active" id="Informaçoes basicas" role="tabpanel" aria-labelledby="basicInfo-tab">
                                        

                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Nome completo</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                                José benedito pinto
                                            </div>
                                        </div>
                                        <hr />

                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Idade</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                                45
                                            </div>
                                        </div>
                                        <hr />
                                        
                                        
                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Profissão</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                               Contador
                                            </div>
                                        </div>
                                        <hr />
                                        <div class="row">
                                            <div class="col-sm-3 col-md-2 col-5">
                                                <label style="font-weight:bold;">Formação</label>
                                            </div>
                                            <div class="col-md-8 col-6">
                                                Ciências Contábeis – USP – Universidade de São Paulo
                                            </div>
                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                             <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                                                Contato 
                                                <i class="fa fa-bars"></i>

                             </button>
                                <style>
                                    button{
                                        border-radius: 25px;
                                        background-color: aquamarine;
                                        text-align: center;
                                    }
                                </style>
                        </div>


                    </div>

                </div>
            </div>
        </div>
    </div>