<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container emp-profile"> <form novalidate> <div class="row"> <div class="col-md-4"> <div class="profile-img"> <img [src]="myUser?.photoUrl" alt="{{myUser?.firstName || myUser?.fname}}"/> <div class="file btn btn-lg btn-primary"> Change Photo <input name="file" type="file"/> </div> </div> </div> <div class="col-md-6"> <div class="profile-head"> <h5> {{myUser?.name || (myUser.fname + ' ' + myUser.lname)}} </h5> <h6> Web Developer and Designer </h6> <p class="proile-rating">RANKINGS : <span>8/10</span></p> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a aria-controls="home" aria-selected="true" class="nav-link active" data-toggle="tab" href="#home" id="home-tab" role="tab">About</a> </li> <li class="nav-item"> <a aria-controls="profile" aria-selected="false" class="nav-link" data-toggle="tab" href="#profile" id="profile-tab" role="tab">Timeline</a> </li> </ul> </div> </div> <div class="col-md-2"> <button (click)="logout()" class="btn btn-secondary btn-sm" name="btnAddMore" type="button">Logout</button> </div> </div> <div class="row"> <div class="col-md-4"> <div class="profile-work"> <p>WORK LINK</p> <a href="">Website Link</a><br/> <a href="">Bootsnipp Profile</a><br/> <a href="">Bootply Profile</a> <p>SKILLS</p> <a href="">Web Designer</a><br/> <a href="">Web Developer</a><br/> <a href="">WordPress</a><br/> <a href="">WooCommerce</a><br/> <a href="">PHP, .Net</a><br/> </div> </div> <div class="col-md-8"> <div class="tab-content profile-tab" id="myTabContent"> <div aria-labelledby="home-tab" class="tab-pane fade show active" id="home" role="tabpanel"> <div class="row"> <div class="col-md-6"> <label>User Id</label> </div> <div class="col-md-6"> <p>{{myUser.id || myUser.userId}}</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Name</label> </div> <div class="col-md-6"> <p>{{myUser.name || myUser.username}}</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Email</label> </div> <div class="col-md-6"> <p>{{myUser.email}}</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Phone</label> </div> <div class="col-md-6"> <p>9999-778-754</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Profession</label> </div> <div class="col-md-6"> <p>Web Developer and Designer</p> </div> </div> </div> <div aria-labelledby="profile-tab" class="tab-pane fade" id="profile" role="tabpanel"> <div class="row"> <div class="col-md-6"> <label>Experience</label> </div> <div class="col-md-6"> <p>Expert</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Hourly Rate</label> </div> <div class="col-md-6"> <p>10$/hr</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Total Projects</label> </div> <div class="col-md-6"> <p>230</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>English Level</label> </div> <div class="col-md-6"> <p>Expert</p> </div> </div> <div class="row"> <div class="col-md-6"> <label>Availability</label> </div> <div class="col-md-6"> <p>6 months</p> </div> </div> <div class="row"> <div class="col-md-12"> <label>Your Bio</label><br/> <p>Your detail description</p> </div> </div> </div> </div> </div> </div> </form> </div>

body{ background: -webkit-linear-gradient(left, #3931af, #00c6ff); } .emp-profile{ padding: 3%; margin-top: 3%; margin-bottom: 3%; border-radius: 0.5rem; background: #fff; } .profile-img{ text-align: center; } .profile-img img{ width: 70%; height: 100%; } .profile-img .file { position: relative; overflow: hidden; margin-top: -20%; width: 70%; border: none; border-radius: 0; font-size: 15px; background: #212529b8; } .profile-img .file input { position: absolute; opacity: 0; right: 0; top: 0; } .profile-head h5{ color: #333; } .profile-head h6{ color: #0062cc; } .profile-edit-btn{ border: none; border-radius: 1.5rem; width: 70%; padding: 2%; font-weight: 600; color: #6c757d; cursor: pointer; } .proile-rating{ font-size: 12px; color: #818182; margin-top: 5%; } .proile-rating span{ color: #495057; font-size: 15px; font-weight: 600; } .profile-head .nav-tabs{ margin-bottom:5%; } .profile-head .nav-tabs .nav-link{ font-weight:600; border: none; } .profile-head .nav-tabs .nav-link.active{ border: none; border-bottom:2px solid #0062cc; } .profile-work{ padding: 14%; margin-top: -15%; } .profile-work p{ font-size: 12px; color: #818182; font-weight: 600; margin-top: 10%; } .profile-work a{ text-decoration: none; color: #495057; font-weight: 600; font-size: 14px; } .profile-work ul{ list-style: none; } .profile-tab label{ font-weight: 600; } .profile-tab p{ font-weight: 600; color: #0062cc; }