<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 ---------->
<nav class="navbar navbar-inverse navbar-fixed-top shadow1" 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="#">Brand</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 class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Login <b class="caret"></b></a>
<ul id="login-dp" class="dropdown-menu">
<li>
<div class="row">
<div class="col-md-12">
Auction Portal Login
<form class="form" role="form" method="post" action="login" accept-charset="UTF-8" id="login-nav">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Email address" required>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" required>
<div class="help-block text-right"><a href="">Reset password ?</a></div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</div>
</form>
</div>
<div class="bottom text-center">
New here ? <a href="#"><b>Join</b></a>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-collapse -->
</nav>
<div class="jumbotron text-center banner shadow1">
<h2><strong>Treehouse Community</strong></h2>
<p>We specialize in blablabla</p>
<form class="form-inline" role="form">
<div class="form-group">
<label for="name">Name</label>
<input type="name" class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group">
<label>C-Band</label>
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label>C-Band</label>
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label>C-Band</label>
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label>C-Band</label>
<select id="cband" class="form-control">
<option value="C15+">C15+</option>
<option value="C12-14">C12-14</option>
<option value="Other">Other</option>
</select>
</div>
<button type="button" class="btn btn-danger buttons red ">Submit</button>
</form>
<br>
</div>
<div class ="container">
<div class="row">
<div class="col-md-4">
<div class="media">
<div class="media-left padding20">
<a href="#"><span style="font-size: 55px" class="glyphicon glyphicon-cog red"></span></a>
</div>
<div class="media-body">
<h2 class="subtitle">Discovery & Strategy</h2>
<p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="media-left padding20">
<a href="#"><span style="font-size: 55px" class="glyphicon glyphicon-cog orange"></span></a>
</div>
<div class="media-body">
<h2 class="subtitle">Discovery & Strategy</h2>
<p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="media-left padding20">
<a href="#"><span style="font-size: 55px" class="glyphicon glyphicon-cog orange"></span></a>
</div>
<div class="media-body">
<h2 class="subtitle">Discovery & Strategy</h2>
<p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="media">
<div class="media-left padding20">
<a href="#"><span style="font-size: 55px" class="glyphicon glyphicon-cog orange"></span></a>
</div>
<div class="media-body">
<h2 class="subtitle">Discovery & Strategy</h2>
<p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="media-left padding20">
<a href="#"><span style="font-size: 55px" class="glyphicon glyphicon-cog orange"></span></a>
</div>
<div class="media-body">
<h2 class="subtitle">Discovery & Strategy</h2>
<p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="media">
<div class="media-left padding20">
<a href="#"><span style="font-size: 55px" class="glyphicon glyphicon-cog orange"></span></a>
</div>
<div class="media-body">
<h2 class="subtitle">Discovery & Strategy</h2>
<p>Excepteur sint occaecat cupi datat non proidt, sunt in culpa qui offi cia deserunt</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="carbox">
<a class="img-carbox" href="http://www.big.com/2016/03/bootstrap-3-carousel-fade-effect.html">
<img src="https://1.bp.blogspot.com/-Bii3S69BdjQ/VtdOpIi4aoI/AAAAAAAABlk/F0z23Yr59f0/s640/cover.jpg" />
</a>
<div class="carbox-content">
<h4 class="carbox-title">
<a href="http://www.big.com/2016/03/bootstrap-3-carousel-fade-effect.html"> Bootstrap 3 Carousel FadeIn Out Effect
</a>
</h4>
<p class="">
Tutorial to make a carousel bootstrap by adding more wonderful effect fadein ...
</p>
</div>
<div class="carbox-read-more">
<a href="http://www.big.com/2016/03/bootstrap-3-carousel-fade-effect.html" class="btn btn-link btn-block">
Read More
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="carbox">
<a class="img-carbox" href="http://www.big.com/2016/03/5-button-hover-animation-effects-css3.html">
<img src="https://3.bp.blogspot.com/-bAsTyYC8U80/VtLZRKN6OlI/AAAAAAAABjY/kAoljiMALkQ/s400/material%2Bnavbar.jpg" />
</a>
<div class="carbox-content">
<h4 class="carbox-title">
<a href="http://www.big.com/2016/02/awesome-material-design-responsive-menu.html"> Material Design Responsive Menu
</a>
</h4>
<p class="">
Material Design is a visual programming language made by Google. Language programming...
</p>
</div>
<div class="carbox-read-more">
<a href="http://codepen.io/wisnust10/full/ZWERZK/" class="btn btn-link btn-block">
Read More
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="carbox">
<a class="img-carbox" href="http://www.big.com/2016/03/5-button-hover-animation-effects-css3.html">
<img src="https://4.bp.blogspot.com/-TDIJ17DfCco/Vtneyc-0t4I/AAAAAAAABmk/aa4AjmCvRck/s1600/cover.jpg" />
</a>
<div class="carbox-content">
<h4 class="carbox-title">
<a href="http://www.big.com/2016/03/5-button-hover-animation-effects-css3.html">5 Button Hover Animation Effects
</a>
</h4>
<p class="">
tutorials button hover animation, although very much a hover button is very beauti...
</p>
</div>
<div class="carbox-read-more">
<a href="http://www.big.com/2016/03/5-button-hover-animation-effects-css3.html" class="btn btn-link btn-block">
Read More
</a>
</div>
</div>
</div>
</div>
</div>
<div class="padding80 bgcolor-blue shadow1">
<div class="container">
<div class="col-md-8">
<h3>Subscribe to our newsletter</h3>
</div>
<div class="col-md-4">
<br>
<form class="form-inline">
<div class="input-group">
<input type="email" class="form-control" size="50" placeholder="Email Address" required>
<div class="input-group-btn">
<button type="button" class="btn btn-danger">Subscribe</button>
</div>
</div>
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="carbox">
<a class="img-carbox" href="http://www.big.com/2016/03/bootstrap-3-carousel-fade-effect.html">
<img src="https://1.bp.blogspot.com/-Bii3S69BdjQ/VtdOpIi4aoI/AAAAAAAABlk/F0z23Yr59f0/s640/cover.jpg" />
</a>
<div class="carbox-content">
<h4 class="carbox-title">
<a href="http://www.big.com/2016/03/bootstrap-3-carousel-fade-effect.html"> Bootstrap 3 Carousel FadeIn Out Effect
</a>
</h4>
<p class="">
Tutorial to make a carousel bootstrap by adding more wonderful effect fadein ...
</p>
</div>
<div class="carbox-read-more">
<a href="http://www.big.com/2016/03/bootstrap-3-carousel-fade-effect.html" class="btn btn-link btn-block">
Read More
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="carbox">
<a class="img-carbox" href="http://www.big.com/2016/03/5-button-hover-animation-effects-css3.html">
<img src="https://3.bp.blogspot.com/-bAsTyYC8U80/VtLZRKN6OlI/AAAAAAAABjY/kAoljiMALkQ/s400/material%2Bnavbar.jpg" />
</a>
<div class="carbox-content">
<h4 class="carbox-title">
<a href="http://www.big.com/2016/02/awesome-material-design-responsive-menu.html"> Material Design Responsive Menu
</a>
</h4>
<p class="">
Material Design is a visual programming language made by Google. Language programming...
</p>
</div>
<div class="carbox-read-more">
<a href="http://codepen.io/wisnust10/full/ZWERZK/" class="btn btn-link btn-block">
Read More
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="carbox">
<a class="img-carbox" href="http://www.big.com/2016/03/5-button-hover-animation-effects-css3.html">
<img src="https://4.bp.blogspot.com/-TDIJ17DfCco/Vtneyc-0t4I/AAAAAAAABmk/aa4AjmCvRck/s1600/cover.jpg" />
</a>
<div class="carbox-content">
<h4 class="carbox-title">
<a href="http://www.big.com/2016/03/5-button-hover-animation-effects-css3.html">5 Button Hover Animation Effects
</a>
</h4>
<p class="">
tutorials button hover animation, although very much a hover button is very beauti...
</p>
</div>
<div class="carbox-read-more">
<a href="http://www.big.com/2016/03/5-button-hover-animation-effects-css3.html" class="btn btn-link btn-block">
Read More
</a>
</div>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="site-footer-top">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 footer_widget widget widget_newsletter">
<h4 class="widgettitle">Sign up for our newsletter</h4>
<form>
<input class="form-control" placeholder="Name" type="text">
<input class="form-control" placeholder="Email" type="email">
<input class="btn btn-danger btn-sm" value="Sign up now" type="submit">
</form>
</div>
<div class="col-md-2 col-sm-6 footer_widget widget widget_custom_menu widget_links">
<h4 class="widgettitle">Quick Links</h4>
<ul>
<li><a href="blog.html"><i class="fa fa-angle-right"></i> About gaadiexpert</a></li>
<li><a href="blog-masonry.html"><i class="fa fa-angle-right"></i> Faq's</a></li>
<li><a href="about.html"><i class="fa fa-angle-right"></i> Features</a></li>
<li><a href="about-html"><i class="fa fa-angle-right"></i> Registration</a></li>
</ul>
</div>
<div class="col-md-2 col-sm-6 footer_widget widget widget_custom_menu widget_links">
<h4 class="widgettitle">Help & Support</h4>
<ul>
<li><a href="results-list.html"><i class="fa fa-angle-right"></i> Saved Searches</a></li>
<li><a href="joinus.html"><i class="fa fa-angle-right"></i> Wishlist</a></li>
<li><a href="about.html"><i class="fa fa-angle-right"></i> Vehicle Finder</a></li>
<li><a href="contact.html"><i class="fa fa-angle-right"></i> Vehicle Alerts</a></li>
</ul>
</div>
<div class="col-md-5 col-sm-6 footer_widget widget text_widget">
<h4 class="widgettitle">Auction.Gaadiexpert</h4>
<p>Gaadiexpert.com is a leader in Indian automotive, glamorous and attractive world of cars. It is one of the best source for the latest automotive news and Read more....</p>
</div>
</div>
</div>
</div>
<div class="site-footer-bottom">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 copyrights-left">
<p>© 2014 gaadiexpert. All Rights Reserved</p>
</div>
<div class="col-md-6 col-sm-6 copyrights-right">
<ul class="social-icons social-icons-colored pull-right">
<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="linkedin"><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li class="youtube"><a href="#"><i class="fa fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,900);
html,
body {
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
width: 100%;
background: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 400;
padding-top: 25px;
}
.banner {
background-image: url("https://images.pexels.com/photos/203724/pexels-photo-203724.jpeg?w=940&h=650&auto=compress&cs=tinysrgb");
background-color: #cccccc;
background-size: 100%;
height : 350px;
}
.shadow {
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
.shadow1 {
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-ms-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
/* ==================================================
6. footer
================================================== */
.site-footer{
background:#2f2f2f;
color:#999;
}
.site-footer .form-control{
background: rgba(255,255,255,.8);
border:none;
}
.site-footer .form-control:focus, .site-footer .form-control:active{
background: rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.05);
box-shadow:none;
-webkit-box-shadow:none;
-moz-box-shadow:none;
}
.site-footer a{
color:#999;
}
.site-footer a:hover{
color:#fff;
}
.site-footer-top{
padding:50px 0;
}
.footer_widget .widgettitle{
font-weight:400;
margin-bottom:25px;
border-bottom:1px solid rgba(255,255,255,.05);
padding-bottom:25px;
color:#eee
}
.site-footer-bottom{
background:#252525;
padding:20px 0 0px;
border-top:1px solid rgba(255,255,255,.05);
font-size:12px;
}
.footer_widget.widget a{
color:#999;
}
.form-control{
margin-bottom:10px!important;
}
/* CALL TO ACTION *********
**************** ****/
.bgcolor-blue {
background: #42adf4;
color: #fff;
}
.padding80 {
padding: 80px 0;
margin-bottom:20px;
}
/************ BUTTONS CSS -
MATERIAL TYPE ****************/
.buttons {
text-align: center;
display: inline-block;
padding: 8px 30px;
border-radius: 2px;
letter-spacing: .5px;
border-radius: 2px;
text-decoration: none;
color: #fff;
overflow: hidden;
position: relative;
z-index: 0;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.textblack {
color:#1c1c1c;
}
/************ BACKGROUND COLOR FOR BUTTONS -
MATERIAL TYPE ****************/
.red {
background-color: #F44336;
}
.pink {
background-color: #E91E63;
}
.blue {
background-color: #2196F3;
}
.cyan {
background-color: #00bcd4;
}
.teal {
background-color: #009688;
}
.yellow {
background-color: #FFEB3B;
color: #000;
}
.orange {
background-color: #FF9800;
}
.brown {
background-color: #795548;
}
.grey {
background-color: #9E9E9E;
}
.black {
background-color: #000000;
}
/****** Card box design *********
*********************** */
.carbox {
display: block;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
transition: box-shadow .25s;
}
.carbox:hover {
box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
.img-carbox {
width: 100%;
height:200px;
border-top-left-radius:2px;
border-top-right-radius:2px;
display:block;
overflow: hidden;
}
.img-carbox img{
width: 100%;
height: 200px;
object-fit:cover;
transition: all .25s ease;
}
.carbox-content {
padding:15px;
text-align:left;
}
.carbox-title {
margin-top:0px;
font-weight: 700;
font-size: 1.65em;
}
.carbox-title a {
color: #000;
text-decoration: none !important;
}
.carbox-read-more {
border-top: 1px solid #D4D4D4;
}
.carbox-read-more a {
text-decoration: none !important;
padding:10px;
font-weight:600;
text-transform: uppercase
}
/***************************
1. 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;
}
/***************************
2. Navigation
***************************/
a.list-group-item {
height:auto;
min-height:220px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
a.list-group-item.active small {
color:#fff;
}
.stars {
margin:20px auto 1px;
}
/* ==================================================
6. top login
================================================== */
#login-dp{
min-width: 250px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
font-size:12px
}
#login-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}
#login-dp .social-buttons{
margin:12px 0
}
#login-dp .social-buttons a{
width: 49%;
}
#login-dp .form-group {
margin-bottom: 10px;
}
.btn-fb{
color: #fff;
background-color:#3b5998;
}
.btn-fb:hover{
color: #fff;
background-color:#496ebc
}
.btn-tw{
color: #fff;
background-color:#55acee;
}
.btn-tw:hover{
color: #fff;
background-color:#59b5fa;
}
.bg-primary {
background-color: #f05f40;
color: #fff;
}
