<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://auction.gaadiexpert.com"><img src="http://auction.gaadiexpert.com/images/Logo-656x145.png" alt="auction.gaadiexpert.com"> </a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Faq's</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-collapse -->
</nav>
<!------------- MAIN PAGE CONTENT AREA --------->
<div class="site-panel"style="margin-top:110px">
<div class="container">
<div class="row">
<div class="col-md-3 well">
<div class= "sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">My Profile</a>
<a href="#" class="list-group-item">My Wishlist</a>
<a href="#" class="list-group-item">My Interests</a>
<a href="#" class="list-group-item">My Bids</a>
<a href="#" class="list-group-item">My Liftings</a>
<a href="#" class="list-group-item">My Documents</a>
<a href="#" class="list-group-item">Bidding History</a>
<a href="#" class="list-group-item">My Payments</a>
</div>
</div>
</div>
<div class="col-md-9 ">
<div class= "content-box well">
<legend>My Interests </legend>
<div class="row">
<div class="col-md-4">
<div class=" interest-check-box">
<input type="checkbox" id="box-1">
<label for="box-1">Maruti</label>
<input type="checkbox" id="box-2" checked>
<label for="box-2">Skoda </label>
<input type="checkbox" id="box-3">
<label for="box-3">Honda</label>
</div>
</div>
<div class="col-md-4">
<div class=" interest-check-box">
<input type="checkbox" id="box-11">
<label for="box-11">Maruti</label>
<input type="checkbox" id="box-12" checked>
<label for="box-12">Skoda </label>
<input type="checkbox" id="box-13">
<label for="box-13">Honda</label>
</div>
</div>
<div class="col-md-4">
<div class=" interest-check-box">
<input type="checkbox" id="box-21">
<label for="box-21">Maruti</label>
<input type="checkbox" id="box-22" checked>
<label for="box-22">Skoda </label>
<input type="checkbox" id="box-23">
<label for="box-23">Honda</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-area ">
<div class="footer ">
<div class="container">
<div class="col-md-4 footer-one">
<h5>About Us </h5>
<p>Cras sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="social-icons">
<a href="https://www.facebook.com/"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>
<a href="https://twitter.com/"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
<a href="https://plus.google.com/"><i id="social-gp" class="fa fa-google-plus-square fa-3x social"></i></a>
<a href="mailto:bootsnipp@gmail.com"><i id="social-em" class="fa fa-envelope-square fa-3x social"></i></a>
</div>
</div>
<div class="col-md-3 footer-two">
<h5>Information </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="col-md-3 footer-three">
<h5>Helpful Links </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="col-md-2 footer-four">
<h5>Helpful Links </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center ">
<div class="copyright-text">
<p>CopyRight © 2017 Digital All Rights Reserved</p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
</div>
.interest-check-box {
margin: auto;
padding: 50px;
background: #;
}
body{background:#f2f2f2; }
div[class*="col"]{padding-left:5px; padding-right:5px;}
.area-padding {padding:60px 0px 60px 0px;}
.area-padding2 {padding:20px 0px 20px 0px;}
h1,h2,h3 {font-weight:700;}
a{color:#b9b9b9;}
a:hover{color:#dd0000;}
span{color:#dd0000;}
i {color:#dd0000;}
li {line-height:26px;}
li i {padding-right:10px;}
.x8 {font-size:80px;}
.x10 {font-size:350px;}
.x4 {font-size:40px;}
.bg-white {background:#fff;}
.bg-yellow {background:#e7e7e7;color:#696969;}
.green {color:#27db99;}
.spacer-tp-70{margin-top:110px;}
.spacer-bp-50{padding-bottom:50px;}
.shadow-depth1{box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2);padding:15px;}
.shadow-depth1:hover {background:#f7f7f7;}
.well {background: #fff; min-height: 50px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);position: relative;margin-bottom:5px;padding-bottom: 30px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px; border-radius: 2px;}
.ratings i {color:#ffda6b;}
.affix {top: 0; width: 100%;z-index: 9999 !important;}
.affix + .container-fluid {padding-top: 70px;}
/*********** My interests checkbox *********/
/*Checkboxes styles*/
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background:#f2f2f2;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #dd0000;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-right-color:green;
border-bottom-color:green;
}
/*********** List Car- Wishlist *************/
.list-car-block {background:#f2f2f2;border-bottom: 1px solid #dd0000; margin-bottom:10px;}
/***** Image Trail *******/
@media only screen and (min-width: 992px) {
img {
max-width: 180px;
}
}
/**************** card css ********/
.card {
background: #fff none repeat scroll 0 0;
box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.16);
margin-bottom: 30px;
overflow: hidden;
display: block;
width: 100%;
position: relative;
border: 1px solid #e5e5e5;
}
.card-img {border-radius: 0px 0px 0 0;max-height:180px;overflow: hidden;}
.card:hover {box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);}
.card-block {padding: 15px 15px 0 15px; background: #fff none repeat scroll 0 0;}
.card-block ul {line-height: 30px; margin-bottom: 0;margin-top: 0;}
.card-block li { margin-right: 10px;}
.card-footer {
background: #fff none repeat scroll 0 0;
overflow: hidden;
width: 100%;
border-top: 1px solid #e5e5e5;
}
.card-date {
display: inline-block;
margin-top: 8px;
padding-left: 14px;
margin-bottom: 0;
}
.card-footer ul li a {
border-left: 1px solid #e5e5e5;
display: block;
height: inherit;
margin-top: 8px;
text-align: center;
width: 30px;
}
/********** AD BOX & FILTER SECTION *************/
.adbox-img {padding:8px;border: 1px solid #ababab;background-color : #e2e2e2;}
.adbox-img img {border: 1px solid #ababab;}
/* Top Filter Box */
.tfilter-box {padding:15px 0px 1px 0px;border-bottom: 1px solid #dd0000;background-color : #fff;}
/********* Buttons ***********/
.site-btn-default {margin:0px 0px 19px 0px;padding:12px 40px 12px 45px;background:#e2e2e2;border:1px solid #dd0000;border-radius:0px;font-weight:600;}
.site-btn-success {margin:0px 0px 19px 0px;padding:12px 40px 12px 45px;background:#5cb85c;border:1px solid #419641;;border-radius:0px;font-weight:600;}
.site-btn-success:hover {background:#449d44;color:#fff;}
.site-btn {margin:0px 0px 19px 0px;padding:12px 40px 12px 45px;background:#dd0000;border:1px solid #dd0000;border-radius:0px;font-weight:600;}
.site-btn:hover {background:#fff;color:#dd0000;}
/********** panel area **********/
.panel {
margin-bottom: 20px;
background-color: transparent;
border: 1px solid #ADB0B6;
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2)
}
.panel-heading {
padding: 13px 15px;
border-bottom: 1px solid transparent;
border-bottom-color: transparent;
border-top-left-radius:0px;
border-top-right-radius: 0px;
}
/************* fixed bottom Filter *********/
.fixed-b-filter {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #f2f2f2;
color: white;
text-align: center;
}
/****** FORM AREA ****************/
.form-control, select,textarea {
display: block;
width: 100%;
height: 48px;
border: 1px solid #e9e6e0;
border-radius: 0;
background-color: #f5f5f5;
background-image: none;
box-shadow: none;
color: #000;
font-size: 14px;
line-height: 1.42857143;
}
form-control::-webkit-input-placeholder { color: black; }
.form-control:-moz-placeholder { color: black; }
.form-control::-moz-placeholder { color: black; }
.form-control:-ms-input-placeholder { color: black; }
.form-control:focus{border-color: #dd0000; box-shadow: none; -webkit-box-shadow: none;}
/******** UPLOAD BOX **********/
/* upload button css */
.upload-box .btn-file {
background-color: #adaba9;
}
.upload-box .btn-file:hover {
background-color: #686563;
}
.upload-box .hold {
float: left;
width: 100%;
position: relative;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
.upload-box .hold a {
font: 400 14px/36px 'Roboto',sans-serif;
color: #666;
text-decoration: none;
}
.upload-box .btn-file {
position: relative;
overflow: hidden;
float: left;
padding: 12px 9px;
font: 300 14px/14px 'Roboto',sans-serif;
color: #fff;
margin: 0 10px 0 0;
text-transform: uppercase;
border-radius: 3px;
cursor: pointer;
}
.upload-box .btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
opacity: 0;
outline: none;
background: #fd0707;
cursor: inherit;
display: block;
}
/************ Image Banner **************/
.image-aboutus-banner {
background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.8)), url("https://images.pexels.com/photos/226460/pexels-photo-226460.jpeg?w=940&h=650&auto=compress&cs=tinysrgb");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: #FFF;
padding-top: 110px;
padding-bottom:125px;
}
/****** ABOUT US Section ********/
.about-img img {width:100%;}
/* Footer */
.footer {border-top:1px solid #e2e2e2;position: relative;background-color: #282C35;padding: 55px 0 40px;color: #ADB0B6;}
.footer a {color: #ADB0B6;line-height:36px;}
.footer h5 {font-size:18px;font-weight:600;}
.footer h5:after {
content: '';
display: block;
margin: 5px 0 0;
width: 200px;
height:1px;
background-color: #3C3F46;
}
.footer ul {list-style: none;line-height: 2.2em;padding-left:0px;}
/*footer bottom */
.footer-bottom {padding-top: 15px;padding-bottom: 8px;border-top: 1px solid rgba(0,0,0,0.09);background: #3C3F46;color:#ADB0B6;}
/* Social Icons */
.social-icons a{margin: 0;padding: 0;font-size : 8px;}
.social {color:#dd0000; }
#social-fb:hover {color: #3B5998;transition:all .25s;}
#social-tw:hover {color: #4099FF;transition:all .25s;}
#social-gp:hover {color: #d34836;transition:all .25s;}
#social-em:hover {color: #f39c12;transition:all .25s;}
/************** NAVIGATION ***************/
.caret-up {
width: 0;
height: 0;
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-bottom: 4px solid;
display: inline-block;
margin-left: 2px;
vertical-align: middle;
}
.dropdown-menu {padding:0px;}
.dropdown-menu > li > a {
color: #514f4f;
text-decoration: none;
background-color: #fff ;
}
.dropdown-menu > li > a:hover {
color: #fff;
text-decoration: none;
background-color: #dd0000 ;
}
.dropdown-menu > li > a {padding:8px; border-bottom:1px solid #e2e2e2;}
.navbar-brand > img {
height: 250%;
padding-bottom: 10px;
width: auto;
}
.navbar-default {
background-color: #ffffff;
border-color: #dd0000;
padding:20px 0px 10px 0px;
border-bottom:1px solid #dd0000;
font-weight:600;
letter-spacing:1px;
font-size:16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.navbar-default .navbar-brand {
color: #33373d;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #dd0000;
}
.navbar-default .navbar-text {
color: #33373d;
}
.navbar-default .navbar-nav > li > a {
color: #33373d;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #dd0000;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #dd0000;
background-color: #ffffff;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #dd0000;
background-color: #ffffff;
}
.navbar-default .navbar-toggle {
border-color: #ffffff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #33373d;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #33373d;
}
.navbar-default .navbar-link {
color: #33373d;
}
.navbar-default .navbar-link:hover {
color: #dd0000;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #33373d;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #dd0000;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #dd0000;
background-color: #ffffff;
}
}
