<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%; } }