"NewFWP"
Bootstrap 3.3.0 Snippet by ankurd3

<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-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle navbar-toggle-sidebar collapsed"> MENU </button> <button type="button" class="navbar-toggle collapsed" 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="#"> FWP Groceries </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-left" method="GET" role="search"> <div class="form-group"> <input type="text" name="q" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="http://www.pingpong-labs.com" target="_blank">Visit Site</a></li> <li class="dropdown "> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Account <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">SETTINGS</li> <li class=""><a href="#">Other Link</a></li> <li class=""><a href="#">Other Link</a></li> <li class=""><a href="#">Other Link</a></li> <li class="divider"></li> <li><a href="#">Logout</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <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="#">My Store</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">Men <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Men Collection</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 €</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><a href="#">Carousel Control</a></li> <li><a href="#">Left & Right Navigation</a></li> <li><a href="#">Four Columns Grid</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 class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Women <span class="caret"></span></a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3"> <ul> <li class="dropdown-header">Features</li> <li><a href="#">Auto Carousel</a></li> <li><a href="#">Carousel Control</a></li> <li><a href="#">Left & Right Navigation</a></li> <li><a href="#">Four Columns Grid</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> <li class="col-sm-3"> <ul> <li class="dropdown-header">Women 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> <li><a href="#">Store locator</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">My account <span class="caret"></span></a> <ul class="dropdown-menu" role="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> </ul> </li> <li><a href="#">My cart (0) items</a></li> </ul> </div><!-- /.nav-collapse --> </nav> </div> <div class="container"> <div class="hidden-xs col-sm-3"> <div class="fading-side-menu" data-spy="affix" data-offset-top="350"> <h5>Table of Contents</h5><hr class="no-margin"> <ul class="list-unstyled"> <li> <a href="#intro"> <span class="fa fa-angle-double-right text-primary"></span>Page 1 </a> </li> <li> <a href="#getting-started"> <span class="fa fa-angle-double-right text-primary"></span>Page 2 </a> </li> <li> <a href="#setting-up-our-page"> <span class="fa fa-angle-double-right text-primary"></span>Page 3 </a> </li> <li> <a href="#conclusion"> <span class="fa fa-angle-double-right text-primary"></span>Page 4 </a> </li> </ul> </div> </div> <div class="container"> <div class="row"> <div class="col-md-6"> <!--<h2>Search something</h2> <div id="custom-search-input"> <div class="input-group col-md-12"> <input type="text" class="form-control input-lg" placeholder="Something" /> <span class="input-group-btn"> <button class="btn btn-info btn-lg" type="button"> <i class="glyphicon glyphicon-search"></i> </button> </span> </div> </div>--> <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel"> <!-- Overlay --> <div class="overlay"></div> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#bs-carousel" data-slide-to="0" class="active"></li> <li data-target="#bs-carousel" data-slide-to="1"></li> <li data-target="#bs-carousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item slides active"> <div class="slide-1"></div> <div class="hero"> <hgroup> <h1>We are creative</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> <div class="item slides"> <div class="slide-2"></div> <div class="hero"> <hgroup> <h1>We are smart</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> <div class="item slides"> <div class="slide-3"></div> <div class="hero"> <hgroup> <h1>We are amazing</h1> <h3>Get start your next awesome project</h3> </hgroup> <button class="btn btn-hero btn-lg" role="button">See all features</button> </div> </div> </div> </div> </div> </div> </div> <div id="slider-container"></div> <p> <label for="amount">Price range:</label> <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /> </p> <div id="computers"> <div class="system" data-price="299">div1 - 299</div> <div class="system" data-price="599">div2 - 599</div> <div class="system" data-price="1099">div3 - 1099</div> </div> <div id="slider-range"></div> </div> <!--<a href="http://bootsnipp.com/iframe/rVnOR" class="btn btn-primary btn-lg" id="fullscreen" data-toggle="tooltip" data-placement="left" title="Full Screen"><span class="fa fa-arrows-alt"></span></a>-->
/* FOR DEMO ONLY */ /* Import Bootswatch paper theme because it isn't provided by Bootsnipp and it is awesome! */ @import url(//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.4/paper/bootstrap.min.css); @import url(//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css); /* WHAT YOU NEED */ .fading-side-menu.affix-top { opacity: 1; transition: opacity 1s } .fading-side-menu.affix { top: 11.5px; } .fading-side-menu.affix { opacity: 0.2; transition: opacity 5s } .fading-side-menu.affix:hover { opacity: 1; transition: opacity 0.3s } /* RECOMMENDED STYLING BUT NOT REQUIRED */ .fading-side-menu a { color: rgb(102, 102, 102); } .fading-side-menu a .fa { padding-right:15px; } /* FOR DEMO ONLY */ body { background-color: rgb(255, 255, 255); font-size: 16px; } header { background: url('https://unsplash.imgix.net/photo-1427955569621-3e494de2b1d2?fit=crop&fm=jpg&h=700&q=75&w=1050') no-repeat center bottom; background-size: cover; margin-bottom: 30px; min-height: 320px; overflow: hidden; position: relative; width: 100%; } header:after { bottom: 0px; box-shadow: 0px -0px 10px 10px rgb(255, 255, 255); content: ''; height: 0px; left: 0px; width: 100%; position: absolute; } header .col-xs-12 { height: 320px; } header .alert-info { background-color: rgba(156, 39, 176, 0.7); } .title { font-weight: 700; margin-top: 0px; } p.small.text-muted { margin-bottom: 0px; } .lead { font-style: italic; } .no-margin { margin: 0px !important; } .vertical-center { position: absolute; top: 50%; transform: translateY(-50%); } #fullscreen { position: fixed; top: 10px; right: 10px; } #custom-search-input{ padding: 3px; border: solid 1px #E4E4E4; border-radius: 6px; background-color: #fff; } #custom-search-input input{ border: 0; box-shadow: none; } #custom-search-input button{ margin: 2px 0 0 0; background: none; box-shadow: none; border: 0; color: #666666; padding: 0 8px 0 10px; border-left: solid 1px #ccc; } #custom-search-input button:hover{ border: 0; box-shadow: none; border-left: solid 1px #ccc; } #custom-search-input .glyphicon-search{ font-size: 23px; } @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; } #slider-container { width:350px; margin-left:30px; } /********************************/ /* Fade Bs-carousel */ /********************************/ .fade-carousel { position: relative; height: 100vh; } .fade-carousel .carousel-inner .item { height: 100vh; } .fade-carousel .carousel-indicators > li { margin: 0 2px; background-color: #f39c12; border-color: #f39c12; opacity: .7; } .fade-carousel .carousel-indicators > li.active { width: 10px; height: 10px; opacity: 1; } /********************************/ /* Hero Headers */ /********************************/ .hero { position: absolute; top: 50%; left: 50%; z-index: 3; color: #fff; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.75); -webkit-transform: translate3d(-50%,-50%,0); -moz-transform: translate3d(-50%,-50%,0); -ms-transform: translate3d(-50%,-50%,0); -o-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0); } .hero h1 { font-size: 6em; font-weight: bold; margin: 0; padding: 0; } .fade-carousel .carousel-inner .item .hero { opacity: 0; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } .fade-carousel .carousel-inner .item.active .hero { opacity: 1; -webkit-transition: 2s all ease-in-out .1s; -moz-transition: 2s all ease-in-out .1s; -ms-transition: 2s all ease-in-out .1s; -o-transition: 2s all ease-in-out .1s; transition: 2s all ease-in-out .1s; } /********************************/ /* Overlay */ /********************************/ .overlay { position: absolute; width: 100%; height: 100%; z-index: 2; background-color: #080d15; opacity: .7; } /********************************/ /* Custom Buttons */ /********************************/ .btn.btn-lg {padding: 10px 40px;} .btn.btn-hero, .btn.btn-hero:hover, .btn.btn-hero:focus { color: #f5f5f5; background-color: #1abc9c; border-color: #1abc9c; outline: none; margin: 20px auto; } /********************************/ /* Slides backgrounds */ /********************************/ .fade-carousel .slides .slide-1, .fade-carousel .slides .slide-2, .fade-carousel .slides .slide-3 { height: 100vh; background-size: cover; background-position: center center; background-repeat: no-repeat; } .fade-carousel .slides .slide-1 { background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818); } .fade-carousel .slides .slide-2 { background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af); } .fade-carousel .slides .slide-3 { background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327); } /********************************/ /* Media Queries */ /********************************/ @media screen and (min-width: 980px){ .hero { width: 980px; } } @media screen and (max-width: 640px){ .hero h1 { font-size: 4em; } /** End of Carousel**/
/* THOUGH THIS PLUGIN DOES NOT CONTAIN ANY JAVASCRIPT ITSELF, IT DOES REQUIRE THE BOOTSTRAP AFFIX PLUGIN. */ /* START OF DEMO JS - NOT NEEDED */ $(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'); } ); }); $(function () { $('#slider-container').slider({ range: true, min: 299, max: 1099, values: [299, 1099], create: function() { $("#amount").val("$299 - $1099"); }, slide: function (event, ui) { $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]); var mi = ui.values[0]; var mx = ui.values[1]; filterSystem(mi, mx); } }) }); function filterSystem(minPrice, maxPrice) { $("#computers div.system").hide().filter(function () { var price = parseInt($(this).data("price"), 10); return price >= minPrice && price <= maxPrice; }).show(); }

Related: See More


Questions / Comments: