<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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 ---------->
<!--brand new dsign-->
<div class="container"style = " border-style: solid;
border-width: .4px; border-color: #dbdbdb; margin-top: 100px; width:60%; background-color: white;">
<div class="col-sm-3">
<nav class="nav-sidebar">
<ul class="nav tabs" style = "font-size: 16px;">
<li class="active"><a href="#tab1" data-toggle="tab">Edit Profile</a></li>
<li class=""><a href="#tab2" data-toggle="tab">Change Password</a></li>
<li class=""><a href="#tab3" data-toggle="tab">Social Media</a></li>
<li class=""><a href="#tab4" data-toggle="tab">Email and SMS</a></li>
<li class=""><a href="#tab5" data-toggle="tab">Pricing and Subscriptions</a></li>
</ul>
</nav>
</div>
<!-- tab content -->
<div class="tab-content">
<div class="tab-pane active text-style" id="tab1">
<div class="col-sm-6" style=" border-left: 1px solid #ddd;">
<form class="user-form" name="userForm" novalidate>
<div class="user-form__edit-photo--container">
<aside class="user-form__edit-photo">
<button type="button" onclick="document.getElementById('fileInput').click()">
<img ng-show="$ctrl.currentUser.profileImage" ng-src="{{ $ctrl.currentUser.profileImage }}" />
</button>
<input id="fileInput" type="file" ng-model="$ctrl.currentUser.profileImage" onchange="angular.element(this).scope().$ctrl.handleFileSelect(this)" name="uProfileImg" accept="image/*" style="display:none" />
</aside>
<div class="user-form__input--description text-center">
Edit Photo
</div>
</div>
<div class="user-form__input--container">
<aside class="user-form__input--description">
<label>Username</label>
</aside>
<div class="user-form__input">
<input type="text" name="username" placeholder="Change username?" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.username" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.username, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
<!-- <div ng-show="userForm.$submitted || userForm.uUsername.$touched">
<span ng-show="userForm.uUsername.$error.required">Tell us your username.</span>
</div> -->
</div>
</div>
<div class="user-form__input--container">
<aside class="user-form__input--description">
<label>Description</label>
</aside>
<div class="user-form__input">
<textarea rows="3" name="description" placeholder="Example: Photographer | New York" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.description" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.description, $event)">
</textarea>
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
</div>
</div>
<div class="user-form__input--container">
<aside class="user-form__input--description">
<label>Website</label>
</aside>
<div class="user-form__input">
<input type="text" name="statement" placeholder="Tell everyone about yourself!" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.statement" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.statement, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
</div>
</div>
</form>
<div class="row content__box">
<div ng-click="$ctrl.closeSearch()" class="content__box__wrapp content__box__wrapp--center">
<div ng-click="$event.stopPropagation()" class="center-content" >
<div ng-show="!$ctrl.searchIsActive" class="user-form-container">
<div class="login__form__btn--container text-center">
<button class="login__form__btn" ng-click="" style="max-width: 250px">SAVE CHANGES</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane text-style" id="tab2">
<div class="col-sm-6" style=" border-left: 1px solid #ddd;">
<form class="user-form" name="userForm" novalidate>
<div class="user-form__input--container">
<aside class="user-form__input--description">
<label> Change Password</label>
</aside>
<div class="user-form__input">
<input type="text" name="Password" placeholder="Old Passsword" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.password" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.password, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
<!-- <div ng-show="userForm.$submitted || userForm.uUsername.$touched">
<span ng-show="userForm.uUsername.$error.required">Tell us your username.</span>
</div> -->
</div>
<div class="user-form__input">
<input type="text" name="Password" placeholder="New Password" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.password" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.password, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
<!-- <div ng-show="userForm.$submitted || userForm.uUsername.$touched">
<span ng-show="userForm.uUsername.$error.required">Tell us your username.</span>
</div> -->
</div>
<div class="user-form__input">
<input type="text" name="Password" placeholder="Confirm New Password" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.password" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.password, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
<!-- <div ng-show="userForm.$submitted || userForm.uUsername.$touched">
<span ng-show="userForm.uUsername.$error.required">Tell us your username.</span>
</div> -->
</div>
</div>
</form>
<div class="row content__box">
<div ng-click="$ctrl.closeSearch()" class="content__box__wrapp content__box__wrapp--center">
<div ng-click="$event.stopPropagation()" class="center-content" >
<div ng-show="!$ctrl.searchIsActive" class="user-form-container">
<div class="login__form__btn--container text-center">
<button class="login__form__btn" ng-click="" style="max-width: 250px">SAVE CHANGES</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane text-style" id="tab3">
<div class="col-sm-6" style=" border-left: 1px solid #ddd;">
<form class="form" action="##" method="post" id="registrationForm">
<div class="user-form__input--container" style=" line-height: 33px;">
<aside class="user-form__input--description">
<label>Social Media</label>
</aside>
<div class="user-form__input user-form__input--with-icon">
<i class="fab fa-facebook-f user-form__input--icon"></i>
<input type="text" name="facebookId" placeholder="Facebook Username" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.facebookId" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.facebookId, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
</div>
<div class="user-form__input user-form__input--with-icon">
<i class="fab fa-instagram user-form__input--icon"></i>
<input type="text" name="instagramId" placeholder="Instagram Username" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.instagramId" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.instagramId, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
</div>
<div class="user-form__input user-form__input--with-icon">
<i class="fab fa-snapchat-ghost user-form__input--icon"></i>
<input type="text" name="snapchatId" placeholder="Snapchat Username" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.snapchatId" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.snapchatId, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
</div>
<div class="user-form__input user-form__input--with-icon">
<i class="fab fa-twitter user-form__input--icon"></i>
<input type="text" name="twitterId" placeholder="Twitter Username" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.twitterId" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.twitterId, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
</div>
<div class="user-form__input user-form__input--with-icon">
<i class="fab fa-youtube user-form__input--icon"></i>
<input type="text" name="youtubeId" placeholder="Youtube Username" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.youtubeId" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.youtubeId, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
</div>
<div class="user-form__input user-form__input--with-icon">
<i class="fas fa-gift user-form__input--icon"></i>
<input type="text" name="youtubeId" placeholder="Wishlist Link" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.youtubeId" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.youtubeId, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
</div>
</div>
</form>
<div class="row content__box">
<div ng-click="$ctrl.closeSearch()" class="content__box__wrapp content__box__wrapp--center">
<div ng-click="$event.stopPropagation()" class="center-content" >
<div ng-show="!$ctrl.searchIsActive" class="user-form-container">
<div class="login__form__btn--container text-center">
<button class="login__form__btn" ng-click="" style="max-width: 250px">SAVE CHANGES</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane text-style" id="tab4">
<div class="col-sm-6" style=" border-left: 1px solid #ddd;">
<form class="form" action="##" method="post" id="registrationForm">
<div class="user-form__input--container">
<aside class="user-form__input--description">
<label>Email</label>
</aside>
<div class="user-form__input">
<input type="email" name="email" placeholder="Change email?" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)"
ng-model="$ctrl.currentUser.email" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.email, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
<!-- <div ng-show="userForm.$submitted || userForm.uUsername.$touched">
<span ng-show="userForm.uUsername.$error.required">Tell us your username.</span>
</div> -->
</div>
</div>
</form>
<div class="row content__box">
<div ng-click="$ctrl.closeSearch()" class="content__box__wrapp content__box__wrapp--center">
<div ng-click="$event.stopPropagation()" class="center-content" >
<div ng-show="!$ctrl.searchIsActive" class="user-form-container">
<div class="login__form__btn--container text-center">
<button class="login__form__btn" ng-click="" style="max-width: 250px">SAVE CHANGES</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane text-style" id="tab5">
<div class="col-sm-6" style=" border-left: 1px solid #ddd;">
<form class="form" action="##" method="post" id="registrationForm">
<div class="user-form__input--container">
<aside class="user-form__input--description">
<label>Global Price </label>
</aside>
<label> Message Price</label>
<div class="user-form__input">
<input type="number" name="messagePrice" placeholder="SmashQ Points non-followers need to message you" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)" min="0"
ng-model="$ctrl.currentUser.messagePrice" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.messagePrice, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
</div>
<label> Live Price </label>
<div class="user-form__input">
<input type="number" name="livePrice" placeholder="SmashQ Points non-followers need to join your live feed" class="user-form__input__edit" ng-focus="$ctrl.inputOnFocus($event)" min="0"
ng-model="$ctrl.currentUser.livePrice" ng-blur="$ctrl.updateForm($event.target.name, $ctrl.currentUser.livePrice, $event)" />
<i class="fa fa-check user-form__input__checkmark" aria-hidden="true"></i>
</div>
</div>
</form>
<div class="row content__box">
<div ng-click="$ctrl.closeSearch()" class="content__box__wrapp content__box__wrapp--center">
<div ng-click="$event.stopPropagation()" class="center-content" >
<div ng-show="!$ctrl.searchIsActive" class="user-form-container">
<div class="login__form__btn--container text-center">
<button class="login__form__btn" ng-click="" style="max-width: 250px">SAVE CHANGES</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.blogShort{ border-bottom:1px solid #ddd;}
.add{background: #333; padding: 10%; height: 300px;}
.nav-sidebar {
width: 100%;
padding: 30px 0;
}
.nav-sidebar a {
color: #333;
-webkit-transition: all 0.08s linear;
-moz-transition: all 0.08s linear;
-o-transition: all 0.08s linear;
transition: all 0.08s linear;
}
.nav-sidebar .active a {
cursor: default;
color: #000000;
}
.nav-sidebar .active a:hover {
color: #bbbbbb;
}
.nav-sidebar .text-overflow a,
.nav-sidebar .text-overflow .media-body {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.btn-blog {
color: #ffffff;
background-color: #E50000;
border-color: #E50000;
border-radius:0;
margin-bottom:10px
}
.btn-blog:hover,
.btn-blog:focus,
.btn-blog:active,
.btn-blog.active,
.open .dropdown-toggle.btn-blog {
color: white;
border-color: #0b56a8;
}
article h2{color:#333333;}
h2{color:#0b56a8;}
.margin10{margin-bottom:10px; margin-right:10px;}
.container .text-style
{
text-align: justify;
line-height: 23px;
margin: 0 13px 0 0;
font-size: 19px;
}
