<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">
<nav class="navbar navbar-custom ">
<div class="navbar-header">
<a class="navbar-brand" href="#"> <h4 class="textui">BookMySn<span class="glyphicon glyphicon-camera" style="color:#6777DB"></span>pper</h4></a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Location<span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Promoted Snappers</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"><a href="#"><img
src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 <i class="fa fa-rupee"></i></button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"><a href="#"><img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection"
class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"><a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection"
class="img-responsive" alt="product 3"></a>
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item --></div>
<!-- End Carousel Inner --> <!-- Controls --> <a class="left carousel-control" href="#menCollection" role="button"
data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#menCollection" role="button"
data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span> </a></div>
<!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li><a href="#">Auto Carousel</a></li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li><a href="#">Glyphicon</a></li>
<li><a href="#">Google Fonts</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li><a href="#">Navbar Inverse</a></li>
<li><a href="#">Pull Right Elements</a></li>
<li><a href="#">Coloured Headers</a></li>
<li><a href="#">Primary Buttons & Default</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li><a href="#">Easy to Customize</a></li>
<li><a href="#">Calls to action</a></li>
<li><a href="#">Custom Fonts</a></li>
<li><a href="#">Slide down on Hover</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Snapper locator</a></li>
<form class="navbar-form navbar-left" role="search">
<div class="form-group"><input type="text" class=" round form-control" placeholder="Enter location to find a Snapper"></div>
<button type="submit" class="round btn btn-default"><i class="glyphicon glyphicon-search "></i></button>
</form>
<li class="dropdown mega-dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Event <span class="caret"></span></a>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Wedding</li>
<li><a href="#"> Bengali Wedding </a></li>
<li><a href="#"> Bhojpuri Wedding </a></li>
<li><a href="#"> Brahmin Wedding </a></li>
<li><a href="#"> Bridal Portraits </a></li>
<li><a href="#"> Buddhist Wedding </a></li>
<li><a href="#"> Candid Wedding </a></li>
<li><a href="#"> Catholic Wedding </a></li>
<li><a href="#"> Chhattisgarhi Wedding </a></li>
<li><a href="#"> Christian Wedding </a></li>
<li><a href="#"> Concept Wedding </a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"></li>
<li><a href="#"> Contemporary Wedding </a></li>
<li><a href="#"> Couple Portraits </a></li>
<li><a href="#"> Destination Wedding </a></li>
<li><a href="#"> Engagement </a></li>
<li><a href="#"> Gujarati Wedding </a></li>
<li><a href="#"> Haryanvi Wedding </a></li>
<li><a href="#"> Hindu Wedding </a></li>
<li><a href="#"> Indian Wedding </a></li>
<li><a href="#"> Jain Wedding </a></li>
<li><a href="#"> Kashmiri Wedding </a></li>
<li><a href="#"> Maharashtrian Wedding </a></li>
<li><a href="#"> Marwadi Wedding </a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"></li>
<li><a href="#"> Muslim Wedding </a></li>
<li><a href="#"> North Indian Wedding </a></li>
<li><a href="#"> Parsi Wedding </a></li>
<li><a href="#"> Pre-wedding Shoots </a></li>
<li><a href="#"> Punjabi Wedding </a></li>
<li><a href="#"> Rajasthani Wedding </a></li>
<li><a href="#"> Reception </a></li>
<li><a href="#"> Sikh Wedding </a></li>
<li><a href="#"> South Indian Wedding </a></li>
<li><a href="#"> Tamil Wedding </a></li>
<li><a href="#"> Theme Wedding </a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Wedding Collection</li>
<div id="womenCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"><a href="#"><img
src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1"></a>
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"><a href="#"><img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection"
class="img-responsive" alt="product 2"></a>
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item -->
<div class="item"><a href="#"><img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection"
class="img-responsive" alt="product 3"></a>
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button>
<button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add
to Wishlist</button>
</div>
<!-- End Item --></div>
<!-- End Carousel Inner --> <!-- Controls --> <a class="left carousel-control" href="#womenCollection" role="button"
data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#womenCollection" role="button"
data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span> </a></div>
<!-- /.carousel -->
<li class="divider"></li>
<li><a href="#">View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="collapse" aria-expanded="false" aria-controls="nav-collapse4" >Login<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><p class="text-center"><a href="#" data-toggle="modal" data-target="#login-modal">User Login</a></p></li>
<li class="divider"></li>
<li><p class="text-center"><a href="#" data-toggle="modal" data-target="#login-modal">Snapper Login</a></p></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About us<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Who we are ?</a></li>
<li><a href="#">Who we do ?</a></li>
<li><a href="#">Contact us</a></li>
<li class="divider"></li>
<li><a href="#">Join us</a></li>
</ul>
</li>
<!-- Start of Profile -->
<li>
<a data-toggle="collapse" href="#nav-collapse4" aria-expanded="false" aria-controls="nav-collapse4">Profile <i class=""></i> </a>
</li>
<ul class="collapse nav navbar-nav navbar-left nav-collapse slide-down" role="search" id="nav-collapse4">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img class="img-circle" src="https://pbs.twimg.com/profile_images/588909533428322304/Gxuyp46N.jpg" alt="maridlcrmn" width="20" /> Maridlcrmn <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">My profile</a></li>
<li><a href="#">Favorited</a></li>
<li><a href="#">Settings</a></li>
<li class="divider"></li>
<li><a href="#">Logout</a></li>
</ul>
</li>
</ul>
</ul>
</ul>
</div>
<!-- /.nav-collapse --> </nav></div>
<!-- BEGIN # BOOTSNIP INFO -->
<!-- END # BOOTSNIP INFO -->
<!-- BEGIN # MODAL LOGIN -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" align="center"><img class="img-circle" id="img_logo"
src="https://scontent-sin1-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/12193500_1203433986350527_6632076734594190542_n.jpg?oh=729c934414c622bcdce1cd2e7c49addd&oe=56BC327E">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
</div>
<!-- Begin # DIV Form -->
<div id="div-forms"><!-- Begin # Login Form -->
<form id="login-form">
<div class="modal-body">
<div id="div-login-msg">
<div id="icon-login-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-login-msg">Type your username and password.</span></div>
<input id="login_username" class="form-control" type="text" placeholder="Username (type ERROR for error effect)"
required> <input id="login_password" class="form-control" type="password" placeholder="Password" required>
<div class="checkbox"><label> <input type="checkbox"> Remember me </label></div>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</div>
<div>
<button id="login_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
<button id="login_register_btn" type="button" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End # Login Form --> <!-- Begin | Lost Password Form -->
<form id="lost-form" style="display: none;">
<div class="modal-body">
<div id="div-lost-msg">
<div id="icon-lost-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-lost-msg">Type your e-mail.</span></div>
<input id="lost_email" class="form-control" type="text" placeholder="E-Mail (type ERROR for error effect)" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Send</button>
</div>
<div>
<button id="lost_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="lost_register_btn" type="button" class="btn btn-link">Register</button>
</div>
</div>
</form>
<!-- End | Lost Password Form --> <!-- Begin | Register Form -->
<form id="register-form" style="display: none;">
<div class="modal-body">
<div id="div-register-msg">
<div id="icon-register-msg" class="glyphicon glyphicon-chevron-right"></div>
<span id="text-register-msg">Register an account.</span></div>
<input id="register_Firstname" class="form-control" type="text" placeholder="FirstName " required>
<input id="register_Lastname" class="form-control" type="text" placeholder="LastName " required>
<input id="register_email" class="form-control" type="text" placeholder="E-Mail" required>
<input id="register_password" class="form-control" type="password" placeholder="Password" required>
<input id="register_password" class="form-control" type="password" placeholder="Password" required>
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
</div>
<div>
<button id="register_login_btn" type="button" class="btn btn-link">Log In</button>
<button id="register_lost_btn" type="button" class="btn btn-link">Lost Password?</button>
</div>
</div>
</form>
<!-- End | Register Form --></div>
<!-- End # DIV Form --></div>
</div>
</div>
<!-- END # MODAL LOGIN -->
<div class="clearfix container col-xs-16 col-md-10 " >
<div class="panel btn-pref btn-group btn-group-justified " role="group">
<div id="imagecard" class="card hovercard col-xs-16 col-md-10" style="background:orange;">
<div class=" card-background "> <img class=" fb-image-lg" alt="row card-bkimg" src="http://lorempixel.com/g/1600/900/people"> </div>
<div class="useravatar visible-sm visible-md "> <img alt="card-bkimg" src="https://upload.wikimedia.org/wikipedia/commons/c/cd/JamesCameronHWOFOct2012.jpg"> </div>
<div class="card-info visible-sm visible-md "> <span class="card-title">James cameron</span> </div>
</div>
<div class="rating clearfix col-xs-2" style="background:nonet; height:360px;border-radius:10px;margine-left:11px;" >
<div class="container">
<div class="btn-group btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn btn-nav">
<img class="useravatar" alt="row card-bkimg" src="http://lorempixel.com/g/150/70/people">
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<img class="useravatar" alt="row card-bkimg" src="http://lorempixel.com/g/150/70/food">
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<img class="useravatar" alt="row card-bkimg" src="http://lorempixel.com/g/150/70/sports">
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<img class="useravatar" alt="row card-bkimg" src="http://lorempixel.com/g/150/70/animals">
</button>
</div>
</div>
</div>
</div>
<div class="pagination" style="margin-top:-8px;">
<div class="btn-group btn-group-justified btn-group-horizontal">
<div class="btn-group " role="group">
<button id="b1" type="button" class="btn btn-nav" href="#tab1" data-toggle="tab" >
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="visible-lg" >Profile</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-nav" href="#tab2" data-toggle="tab" >
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
<div class="visible-lg">Location</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-nav" href="#tab3" data-toggle="tab">
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
<div class="visible-lg">Work</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-nav" href="#tab4" data-toggle="tab">
<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>
<div class="visible-lg">Upload</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-nav" href="#tab5" data-toggle="tab">
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span>
<div class="visible-lg">Dashboard</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-nav" href="#tab6" data-toggle="tab">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<div class="visible-lg">Studio</div>
</button>
</div>
</div>
</div>
<div class="panel">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1" style="padding-left:10%; color: #0084b4;">
<center style="padding-right: 30%">
<form role="form" class="form-inline go-right" style="color:#0084b4 ;background-color:#FAFAFF;border-radius:0px 22px 22px 22px; ">
<h2>Profile</h2>
<p>Please update your profile for more security.</p>
<div class="form-group">
<input id="Firstname" name="Firstname" type="text" class="form-control" required>
<label for="Firstname">First Name <span class="glyphicon glyphicon-user"> </span></label>
</div>
<div class="form-group">
<input id="Lastname" name="Lastname" type="text" class="form-control" required>
<label for="Lastname">Last Name <span class="glyphicon glyphicon-user"> </label>
</div>
<div class="form-group">
<input id="Middlename" name="Middlename" type="text" class="form-control" placeholder="Middle Name">
<label for="Middlename">Middle Name <span class="glyphicon glyphicon-user"> </label>
</div>
<br>
<br>
<div class="form-group">
<input id="phone" name="phone" type="tel" class="form-control" required>
<label for="fphone">Primary Phone <span class="glyphicon glyphicon-phone"></label>
</div>
<div class="form-group">
<input id="password" name="phone" type="tel" class="form-control input-sm" placeholder="secondary phone">
<label for="sphone">Secondary Phone <span class="glyphicon glyphicon-phone"></label>
</div>
<br><br>
<div class="form-group">
<select class="form-control">
<option id="Male" Value="M" selected>Male</option>
<option id="FeMale" Value="FM" >Female</option>
<option id="NotInterested" Value="NI">Not interested</option>
</select>
</div>
<div class="form-group">
<input id="date" name="date" type="date" class="form-control">
</div>
<br><br>
<div class="form-group">
<textarea id="message" name="phone" class="form-control" style="width:relative;height:100px" placeholder="Short Description" ></textarea>
<label for="message">Short Description <span class="glyphicon glyphicon-align-justify"></label>
</div>
<br><br>
<div class="form-group">
<input id="Email1" name="phone" class="form-control" placeholder="Registered email" ></textarea>
<label for="Email1">Registered email <span class="glyphicon glyphicon-align-envelope"></label>
</div>
<br><br>
<div class="form-group">
<input id="Email2" name="phone" class="form-control" placeholder="Alternate email" ></textarea>
<label for="Email2">Alternate email <span class="glyphicon glyphicon-align-envelope"></label>
</div>
<br><br>
<div class="form-group">
<input id="Vweb" name="phone" class="form-control" placeholder="Website" ></textarea>
<label for="Vweb">WebSite <span class="glyphicon glyphicon-align-envelope"></label>
</div>
<br><br>
<button class="go-bottom">
Save
</button>
<br>
<br>
</form>
</center>
</div>
<div class="tab-pane fade in" id="tab2" style="padding-left:10%; color: #0084b4;">
<center style="padding-right: 30%">
<form role="form" class="form-inline go-right" style="color: #0084b4;background-color:#FAFAFF;border-radius:0px 22px 22px 22px;">
<h2>Address</h2>
<br>
<div class="form-group" >
<input id="Address" name="Address" type="tel" class="form-control" >
<label for="Address">Flat NO/House No</label>
</div>
<div class="form-group" >
<input id="LandMark" name="LandMark" type="text" class="form-control" placeHolder="Land Mark">
<label for="LandMark">Land Mark</label>
</div>
<br><br>
<p3>(Enter Pincode/Area to pick your nearest location)<span class="glyphicon glyphicon-map-marker"></p3>
<br><br>
<div class="form-group input-lg" >
<input class="form-control" id="autocomplete" name="LocationPicker" type="text" onFocus="geolocate()" style=" moz-border-radius: 22px;border-radius: 7px;" >
</div>
<br><br>
<div class="form-group">
<input id="route" name="route" type="tel" class="form-control" required disabled="true">
<label for="route">Route/Locality</label>
</div>
<div class="form-group">
<input id="locality" name="locality" type="tel" class="form-control" required disabled="true">
<label for="locality">City/Town</label>
</div>
<br>
<div class="form-group">
<input id="administrative_area_level_2" name="administrative_area_level_2" type="tel" class="form-control" required disabled="true">
<label for="administrative_area_level_2">District</label>
</div>
<div class="form-group">
<input id="administrative_area_level_1" name="administrative_area_level_1" type="tel" class="form-control" required disabled="true">
<label for="administrative_area_level_1">State</label>
</div>
<br>
<div class="form-group">
<input id="country" name="country" type="text" class="form-control" required disabled="true">
<label for="country">Country</label>
</div>
<div class="form-group">
<input id="postal_code" name="postal_code" type="tel" class="form-control" required disabled="true">
<label for="postal_code">Pin Code</label>
</div>
<br><br>
<button>
Save
</button>
<br>
<br>
</form>
</center>
</div>
<div class="tab-pane fade in" id="tab3" style="padding-left:10%; color: #0084b4;">
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="pagination">
<div class=" pagination col-sm-3" id="slider-thumbs">
<br>
<label> uploaded images</label>
<a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/150x150&text=1"></a>
<ul class="hide-bullets">
<li class="col-sm-4">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/150x150&text=zero">
</a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/150x150&text=1"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/150x150&text=2"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/150x150&text=3"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/150x150&text=4"></a>
</li>
<li class="col-sm-4">
<a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/150x150&text=5"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-6"><img src="http://placehold.it/150x150&text=6"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-7"><img src="http://placehold.it/150x150&text=7"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-8"><img src="http://placehold.it/150x150&text=8"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-9"><img src="http://placehold.it/150x150&text=9"></a>
</li>
<li class="col-sm-4">
<a class="thumbnail" id="carousel-selector-10"><img src="http://placehold.it/150x150&text=10"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-11"><img src="http://placehold.it/150x150&text=11"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-12"><img src="http://placehold.it/150x150&text=12"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-13"><img src="http://placehold.it/150x150&text=13"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-14"><img src="http://placehold.it/150x150&text=14"></a>
</li>
<li class="col-sm-30">
<a class="thumbnail" id="carousel-selector-15"><img src="http://placehold.it/150x150&text=15"></a>
</li>
</ul>
</div>
<div class="col-sm-6">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/470x480&text=zero"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/470x480&text=1"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/470x480&text=2"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/470x480&text=3"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/470x480&text=4"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/470x480&text=5"></div>
<div class="item" data-slide-number="6">
<img src="http://placehold.it/470x480&text=6"></div>
<div class="item" data-slide-number="7">
<img src="http://placehold.it/470x480&text=7"></div>
<div class="item" data-slide-number="8">
<img src="http://placehold.it/470x480&text=8"></div>
<div class="item" data-slide-number="9">
<img src="http://placehold.it/470x480&text=9"></div>
<div class="item" data-slide-number="10">
<img src="http://placehold.it/470x480&text=10"></div>
<div class="item" data-slide-number="11">
<img src="http://placehold.it/470x480&text=11"></div>
<div class="item" data-slide-number="12">
<img src="http://placehold.it/470x480&text=12"></div>
<div class="item" data-slide-number="13">
<img src="http://placehold.it/470x480&text=13"></div>
<div class="item" data-slide-number="14">
<img src="http://placehold.it/470x480&text=14"></div>
<div class="item" data-slide-number="15">
<img src="http://placehold.it/470x480&text=15"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<!--/Slider-->
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab4" style="padding-left:10%; color: #0084b4;">
<form role="form" class="form-inline go-right" style="color: #0084b4;background-color:#FAFAFF;border-radius:0px 22px 22px 22px;">
<h3>Upload your Images and Videos</h3>
<br>
<input type="file" class="form-control" required>
<br>
<input type="file" class="form-control" >
<br>
<input type="file" class="form-control" >
<br>
<input type="file" class="form-control" >
<br>
<input type="file" class="form-control" >
<br>
<input type="file" class="form-control" >
<br>
<br>
<button> SAVE </button>
</form>
</div>
<div class="tab-pane fade in" id="tab5" style="padding-left:10%; color: #0084b4;">
<div class="container">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/150x150&text=13" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: Black;">Test Dash Board</h4>
Helllo Every One !!!
This Test Dash Board and Yet to be developed......
</div>
</div>
</div>
</div>
<div class="form-group tab-pane fade in" id="tab6" >
<form role="form" class="form-horizontal go-right" style="color: #0084b4;background-color:#FAFAFF;border-radius:0px 22px 22px 22px;">
<h2>Studio Information</h2>
<br>
<br>
<div class="container-fluid ">
<div class="panel panel-default recipients">
<div class="panel-heading clearfix ">
<div class="col-md-3 column" style="background-color:red">
<br> <table class="table">
<thead>
<tr>
<th>
Photographer
</th>
<th>
Primary Skills
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Language
</td>
<td>
<ol>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">English</button>
<input type="checkbox" id="showall" class="hidden" checked />
</span></li>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Spanish</button>
<input type="checkbox" id="showall" class="hidden" />
</span></li>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Hindi</button>
<input type="checkbox" id="showall" class="hidden" />
</span></li>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">English</button>
<input type="checkbox" id="showall" class="hidden" checked />
</span></li>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Spanish</button>
<input type="checkbox" id="showall" class="hidden" />
</span></li>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Hindi</button>
<input type="checkbox" id="showall" class="hidden" />
</span></li>
</ol>
</td>
</tr>
<tr>
<td>
Language
</td>
<td>
<ol>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
<div class=" col-md-3 column" style="background-color:#fa0">
<br> <table class="table">
<thead>
<tr>
<th>
Photographer
</th>
<th>
Primary Skills
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Language
</td>
<td>
<ol>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">English</button>
<input type="checkbox" id="showall" class="hidden" checked />
</span></li>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Spanish</button>
<input type="checkbox" id="showall" class="hidden" />
</span></li>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Hindi</button>
<input type="checkbox" id="showall" class="hidden" />
</span></li>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">English</button>
<input type="checkbox" id="showall" class="hidden" checked />
</span></li>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Spanish</button>
<input type="checkbox" id="showall" class="hidden" />
</span></li>
<li><span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Hindi</button>
<input type="checkbox" id="showall" class="hidden" />
</span></li>
</ol>
</td>
</tr> <tr>
<td>
Language
</td>
<td>
<ol>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
<li>English</li>
<li>Spanish</li>
<li>Hindi</li>
</ol>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearfix col-lg-2 col-sm-6 visible-lg" style="margin-top:-18px;margin-left:-25px;">
<br>
<div class="well" style="height: 350px; width: 240px; background-color: #0084b4; border: 1px">
<img class="card-bkimg"
style="height: 220px; width: 220px; border: 1px; background-color: Grey;"
alt="" src="https://upload.wikimedia.org/wikipedia/commons/c/cd/JamesCameronHWOFOct2012.jpg">
<br> <br>
<p> James cameron</p>
<h4> Hello Every One!!!</h4>
</div>
<div class="well" style="height: 390px; width: 240px; color:purple;margin-top:-18px;">
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.carousel-control {
width: 30px;
height: 30px;
top: -35px;
}
.left.carousel-control {
right: 30px;
left: inherit;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
font-size: 12px;
background-color: #fff;
line-height: 30px;
text-shadow: none;
color: #333;
border: 1px solid #ddd;
}
@import url(http://fonts.googleapis.com/css?family=Roboto);
* {
font-family: 'Roboto', sans-serif;
}
#login-modal .modal-dialog {
width: 350px;
}
#login-modal input[type=text],input[type=password] {
margin-top: 10px;
}
#div-login-msg,#div-lost-msg,#div-register-msg {
border: 1px solid #dadfe1;
height: 30px;
line-height: 28px;
transition: all ease-in-out 500ms;
}
#div-login-msg.success,#div-lost-msg.success,#div-register-msg.success {
border: 1px solid #68c3a3;
background-color: #c8f7c5;
}
#div-login-msg.error,#div-lost-msg.error,#div-register-msg.error {
border: 1px solid #eb575b;
background-color: #ffcad1;
}
#icon-login-msg,#icon-lost-msg,#icon-register-msg {
width: 30px;
float: left;
line-height: 28px;
text-align: center;
background-color: #dadfe1;
margin-right: 5px;
transition: all ease-in-out 500ms;
}
#icon-login-msg.success,#icon-lost-msg.success,#icon-register-msg.success
{
background-color: #68c3a3 !important;
}
#icon-login-msg.error,#icon-lost-msg.error,#icon-register-msg.error {
background-color: #eb575b !important;
}
#img_logo {
max-height: 100px;
max-width: 100px;
}
/* #########################################
# override the bootstrap configs #
######################################### */
.modal-backdrop.in {
filter: alpha(opacity = 50);
opacity: .8;
}
.modal-content {
-webkit-border-radius:20px !important;
-moz-border-radius: 20px !important;
border-radius: 20px !important;
background-color: #cce;
border: 5px solid #3cf;
border-radius: 0px;
outline: 0;
}
.modal-header {
min-height: 16.43px;
padding: 15px 15px 15px 15px;
border-bottom: 0px;
}
.modal-body {
position: relative;
padding: 5px 15px 5px 15px;
}
.modal-footer {
padding: 15px 15px 15px 15px;
text-align: left;
border-top: 0px;
}
.checkbox {
margin-bottom: 0px;
}
.btn {
border-radius: 0px;
}
.btn:focus,.btn:active :focus,.btn.active:focus,.btn.focus,.btn:active
.focus,.btn.active.focus {
outline: none;
}
.btn-lg,.btn-group-lg>.btn {
border-radius: 0px;
}
.btn-link {
padding: 5px 10px 0px 0px;
color: #95a5a6;
}
.btn-link:hover,.btn-link:focus {
color: #2c3e50;
text-decoration: none;
}
.glyphicon {
top: 0px;
}
.form-control {
border-radius: 0px;
}
.round {
border-radius: 55px;
}
/*
Credits:
Code snippet by @maridlcrmn (Follow me on Twitter)
Images by Nike.com (http://www.nike.com/us/en_us/)
Logo by Sneaker-mission.com (http://www.sneaker-mission.com/)
*/
.textui {
font-family: "Comic Sans MS", cursive, sans-serif;
color: #dfeded;
border-bottom: none;
padding-bottom: 15px;
}
.textui-li1 {
font-family: "Comic Sans MS", cursive, sans-serif;
background-color: #c1c1d1;
border-bottom: none;
}
.textui-li2 {
font-family: "Comic Sans MS", cursive, sans-serif;
background-color: #c1c1d9;
border-bottom: none;
}
.navbar-brand {
width: 200px;
height: 30px;
background: url('') no-repeat center center;
background-size: 50px;
}
.nav-tabs {
display: inline-block;
border-bottom: none;
padding-top: 15px;
font-weight: bold;
}
.nav-tabs>li>a,.nav-tabs>li>a:hover,.nav-tabs>li>a:focus,.nav-tabs>li.active>a,.nav-tabs>li.active>a:hover,.nav-tabs>li.active>a:focus
{
border: none;
border-radius: 0;
}
.nav-list {
border-bottom: 1px solid #eee;
}
.nav-list>li {
padding: 20px 15px 15px;
border-left: 1px solid #eee;
}
.nav-list>li:last-child {
border-right: 1px solid #eee;
}
.nav-list>li>a:hover {
text-decoration: none;
}
.nav-list>li>a>span {
display: block;
font-weight: bold;
text-transform: uppercase;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 15px 15px;
text-align: center;
width: 100%;
}
.navbar-custom {
background-color: #36a1d6;
border-color: #2890c3;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#60b5df),to(#36a1d6) );
background-image: -webkit-linear-gradient(top, #60b5df, 0%, #36a1d6, 100%);
background-image: -moz-linear-gradient(top, #60b5df 0%, #36a1d6 100%);
background-image: linear-gradient(to bottom, #60b5df 0%, #36a1d6 100%);
background-repeat: repeat-x;
filter: progid : DXImageTransform . Microsoft .
gradient(startColorstr = '#ff60b5df', endColorstr = '#ff36a1d6',
GradientType = 0);
}
.navbar-custom .navbar-brand {
color: #ffffff;
}
.navbar-custom .navbar-brand:hover,.navbar-custom .navbar-brand:focus {
color: #e6e6e6;
background-color: transparent; padding-top: 15px;
}
.navbar-custom .navbar-text {
color: #ffffff;
}
.navbar-custom .navbar-nav>li:last-child>a {
border-right: 1px solid #2890c3;
}
.navbar-custom .navbar-nav>li>a {
color: #ffffff;
border-left: 1px solid #2890c3;
}
.navbar-custom .navbar-nav>li>a:hover,.navbar-custom .navbar-nav>li>a:focus
{
color: #c0c0c0;
background-color: transparent;
}
.navbar-custom .navbar-nav>.active>a,.navbar-custom .navbar-nav>.active>a:hover,.navbar-custom .navbar-nav>.active>a:focus
{
color: #c0c0c0;
background-color: #2890c3;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#2890c3),
to(#45a8d9) );
background-image: -webkit-linear-gradient(top, #2890c3, 0%, #45a8d9, 100%)
;
background-image: -moz-linear-gradient(top, #2890c3 0%, #45a8d9 100%);
background-image: linear-gradient(to bottom, #2890c3 0%, #45a8d9 100%);
background-repeat: repeat-x;
filter: progid : DXImageTransform . Microsoft .
gradient(startColorstr = '#ff2890c3', endColorstr = '#ff45a8d9',
GradientType = 0);
}
.navbar-custom .navbar-nav>.disabled>a,.navbar-custom .navbar-nav>.disabled>a:hover,.navbar-custom .navbar-nav>.disabled>a:focus
{
color: #cccccc;
background-color: transparent;
}
.navbar-custom .navbar-toggle {
border-color: #dddddd;
}
.navbar-custom .navbar-toggle:hover,.navbar-custom .navbar-toggle:focus
{
background-color: #dddddd;
}
.navbar-custom .navbar-toggle .icon-bar {
background-color: #cccccc;
}
.navbar-custom .navbar-collapse,.navbar-custom .navbar-form {
border-color: #278ec1;
}
.navbar-custom .navbar-nav>.dropdown>a:hover .caret,.navbar-custom .navbar-nav>.dropdown>a:focus .caret
{
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-custom .navbar-nav>.open>a,.navbar-custom .navbar-nav>.open>a:hover,.navbar-custom .navbar-nav>.open>a:focus
{
background-color: #2890c3;
color: #c0c0c0;
}
.navbar-custom .navbar-nav>.open>a .caret,.navbar-custom .navbar-nav>.open>a:hover .caret,.navbar-custom .navbar-nav>.open>a:focus .caret
{
border-top-color: #c0c0c0;
border-bottom-color: #c0c0c0;
}
.navbar-custom .navbar-nav>.dropdown>a .caret {
border-top-color: #ffffff;
border-bottom-color: #ffffff;
}
@media ( max-width : 767) {
.navbar-custom .navbar-nav .open .dropdown-menu>li>a {
color: #ffffff;
}
.navbar-custom .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .open .dropdown-menu>li>a:focus
{
color: #c0c0c0;
background-color: transparent;
}
.navbar-custom .navbar-nav .open .dropdown-menu>.active>a,.navbar-custom .navbar-nav .open .dropdown-menu>.active>a:hover,.navbar-custom .navbar-nav .open .dropdown-menu>.active>a:focus
{
color: #c0c0c0;
background-color: #2890c3;
}
.navbar-custom .navbar-nav .open .dropdown-menu>.disabled>a,.navbar-custom .navbar-nav .open .dropdown-menu>.disabled>a:hover,.navbar-custom .navbar-nav .open .dropdown-menu>.disabled>a:focus
{
color: #cccccc;
background-color: transparent;
}
}
.navbar-custom .navbar-link {
color: #ffffff;
}
.navbar-custom .navbar-link:hover {
color: #c0c0c0;
}
.panel-login {
border-color: #ccc;
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
}
.panel-login>.panel-heading {
color: #00415d;
background-color: #fff;
border-color: #fff;
text-align:center;
}
.panel-login>.panel-heading a{
text-decoration: none;
color: #666;
font-weight: bold;
font-size: 15px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login>.panel-heading a.active{
color: #029f5b;
font-size: 18px;
}
.panel-login>.panel-heading hr{
margin-top: 10px;
margin-bottom: 0px;
clear: both;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.15),rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -ms-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
background-image: -o-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.15),rgba(0,0,0,0));
}
.panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] {
height: 45px;
border: 1px solid #ddd;
font-size: 16px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login input:hover,
.panel-login input:focus {
outline:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-color: #ccc;
}
.btn-login {
background-color: #59B2E0;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #59B2E6;
}
.btn-login:hover,
.btn-login:focus {
color: #fff;
background-color: #53A3CD;
border-color: #53A3CD;
}
.forgot-password {
text-decoration: underline;
color: #888;
}
.forgot-password:hover,
.forgot-password:focus {
text-decoration: underline;
color: #666;
}
.btn-register {
background-color: #1CB94E;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #1CB94A;
}
.btn-register:hover,
.btn-register:focus {
color: #fff;
background-color: #1CA347;
border-color: #1CA347;
}
html,
body {
/*css for full size background image http://p1.pichost.me/i/66/1910857.jpg*/
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
background-color: #FA0;
color: #fff;
text-align: left;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Related to SIde MENU Text */
.btn-nav {
color: #e92d00;
background-color: #fff;
border: 1px solid #e0e1db;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.btn-nav:hover {
color: #1dcaff;
cursor: pointer;
-webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
transition: color 1s;
}
.btn-nav.active {
background: grey;
color: #1dcaff;
padding: 2px;
border-top: 6px solid #1dcaff;
border-bottom: 6px solid #1dcaff ;
border-left: 0;
border-right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */
-o-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
}
.btn-nav.active:before {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 6px 0;
border-color: #1dcaff transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
top: 0;
left: 50%;
}
.btn-nav .glyphicon {
padding-top: 8px;
font-size: 30px;
}
.btn-nav.active p {
margin-bottom: 8px;
}
@-webkit-keyframes pulsate {
50% { color: #000; }
}
@keyframes pulsate {
50% { color: #000; }
}
@media (max-width: 100%) {
.btn-group {
display: block !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 100%) {
.btn-nav .glyphicon {
padding-top: 12px;
font-size: 26px;
}
}
/**************************************************************************************************/
/* USER PROFILE PAGE */
.card {
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
position: relative;
padding-top: 0;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
min-width: relative;
height: 320px;
margin-top: 10%;
margin-bottom: -10%;
}
.card-background img.fb-image-lg{
height: 900px;
background-image:fixed;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
filter: blur(25px);
margin-left: -10%;
margin-top: -10%;
margin-right: -10%;
min-width: relative;
}
.card.hovercard .useravatar {
position: absolute;
bottom: 50px;
left: relative;
}
.card.hovercard .useravatar img {
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: relative;
color:relative;
}
.card.hovercard .card-info .card-title {
padding:0 5px;
font-size: 30px;
line-height: 1;
color: #0084b4;
background-color: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius:0 !important;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
.form-group{
position: relative;
width: auto;
}
.form-control{
background: transparent;
width: relative;
}
form {
width: relative;
margin: 0;
}
form > div {
position: relative;
overflow: hidden;
}
form input, form textarea {
width: 100%;
border: 1px solid brown;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
}
form input:valid, form textarea:valid {
background: white;
}
form input:focus, form textarea:focus {
border-color: #357EBD;
}
form input:focus + label, form textarea:focus + label {
background: #0084b4;
color: white;
font-size: 70%;
padding: 1px 6px;
z-index: 2;
text-transform: uppercase;
}
form label {
-webkit-transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
position: absolute;
color: #999;
padding: 7px 6px;
font-weight: normal;
}
form textarea {
display: block;
resize: vertical;
}
form.go-bottom input, form.go-bottom textarea {
padding: 12px 12px 12px 12px;
}
form.go-bottom label {
top: 0;
bottom: 0;
left: 0;
width: 100%;
}
form.go-bottom input:focus, form.go-bottom textarea:focus {
padding: 4px 6px 20px 6px;
}
form.go-bottom input:focus + label, form.go-bottom textarea:focus + label {
top: 100%;
margin-top: -16px;
}
form.go-right label {
border-radius: 0 5px 5px 0;
height: 100%;
top: 0;
right: 100%;
width: 100%;
margin-right: -100%;
}
form.go-right input:focus + label, form.go-right textarea:focus + label {
right: 0;
margin-right: 0;
width: 40%;
padding-top: 5px;
}
html,
body {
/*css for full size background image http://p1.pichost.me/i/66/1910857.jpg*/
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
background-color: #d9d9d9;
color: #fff;
text-align: left;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 50%;
height: 50%; /* For at least Firefox */
min-height: 50%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
body {
padding-top: 0px;
}
.material-button-anim {
position: relative;
padding: 10px 15px 27px;
text-align: center;
max-width: relative;
margin: 0 auto 20px;
}
.material-button {
position: relative;
top: 0;
z-index: 1;
width: 70px;
height: 70px;
font-size: 1.5em;
color: #fff;
background: #2C98DE;
border: none;
border-radius: 50%;
box-shadow: 0 3px 6px rgba(0,0,0,.275);
outline: none;
}
.material-button-toggle {
z-index: 5;
width: 90px;
height: 90px;
margin: 0 auto;
}
.material-button-toggle span {
-webkit-transform: none;
transform: none;
-webkit-transition: -webkit-transform .175s cubic-bazier(.175,.67,.83,.67);
transition: transform .175s cubic-bazier(.175,.67,.83,.67);
}
.material-button-toggle.open {
-webkit-transform: scale(1.3,1.3);
transform: scale(1.3,1.3);
-webkit-animation: toggleBtnAnim .175s;
animation: toggleBtnAnim .175s;
}
.material-button-toggle.open span {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: -webkit-transform .175s cubic-bazier(.175,.67,.83,.67);
transition: transform .175s cubic-bazier(.175,.67,.83,.67);
}
#options {
height: 70px;
}
.option {
position: relative;
}
.option .option1,
.option .option2,
.option .option3 {
filter: blur(5px);
-webkit-filter: blur(5px);
-webkit-transition: all .175s;
transition: all .175s;
}
.option .option1 {
-webkit-transform: translate3d(90px,90px,0) scale(.8,.8);
transform: translate3d(90px,90px,0) scale(.8,.8);
}
.option .option2 {
-webkit-transform: translate3d(0,90px,0) scale(.8,.8);
transform: translate3d(0,90px,0) scale(.8,.8);
}
.option .option3 {
-webkit-transform: translate3d(-90px,90px,0) scale(.8,.8);
transform: translate3d(-90px,90px,0) scale(.8,.8);
}
.option.scale-on .option1,
.option.scale-on .option2,
.option.scale-on .option3 {
filter: blur(0);
-webkit-filter: blur(0);
-webkit-transform: none;
transform: none;
-webkit-transition: all .175s;
transition: all .175s;
}
.option.scale-on .option2 {
-webkit-transform: translateY(-28px) translateZ(0);
transform: translateY(-28px) translateZ(0);
-webkit-transition: all .175s;
transition: all .175s;
}
@keyframes toggleBtnAnim {
0% {
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
25% {
-webkit-transform: scale(1.4,1.4);
transform: scale(1.4,1.4);
}
75% {
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
100% {
-webkit-transform: scale(1.3,1.3);
transform: scale(1.3,1.3);
}
}
@-webkit-keyframes toggleBtnAnim {
0% {
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
25% {
-webkit-transform: scale(1.4,1.4);
transform: scale(1.4,1.4);
}
75% {
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
100% {
-webkit-transform: scale(1.3,1.3);
transform: scale(1.3,1.3);
}
}
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
}
.thumbnail {
padding: 0;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 100%;
}
.recipients .panel-body {
overflow: auto;
max-height: 200px;
}
.recipients .recipient {
display: block;
float: left;
width: 140px;
margin: 0 5px 5px 0;
font-size: 0.85em;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.recipients .recipient img {
float: left;
height: 28px;
margin-right: 5px;
}
.recipients .recipient .email {
font-size: 0.9em;
color: #999;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});
/* #####################################################################
#
# Project : Modal login version
#
##################################################################### */
$(function() {
var $formLogin = $('#login-form');
var $formLost = $('#lost-form');
var $formRegister = $('#register-form');
var $divForms = $('#div-forms');
var $modalAnimateTime = 300;
var $msgAnimateTime = 150;
var $msgShowTime = 2000;
$("form").submit(function () {
switch(this.id) {
case "login-form":
var $lg_username=$('#login_username').val();
var $lg_password=$('#login_password').val();
if ($lg_username == "ERROR") {
msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "error", "glyphicon-remove", "Login error");
} else {
msgChange($('#div-login-msg'), $('#icon-login-msg'), $('#text-login-msg'), "success", "glyphicon-ok", "Login OK");
}
return false;
break;
case "lost-form":
var $ls_email=$('#lost_email').val();
if ($ls_email == "ERROR") {
msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "error", "glyphicon-remove", "Send error");
} else {
msgChange($('#div-lost-msg'), $('#icon-lost-msg'), $('#text-lost-msg'), "success", "glyphicon-ok", "Send OK");
}
return false;
break;
case "register-form":
var $rg_username=$('#register_username').val();
var $rg_email=$('#register_email').val();
var $rg_password=$('#register_password').val();
if ($rg_username == "ERROR") {
msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "error", "glyphicon-remove", "Register error");
} else {
msgChange($('#div-register-msg'), $('#icon-register-msg'), $('#text-register-msg'), "success", "glyphicon-ok", "Register OK");
}
return false;
break;
default:
return false;
}
return false;
});
$('#login_register_btn').click( function () { modalAnimate($formLogin, $formRegister) });
$('#register_login_btn').click( function () { modalAnimate($formRegister, $formLogin); });
$('#login_lost_btn').click( function () { modalAnimate($formLogin, $formLost); });
$('#lost_login_btn').click( function () { modalAnimate($formLost, $formLogin); });
$('#lost_register_btn').click( function () { modalAnimate($formLost, $formRegister); });
$('#register_lost_btn').click( function () { modalAnimate($formRegister, $formLost); });
function modalAnimate ($oldForm, $newForm) {
var $oldH = $oldForm.height();
var $newH = $newForm.height();
$divForms.css("height",$oldH);
$oldForm.fadeToggle($modalAnimateTime, function(){
$divForms.animate({height: $newH}, $modalAnimateTime, function(){
$newForm.fadeToggle($modalAnimateTime);
});
});
}
function msgFade ($msgId, $msgText) {
$msgId.fadeOut($msgAnimateTime, function() {
$(this).text($msgText).fadeIn($msgAnimateTime);
});
}
function msgChange($divTag, $iconTag, $textTag, $divClass, $iconClass, $msgText) {
var $msgOld = $divTag.text();
msgFade($textTag, $msgText);
$divTag.addClass($divClass);
$iconTag.removeClass("glyphicon-chevron-right");
$iconTag.addClass($iconClass + " " + $divClass);
setTimeout(function() {
msgFade($textTag, $msgOld);
$divTag.removeClass($divClass);
$iconTag.addClass("glyphicon-chevron-right");
$iconTag.removeClass($iconClass + " " + $divClass);
}, $msgShowTime);
}
});
$(function () {
$('.button-checkbox').each(function () {
// Settings
var $widget = $(this),
$button = $widget.find('button'),
$checkbox = $widget.find('input:checkbox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
// Event Handlers
$button.on('click', function () {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});
$checkbox.on('change', function () {
updateDisplay();
});
// Actions
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
// Update the button's color
if (isChecked) {
$button
.removeClass('btn-default')
.addClass('btn-' + color + ' active');
}
else {
$button
.removeClass('btn-' + color + ' active')
.addClass('btn-default');
}
}
// Initialization
function init() {
updateDisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length == 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
}
}
init();
});
});
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
var placeSearch, autocomplete;
var componentForm = {
route: 'long_name',
locality: 'long_name',
administrative_area_level_2:'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
// [START region_fillform]
function fillInAddress() {
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initAutocomplete"
async defer></script>
<script type="text/javascript">
var activeEl = 0;
$(function() {
var items = $('.btn-nav');
$( items[activeEl] ).addClass('active');
$( ".btn-nav" ).click(function() {
$( items[activeEl] ).removeClass('active');
// $(".hovercard").hide();
$( this ).addClass('active');
activeEl = $( ".btn-nav" ).index( this );
//if(activeEl==0)
// {
// $(".hovercard").show();
//}
});
});
</script>
