"OPE"
Bootstrap 3.3.0 Snippet by nataneguedes

<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 ----------> <link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-megadropdown-tabs"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="row"> <div class="col-md-2"> <div class="logo"> <a href="index.php?link=1"><img src="img/logo.jpg" /></a> </div> </div> <div class="col-md-10"> <div class="row"> <!-- Collect the nav links, forms, and other content for toggling --> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#"><i class="glyphicon glyphicon-earphone"></i> Televendas (011) 0000-0000</a></li> <li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> Ajuda</a></li> </ul> </div> </div> <br> <div class="row"><!-- 2ª Linha do Cabeçalho--> <div class="col-md-7"> <div class="input-group"><!--Campo de Busca --> <input class="form-control" type="text" placeholder="" /> <div class="input-group-btn"> <button type="submit" class="btn btn-default">Buscar</button> </div> </div> </div> <div class="col-md-4"> <div class="navbar-collapse style= collapse in" id="bs-megadropdown-tabs"> <ul class="nav navbar-nav navbar-left"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-user"></span> <strong>Usuário</strong> <span class="glyphicon glyphicon-chevron-down"></span> </a> <ul style="background-color:white;" class="dropdown-menu"> <li> <div class="navbar-login"> <div class="row"> <div class="col-lg-4"> <p class="text-center"> <span class="glyphicon glyphicon-user icon-size"></span> </p> </div> <div class="col-lg-8"> <p class="text-left"><strong>Nome ou Apelido</strong></p> <p class="text-left small">teste@teste.com.br</p> <p class="text-left"> <a href="#" class="btn btn-primary btn-block btn-sm">Atualizar Dados</a> </p> </div> </div> </div> </li> <li class="divider"></li> <li> <div class="navbar-login navbar-login-session"> <div class="row"> <div class="col-lg-12"> <p> <a href="#" class="btn btn-danger btn-block">Encerrar Sessão</a> </p> </div> </div> </div> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-log-in"></span> ENTRAR <span class="caret"></span></a> <ul id="login-dp" class="dropdown-menu"> <li> <div class="row"> <div class="col-md-12"> Login via <div class="social-buttons"> <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a> <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a> </div> ou <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">E-mail</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Endereço de E-mail" required=""> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">Senha</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Senha" required=""> <div class="help-block text-right"><a href="">Esquece sua senha?</a></div> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Acessar</button> </div> <div class="checkbox"> <label> <input type="checkbox"> Mantenha-me conectado </label> </div> </form> </div> <div class="bottom text-center"> Novo aqui? <a href="#"><b>Cadastre-se</b></a> </div> </div> </li> </ul> </li> </ul> <div class="col-md-1"> <div class="btn btn-deafult btn-lg"><a href="#" ><span class="glyphicon glyphicon-shopping-cart"></span></a></div> </div> </div> <br> </div> </div> </div> </div> </div> </nav><!-- /.navbar-collapse --> <div class="row"> <div class="col-md-12"> <div class="navbar-superior"> <ul class="nav-list-superior list-inline"> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-alemaes/Audi-Logo.png"><span>Audi</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-americanos/Chevrolet-Logo.png"><span>Chevrolet</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-americanos/Dodge-Logo.png"><span>Dodge</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-americanos/Ford-Logo.png"><span> Ford</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-franceses/Citroen-Logo.png"><span>Citroen</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-franceses/Peugeot-Logo.png"><span>Peugeot</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-franceses/Renault-Logo.png"><span>Renault</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-italianos/Fiat-Logo.png"><span>Fiat</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/outras-marcas-asiaticas/Hyundai-Logo.png"><span>Hyundai</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-japoneses/Toyota-Logo.png"><span>Toyota</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-japoneses/Honda-Logo.png"><span>Honda</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-japoneses/Nissan-Logo.png"><span>Nissan</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-alemaes/thumbs/thumbs_Volkswagen-Logo.png"><span>Volkswagen</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/outras-marcas-europeias/thumbs/thumbs_Volvo-Logo.png"><span>Volvo</span></a></li> <li><a href="#"><img src="http://www.marcasdecarros.com.pt/wp-content/gallery/marcas-de-carros-alemaes/thumbs/thumbs_BMW-Logo.png"><span>BMW</span></a></li> </ul> </div> </div> </div> <br> <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row-fluid"> <div class="span12"><a href="#x"><img src="http://www.alexpecas.com.br/img/img_galery/prop1/redimensiona.php?imgBanner=4085bannerAlexPecas03.jpg" alt="Image" /></a></div> </div><!--/row-fluid--> <div class="carousel-caption"></div> </div><!-- End Item --> <div class="item"> <div class="row-fluid"> <div class="span12"><a href="#x"><img src="http://rvlautopecas.com.br/wp-content/uploads/2012/10/autopecas-banner31-960x251.jpg" alt="Image" /></a></div> </div><!--/row-fluid--> <div class="carousel-caption"></div> </div><!-- End Item --> <div class="item"> <div class="row-fluid"> <div class="span12"><a href="#x"><img src="http://www.uniaovirtual.com.br/wp-content/uploads/2014/05/banner-site-1170x340-03.png" alt="Image" /></a></div> </div><!--/row-fluid--> <div class="carousel-caption"></div> </div><!-- End Item --> <ul class="nav nav-pills nav-justified"> <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#"></a></li> <li data-target="#myCarousel" data-slide-to="1"><a href="#"></a></li> <li data-target="#myCarousel" data-slide-to="2"><a href="#"></a></li> <li data-target="#myCarousel" data-slide-to="3"><a href="#"></a></li> </ul> </div><!-- End Carousel Inner --> </div><!-- End Carousel --> </div> <br> <div class="container"> <div class="row"> <!-- BEGIN PRODUCTS --> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Barra Axial</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$69,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$62,10</label></h4> </div> </div> <p>6x de R$11,50 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Pivô Inferior</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$53,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$47,70</label></h4> </div> </div> <p>6x de R$8,83 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Braço Inferior Dianteiro</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$376,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$338,40</label></h4> </div> </div> <p>6x de R$62,67 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Terminal Direção</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$122,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$109,80</label></h4> </div> </div> <p>6x de R$20,33 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Bucha Suspensão Maior</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$186,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$167,40</label></h4> </div> </div> <p>6x de R$31,00 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Bucha Bandeja Suspensão</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$62,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$55,80</label></h4> </div> </div> <p>6x de R$10,33 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Batente Amortecedor </h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$649,99</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$549,99</label></h4> </div> </div> <p>6x de R$12,33 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Teste</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$00,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$00,00</label></h4> </div> </div> <p>6x de R$00,00 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Teste</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$00,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$00,00</label></h4> </div> </div> <p>6x de R$00,00 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Teste</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$00,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$00,00</label></h4> </div> </div> <p>6x de R$00,00 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Teste</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$00,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$00,00</label></h4> </div> </div> <p>6x de R$00,00 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <div class="col-md-3 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <div class="row"> <div class="col-md-12 col-xs-12"> <h4>Teste</h4> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12"> <h6><strike> De: R$00,00</strike></h6> </div> </div> <div class="row"> <div class="col-md-12 col-xs-12 price"> <h4><label>POR: R$00,00</label></h4> </div> </div> <p>6x de R$00,00 sem juros</p> <hr class="line"> <div class="row"> <div class="col-md-12"> <a href="#" class="btn btn-primary btn-product"><span class="glyphicon glyphicon-list-alt"></span> DETALHE</a> <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> COMPRAR</a> </div> </div> </span> </div> <!-- END PRODUCTS --> </div> </div> <br> <div class="row"> <div class="col-xs-12 col-md-12"> <img class="pag" src="http://elojobfly.com/img/info-pagamento.png" width="608" height="134" align="center" /> </div> </div> <div class="container"> <div class="rodape"> <div class="row"> <div class="col-xs-12 col-md-5 col-offset-1"> <h3>Informações</h3> <ul> <li><a href="Quem_Somos.html">Quem Somos</a></li> <li><a href="Como_Pagar.html">Como pagar</a></li> <li><a href="Sobre_Entrega.html">Sobre Entrega</a></li> <li><a href="Troca_Dev.html">Política de Troca e Devolução</a></li> <li><a href="Pol_Privacidade.html">Política de Privacidade</a></li> <li><a href="Termos_Cond.html">Termos e Condições de Uso</a></li> </ul> <h3>Redes sociais</h3> Acompanhe todas as ofertas e novidades do Speed Tech. </div> <div class="col-xs-12 col-md-5 col-offset-1"> <h3>Central de Atendimento</h3> <p>0000-0000</p><br/> Dúvidas sobre Cadastro, Pedidos, Formas de pagamento e Prazo de entrega?<a href=""> Clique aqui </a>e tire suas dúvidas.<br/> <p>De segunda à sexta-feira 08:00 às 23:00. Sábado e feriados 08:00 às 21:00. Domingo 08:00 às 20:00.</p> </div> </div> </div> </div> <div class="footer"> <div class="row"> <span>© 2015 - Speed Tech</span> <p>Todas as regras e promoções são válidas apenas para produtos vendidos e entregues pelo Speed Tech.<br/> O valor de oferta do produto será garantido após a finalização da compra. Havendo divergência, prevalecerá o menor preço ofertado.<br/></p> <p>SPEED TECH / CNPJ: 00.000.000/0000-00 / Inscrição Estadual: 000.000.000.000 / Endereço: Rua Natalandioa, 000 - Santo André, SP - 00000-000<br/> Atendimento ao cliente: atendimento@speedtech.com.br</p> </div> </div> <style> .rodape { background:black ; background-size: contain; color:white; } .rodape a {color:white;} .rodape a:hover { color: limegreen; text-decoration: none;} .pag img{ background: no-repeat fixed center; margin-left; } .footer{ background: #eee; color:black; font-size: 10px; text-align: center; font-family: 'Roboto', sans-serif;} </style>
/* 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/) */ .row-fluid img{ width:1100px; weight: 300px; } .navbar-superior { background: white; padding-left: 15px } .nav-list-superior { border-bottom: 1px solid #eee; } .nav-list-superior > li { padding: 0px 5px 5px; border-left: 1px solid #eee; } .nav-list-superior > li:last-child { border-right: 1px solid #eee; } .nav-list-superior img {width: 67px; height: 70px ; } .nav-list-superior > li > a:hover { text-decoration: none; } .nav-list-superior > li > a > span { text-align: center; display: block; font-weight: bold; text-transform: uppercase; } .navbar-brand { width: 70px; height: 50px; background: url('http://www.sneaker-mission.com/uploads/3/1/2/7/31279819/5617441.png') 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: px solid #eee; } .nav-list > li { padding: 20px 15px 15px; } .nav-list > li:last-child { border-right: 0px 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%; } #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; } @media(max-width:768px){ #login-dp{ background-color: inherit; color: #fff; } #login-dp .bottom{ background-color: inherit; border-top:0 none; } } .navbar-login { width: 305px; padding: 10px; padding-bottom: 0px; } .navbar-login-session { padding: 10px; padding-bottom: 0px; padding-top: 0px; } .icon-size { font-size: 87px; } .navbar-brand { width: 70px; height: 50px; background-size: 50px; padding-top: 7px; } .navbar-nav { padding-left: 15px; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #000000; } .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; background-color: #000000; } .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: white; background-color: #000000; } .navbar-default .navbar-nav>li>a { color: white; } .dropdown-menu { position: absolute; top: 100%; left: 0px; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0px; margin: 2px 0px 0px; font-size: 14px; list-style: none; background-color: white; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.14902); border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px; } .nav-list > li { padding: 20px 15px 15px; border-left:0px; .nav-list { border-bottom: 0px; } body { padding-top: 20px; } h4{ font-weight: 600; } p{ font-size: 12px; margin-top: 0px; } .price{ font-size: 30px; margin: 0 auto; color: #333; } .right{ float:right; border-bottom: 2px solid #4B8E4B; } .thumbnail{ opacity:0.70; -webkit-transition: all 0.5s; transition: all 0.5s; } .thumbnail:hover{ opacity:1.00; box-shadow: 0px 0px 10px #4bc6ff; } .line{ margin-bottom: 5px; } @media screen and (max-width: 770px) { .right{ float:left; width: 100%; } }
$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).slideDown("fast"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).stop( true, true ).slideUp("fast"); $(this).toggleClass('open'); } ); }); $(document).ready( function() { $('#myCarousel').carousel({ interval: 4000 }); var clickEvent = false; $('#myCarousel').on('click', '.nav a', function() { clickEvent = true; $('.nav li').removeClass('active'); $(this).parent().addClass('active'); }).on('slid.bs.carousel', function(e) { if(!clickEvent) { var count = $('.nav').children().length -1; var current = $('.nav li.active'); current.removeClass('active').next().addClass('active'); var id = parseInt(current.data('slide-to')); if(count == id) { $('.nav li').first().addClass('active'); } } clickEvent = false; }); });

Related: See More


Questions / Comments: