<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid">
<div class="row">
<div class="fb-profile">
<img align="left" class="fb-image-lg" src="http://lorempixel.com/850/280/nightlife/5/" alt="Profile image example"/>
<img align="left" class="fb-image-profile thumbnail" src="http://lorempixel.com/180/180/people/9/" alt="Profile image example"/>
<div class="fb-profile-text">
<h1>Eli Macy</h1>
</div>
</div>
</div>
</div> <!-- /container fluid-->
<div class="container">
<div class="col-sm-8">
<div data-spy="scroll" class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">
<a href="#tab_default_1" data-toggle="tab">
About Her </a>
</li>
<li>
<a href="#tab_default_2" data-toggle="tab">
Education& Career</a>
</li>
<li>
<a href="#tab_default_3" data-toggle="tab">
Family Details</a>
</li>
<li>
<a href="#tab_default_4" data-toggle="tab">
Desire Partner</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_default_1">
<p>
My daughter is good looking, with pleasant personality, smart, well educated, from well cultural and a religious family background. having respect in heart for others.
would like to thanks you for visiting through my daughter;s profile.
She has done PG in Human Resources after her graduation.
At present working IN INSURANCE sector as Manager Training .
</p>
<h4>About her Family</h4>
<p>
About her family she belongs to a religious and a well cultural family background.
Father - Retired from a Co-operate Bank as a Manager.
Mother - she is a home maker.
1 younger brother - works for Life Insurance n manages cluster.
</p>
<h4>Education </h4>
<p>I have done PG in Human Resourses</p>
<h4>Occupation</h4>
<p>At present Working in Insurance sector</p>
</div>
<div class="tab-pane" id="tab_default_2">
<p>
Education& Career
</p>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Highest Education:</label>
<p> MBA/PGDM</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_default_3">
<p>
Family Details
</p>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Highest Education:</label>
<p> MBA/PGDM</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_default_4">
<p>
Lifestyle
</p>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Highest Education:</label>
<p> MBA/PGDM</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default">
<div class="menu_title">
Horoscope
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label for="email">Place of Birth:</label>
<p> pune, maharashtra</p>
</div>
<div class="form-group">
<label for="email">Date of Birth:</label>
<p> 26 Sep 2017</p>
</div>
<div class="form-group">
<label for="email">Time of Birth:</label>
<p> 11:20 min.</p>
</div>
<div class="form-group">
<label for="email">Horroscoe Match not Necessory</label>
</div>
<div class="form-group">
<label for="email">Sun Sign:</label>
<p> Scorpio</p>
</div>
<div class="form-group">
<label for="email">Rashi/ Moon sign:</label>
<p> Mesh</p>
</div>
<div class="form-group">
<label for="email">Nakshtra:</label>
<p> Bharani</p>
</div>
<div class="form-group">
<label for="email">Manglik:</label>
<p> Manglik</p>
</div>
<button type="submit" class="btn btn-danger btn-block">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
/* ==========================================================================
Author's custom styles
========================================================================== */
body
{
font-family: 'Open Sans', sans-serif;
}
.fb-profile img.fb-image-lg{
z-index: 0;
width: 100%;
margin-bottom: 10px;
}
.fb-image-profile
{
margin: -90px 10px 20px 80px;
z-index: 9;
width: 20%;
}
/***
Bootstrap Line Tabs by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/
/* Tabs panel */
.tabbable-panel {
border:1px solid #eee;
padding: 10px;
}
/* Default mode */
.tabbable-line > .nav-tabs {
border: none;
margin: 0px;
}
.tabbable-line > .nav-tabs > li {
margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
border: 0;
margin-right: 0;
color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
border: 0;
background: none !important;
color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
border-bottom: 4px solid #f3565d;
position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
border: 0 !important;
color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
color: #404040;
}
.tabbable-line > .tab-content {
margin-top: -3px;
background-color: #fff;
border: 0;
border-top: 1px solid #eee;
padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
padding-bottom: 0;
}
/* Below tabs mode */
.tabbable-line.tabs-below > .nav-tabs > li {
border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
border-bottom: 0;
border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
margin-bottom: -2px;
border-bottom: 0;
border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
margin-top: -10px;
border-top: 0;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
}
.menu_title {
padding: 15px 10px;
border-bottom: 1px solid #eee;
margin: 0 5px;
}
@media (max-width:768px){
.fb-profile-text>h1{
font-weight: 700;
font-size:16px;
}
.fb-image-profile
{
margin: -45px 10px 0px 25px;
z-index: 9;
width: 20%;
}
}