"care"
Bootstrap 3.3.0 Snippet by jeevan123456

<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; }

Related: See More


Questions / Comments: