<div class="page" data-name="profile">
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="back link"> <i class="fa fa-angle-left"></i><span>Back</span></a>
</div>
<div class="title">Profile</div>
<div class="right">
<a href="#" class="link icon-only popup-open" data-popup=".edit-popup">
<i class="f7-icons">compose</i>
</a>
</div>
</div>
</div>
<div class="page-content">
<div class="profile-header">
<div class="pro-img-box">
<img alt="" src="assets/img/user.jpg">
<div class="pro-img-upload">
<input type="file" class="upload">
</div>
</div>
<div class="pro-user-det">
<div class="profile-name">John Doe</div>
<div class="profile-designation">Web Developer</div>
</div>
</div>
<div class="toolbar tabbar toolbar-border">
<div class="toolbar-inner">
<a href="#pro_overview" class="tab-link tab-link-active">Overview</a>
<a href="#pro_education" class="tab-link">Education</a>
<a href="#pro_experience" class="tab-link">Experience</a>
</div>
</div>
<!-- Tabs -->
<div class="tabs profile-tabs">
<div class="tab tab-active" id="pro_overview">
<div class="list list-dividers-ios list-outline-ios list-strong-ios">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Employee ID</div>
<div class="item-after">FT-0001</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Phone</div>
<div class="item-after">9876543210</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Email</div>
<div class="item-after">[email protected]</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Birthday</div>
<div class="item-after">24th July</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Gender</div>
<div class="item-after">Male</div>
</div>
</div>
</li>
</ul>
<div class="block block-strong address-block block-outline">
<p><strong>Address</strong></p>
<p>1861 Bayonne Ave, Manchester Township, NJ, 08759</p>
</div>
<div class="block skills-block">
<p><strong>Skills</strong></p>
<div class="skills">
<span>IOS</span>
<span>Android</span>
<span>Html</span>
<span>CSS</span>
<span>Codignitor</span>
<span>Php</span>
<span>Javascript</span>
<span>Wordpress</span>
<span>Jquery</span>
</div>
</div>
</div>
</div>
<div class="tab" id="pro_education">
<div class="block block-strong">
<div class="experience-box">
<ul class="experience-list ">
<li>
<div class="experience-user">
<div class="before-circle"></div>
</div>
<div class="experience-content">
<div class="timeline-content">
<span class="name">International College of Arts and Science (UG)</span>
<div>Bsc Computer Science</div>
<span class="time">2000 - 2003</span>
</div>
</div>
</li>
<li>
<div class="experience-user">
<div class="before-circle"></div>
</div>
<div class="experience-content">
<div class="timeline-content">
<span class="name">International College of Arts and Science (PG)</span>
<div>Msc Computer Science</div>
<span class="time">2000 - 2003</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="tab" id="pro_experience">
<div class="block block-strong">
<div class="experience-box">
<ul class="experience-list">
<li>
<div class="experience-user">
<div class="before-circle"></div>
</div>
<div class="experience-content">
<div class="timeline-content">
<span class="name">Web Designer at Zen Corporation</span>
<span class="time">Jan 2013 - Present (5 years 2 months)</span>
</div>
</div>
</li>
<li>
<div class="experience-user">
<div class="before-circle"></div>
</div>
<div class="experience-content">
<div class="timeline-content">
<span class="name">Web Designer at Ron-tech</span>
<span class="time">Jan 2013 - Present (5 years 2 months)</span>
</div>
</div>
</li>
<li>
<div class="experience-user">
<div class="before-circle"></div>
</div>
<div class="experience-content">
<div class="timeline-content">
<span class="name">Web Designer at Dalt Technology</span>
<span class="time">Jan 2013 - Present (5 years 2 months)</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="popup edit-popup">
<div class="view popup-view">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="left"><a href="#" class="link popup-close"><i class="fa fa-close"></i> <span>Close</span></a></div>
<div class="title">Edit Profile</div>
<div class="right"></div>
</div>
</div>
<div class="page-content">
<div class="tabs">
<div class="tab tab-active" id="basic_informations">
<div class="list no-hairlines custom-form">
<h4 class="profile-title">Basic Informations</h4>
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">First Name</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Last Name</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Birth Date</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Gender</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap m-t-10">
<div class="row">
<div class="col-100">
<a class="tab-link button button-big button-purple" href="#contact_informations">Next</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="tab" id="contact_informations">
<div class="list no-hairlines custom-form">
<h4 class="profile-title">Contact Informations</h4>
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Address</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">State</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Country</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Pincode</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Phone Number</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Address</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap m-t-10">
<div class="row">
<div class="col-50">
<a class="tab-link button button-big button-red" href="#basic_informations">Back</a>
</div>
<div class="col-50">
<a class="tab-link button button-big button-purple" href="#education_informations">Next</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="tab" id="education_informations">
<div class="list no-hairlines custom-form">
<h4 class="profile-title">Education Informations</h4>
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Institution</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Subject</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Starting Date</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Complete Date</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Degree</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Grade</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap m-t-10">
<div class="add-more">
<a class="add-more-btn" href="#"><i class="fa fa-plus"></i> Add More Institute</a>
</div>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap m-t-10">
<div class="row">
<div class="col-50">
<a class="tab-link button button-big button-red" href="#contact_informations">Back</a>
</div>
<div class="col-50">
<a class="tab-link button button-big button-purple" href="#exp_informations">Next</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="tab" id="exp_informations">
<div class="list no-hairlines custom-form">
<h4 class="profile-title">Experience Informations</h4>
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Company Name</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Location</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Job Position</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Period From</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Period To</div>
<div class="item-input-wrap">
<input type="text">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap m-t-10">
<div class="add-more">
<a class="add-more-btn" href="#"><i class="fa fa-plus"></i> Add More Experience</a>
</div>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-input-wrap m-t-10">
<div class="row">
<div class="col-50">
<a class="tab-link button button-big button-red" href="#education_informations">Back</a>
</div>
<div class="col-50">
<a class="tab-link button button-big button-purple popup-close" href="">Send</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>