Jump to content
Bruno Goedert Dalmolin

Como Movimentar um Menu em HTML5 e CSS

Recommended Posts

Fala devs Beleza? Estou com uma duvida em como eu movimento meu menu para o canto, pois ele fica travado no centro. Os dados são os seguintes: 

do HTML:

 

<header>
    <ul id="Menu">
        <li><a href="SmartAce-Home.html">Home</a></li>
        <li><a href="">Sobre</a></li>
        <li><a href="">Contato</a></li>
    </ul>
</header>

 

do CSS:

 

@charset "UTF-8";

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #112c38;
}
ul#Menu {
    
    text-align: center;
    margin: 0;
    padding: 0;
    display: flex;
    top: -10;
}
ul#Menu li{
    list-style: none;
    margin: 0 20px;
    transition: 0.5s;
}
ul#Menu li a{

    position: relative;
    text-decoration: none;
    padding: 5px;
    font-size: 18px;    
    font-family: sans-serif;
    color: #fff;
    text-transform: uppercase;
    transition: 0.5s;
}
ul#Menu:hover li a {
    transform: scale(1.4);
    opacity: .2;
    filter: blur(5px);

}
ul#Menu li a:hover {
    transform: scale(2);
    opacity: 1;
    filter: blur(0);

}
ul#Menu li a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff497c;
    transition: transform 0.5s;
    transform-origin: right;
    transform: scaleX(0);
    z-index: -1;
}
ul#Menu li a:hover:before {
    transition: transform 0.5s;
    transform-origin: left;
    transform: scaleX(1);
}

Share this post


Link to post
Share on other sites
Em 11/04/2019 at 20:13, Bruno Goedert Dalmolin disse:

ul#Menu {
    
    text-align: center;
    margin: 0;
    padding: 0;
    display: flex;
    top: -10;
}


Olá. Sou novo na área, mas tente controlar com o margin ou margin-left que acredito que dará certo. :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Allysson Henrique
      preciso de uma ajuda para compor as divs de uma galeria, não estou conseguindo de forma alguma, tentei de tudo. esse é o codigo, preciso compor com essa galeria http://hype61.com.br/control/busca_fotos_site.php
       
       
      $.ajax({ //url que enviaremos url: "control/busca_fotos_site.php", type: "POST", async:false, //campos data: { rand: encodeURI(Math.random()) }, //aqui colocamos o callback na div #retorno success: function(fretorno) { $(fretorno.fotos_produtos).each(function(key, value){ }); } });  
       
       
       
       
       
       
       
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Dress rental </title> <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Forum|Open+Sans:400,600|Roboto:100,300,400,500,700" rel="stylesheet"> <link rel="stylesheet" href="assets/dist/style/elements.css"> <link rel="stylesheet" href="assets/dist/style/header.css"> <link rel="stylesheet" href="assets/dist/style/footer.css"> <link rel="stylesheet" href="assets/dist/style/blog.css"> </head> <body> <!-- ==========================--> <!-- LOADER--> <!-- ==========================--> <div id="gl-circle-loader-wrapper"> <div id="gl-circle-loader-center"> <div class="gl-circle-load"> <img src="assets/dist/img/ploading.gif" alt="Page Loader"> </div> </div> </div> <!-- ==========================--> <!-- SEARCH MODAL--> <!-- ==========================--> <div class="header-search open-search"> <div class="container"> <div class="row"> <div class="col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1"> <div class="navbar-search"> <form class="search-global"> <input class="search-global__input" type="text" placeholder="Type to search" autocomplete="off" name="s" value=""/> <button class="search-global__btn"><i class="icon stroke icon-Search"></i> </button> <div class="search-global__note">Begin typing your search above and ã ã press return to search. </div> </form> </div> </div> </div> </div> <button class="search-close close" type="button"><i class="fa fa-times"></i></button> </div> <div class="container"> <ol class="breadcrumb underline"> <li><a href="#">Home</a></li> <li>Dresses</li> </ol><!-- /.breadcrumb --> </div><!-- /.container --> <?php include "inctopo.php"; ?> <div class="container"> <ol class="breadcrumb"> <li><a href="#">Inicial</a></li> <li>Sobre a Hype</li> </ol><!-- /.breadcrumb --> </div><!-- /.container --> </div><!-- /.filters --> </div><!-- /.col-sm-3 --> <div class="col-sm-12" id="boxprodutos"> <div class="product-display"> <h4 class="font-25-for-reg-0">Dresses <span>(432)</span></h4> <div class="view"> <div class="col-sm-5"> <span class="short">Short by : </span> <select class="rq-rental-select2"> <option value="AL">Best match</option> <option value="AL">Name</option> <option value="WY">Save date</option> <option value="WY">Green</option> </select> </div><!-- /.col-sm-4 --> <div class="col-sm-4"> <div class="text-center"> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> </li> <li><a class="active" href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">...</a></li> <li><a href="#">9</a></li> <li> <a href="#" class="active" aria-label="Next"> <i class="fa fa-angle-right" aria-hidden="true"></i> </a> </li> </ul> </nav> </div><!-- text-center --> </div><!-- /.col-sm-4 --> <div class="col-sm-3"> <div class="text-right filters"> <a href="listing-page-list.html"><i class="rq-257" aria-hidden="true"></i></a> <a href="listing-page2.html"><i class="rq-639 active" aria-hidden="true"></i></a> <a href="listing-page.html"><i class="rq-638" aria-hidden="true"></i></a> </div> </div><!-- /.col-sm-4 --> </div><!-- /.view --> <div class="row" id="prod"> <div class="col-sm-3 col-def2"> <div class="product-list"> <figure> <a href="assets/dist/img/products-list/grid-b1.jpg" data-lightbox="roadtrip"><img class="img-responsive" src="assets/dist/img/products-list/gridb1.jpg" alt="grid1"/></a> <figcaption> <a href="#" class="left"><i class="fa fa-gift" aria-hidden="true"></i></a> <a href="#" class="right"><i class="fa fa-heart-o" aria-hidden="true"></i></a> <div class="quick-view"> <a href="#" data-toggle="modal" data-target="#rqModalOne" data-whatever="@mdo">Dê uma olhada</a> <div class="modal fade rq-modal" id="rqModalOne" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <img src="assets/dist/img/cross.png" alt=""></button> <div class="modal-body"> <div class="list-view"> <div class="row"> <div class="col-sm-5"> <div class="modal-carousel owl-carousel owl-theme"> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list3.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list2.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list1.jpg" alt="list"></figure> </div> </div><!-- /.modal-carousel --> </div> <div class="col-sm-7"> <div class="product-info"> <h4 class="font-20-for-reg-0">Vestido Longo Diva</h4> <h4 class="font-16-for-reg-0">Marca : <span>Blue Flamingo</span> </h4> <h5 class="font-16-for-reg-0"> <p class="font-16-for-reg-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Ipsum is simply dummy text of the printing and typesetting industry. </p> <img src="assets/dist/img/products-list/grid-b1.jpg" alt="" id="imgpos"> <div class="delivery-date"> <div id="houston-component-11"></div> </div><!-- /.delivery-date --> <div class="btn-group"> <div class="size"> <select class="rq-rental-select2"> <option value="AL">TAM.</option> <option value="AL">38</option> <option value="WY">39</option> <option value="WY">40</option> <option value="WY">41</option> <option value="WY">42</option> <option value="WY">43</option> </select> </div><!-- /.size --> <div class="color"> <select class="rq-rental-select2"> <option value="AL">Cor</option> <option value="AL">Vermelho</option> <option value="WY">Rosa</option> <option value="WY">Verde</option> </select> </div><!-- /.color --> </div><!-- /.btn-group --> <button type="button" class="btn btn-success" class="shopping-bag">Verificar Disponibilidade<i class="fa fa-shopping-bag" aria-hidden="true"></i> </button> </div><!-- /.product-info --> </div> </div><!-- /.row --> </div><!-- /.list-view --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> </figcaption> </figure> <div class="description"> <a href="booking.html" class="font-18-for-reg-0">Vestido Longo Diva</a> <p>Blue Flamingo</p> </div><!-- /.description --> </div><!-- /.product-list --> </div><!-- /.col-sm-4 --> <div class="col-sm-3 col-def2"> <div class="product-list"> <figure> <a href="assets/dist/img/products-list/grid-b2.jpg" data-lightbox="roadtrip"><img class="img-responsive" src="assets/dist/img/products-list/gridb2.jpg" alt="grid1"/></a> <figcaption> <a href="#" class="left"><i class="fa fa-gift" aria-hidden="true"></i></a> <a href="#" class="right"><i class="fa fa-heart-o" aria-hidden="true"></i></a> <div class="quick-view"> <a href="#" data-toggle="modal" data-target="#rqModal2" data-whatever="@mdo">Dê uma olhada</a> <div class="modal fade rq-modal" id="rqModal2" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <img src="assets/dist/img/cross.png" alt=""></button> <div class="modal-body"> <div class="list-view"> <div class="row"> <div class="col-sm-5"> <div class="modal-carousel owl-carousel owl-theme"> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list3.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list2.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list1.jpg" alt="list"></figure> </div> </div><!-- /.modal-carousel --> </div> <div class="col-sm-5"> <div class="product-info"> <h4 class="font-20-for-reg-0">Vestido Longo Diva</h4> <h4 class="font-16-for-reg-0">Marca : <span>Blue Flamingo</span> </h4> <p class="font-16-for-reg-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Ipsum is simply dummy text of the printing and typesetting industry. </p> <img src="assets/dist/img/products-list/grid2.jpg" alt="" id="imgpos"> <div class="delivery-date"> <div id="houston-component-12"></div> </div><!-- /.delivery-date --> <div class="btn-group"> <div class="size"> <select class="rq-rental-select2"> <option value="AL">TAM.</option> <option value="AL">38</option> <option value="WY">39</option> <option value="WY">40</option> <option value="WY">41</option> <option value="WY">42</option> <option value="WY">43</option> </select> </div><!-- /.size --> <div class="color"> <select class="rq-rental-select2"> <option value="AL">Cor</option> <option value="AL">Vermelho</option> <option value="WY">Rosa</option> <option value="WY">Verde</option> </select> </div><!-- /.color --> </div><!-- /.btn-group --> </div><!-- /.product-info --> </div> </div><!-- /.row --> </div><!-- /.list-view --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> </figcaption> </figure> <div class="description"> <a href="booking.html" class="font-18-for-reg-0">Vestido Longo Diva</a> <p>Blue Flamingo</p> </div><!-- /.description --> </div><!-- /.product-list --> </div><!-- /.col-sm-4 --> <div class="col-sm-3 col-def2"> <div class="product-list"> <figure> <a href="assets/dist/img/products-list/grid-b4.jpg" data-lightbox="roadtrip"><img class="img-responsive" src="assets/dist/img/products-list/gridb3.jpg" alt="grid1"></a> <figcaption> <a href="#" class="left"><i class="fa fa-gift" aria-hidden="true"></i></a> <a href="#" class="right"><i class="fa fa-heart-o" aria-hidden="true"></i></a> <div class="quick-view"> <a href="#" data-toggle="modal" data-target="#rqModal3" data-whatever="@mdo">Dê uma olhada</a> <div class="modal fade rq-modal" id="rqModal3" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <img src="assets/dist/img/cross.png" alt=""></button> <div class="modal-body"> <div class="list-view"> <div class="row"> <div class="col-sm-5"> <div class="modal-carousel owl-carousel owl-theme"> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list3.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list2.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list1.jpg" alt="list"></figure> </div> </div><!-- /.modal-carousel --> </div> <div class="col-sm-7"> <div class="product-info"> <h4 class="font-20-for-reg-0">Vestido Longo Diva</h4> <h4 class="font-16-for-reg-0">Marca : <span>Blue Flamingo</span> </h4> <p class="font-16-for-reg-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Ipsum is simply dummy text of the printing and typesetting industry. </p> <img src="assets/dist/img/products-list/gridb3.jpg" alt="" id="imgpos"> <div class="delivery-date"> <div id="houston-component-13"></div> </div><!-- /.delivery-date --> <div class="btn-group"> <div class="size"> <select class="rq-rental-select2"> <option value="AL">TAM.</option> <option value="AL">38</option> <option value="WY">39</option> <option value="WY">40</option> <option value="WY">41</option> <option value="WY">42</option> <option value="WY">43</option> </select> </div><!-- /.size --> <div class="color"> <select class="rq-rental-select2"> <option value="AL">Cor</option> <option value="AL">Vermelho</option> <option value="WY">Rosa</option> <option value="WY">Verde</option> </select> </div><!-- /.color --> </div><!-- /.btn-group --> <button type="button" class="btn btn-success" class="shopping-bag">Verificar Disponibilidade<i class="fa fa-shopping-bag" aria-hidden="true"></i></button> </div><!-- /.product-info --> </div> </div><!-- /.row --> </div><!-- /.list-view --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> </figcaption> </figure> <div class="description"> <a href="booking.html" class="font-18-for-reg-0">Long Diva Dress</a> <p>Blue Flamingo</p> </div><!-- /.description --> </div><!-- /.product-list --> </div><!-- /.col-sm-4 --> <div class="col-sm-3 col-def2"> <div class="product-list"> <figure> <a href="assets/dist/img/products-list/grid-b6.jpg" data-lightbox="roadtrip"><img class="img-responsive" src="assets/dist/img/products-list/gridb4.jpg" alt="grid1"/></a> <figcaption> <a href="#" class="left"><i class="fa fa-gift" aria-hidden="true"></i></a> <a href="#" class="right"><i class="fa fa-heart-o" aria-hidden="true"></i></a> <div class="quick-view"> <a href="#" data-toggle="modal" data-target="#rqModal4" data-whatever="@mdo">Dê uma olhada</a> <div class="modal fade rq-modal" id="rqModal4" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <img src="assets/dist/img/cross.png" alt=""></button> <div class="modal-body"> <div class="list-view"> <div class="row"> <div class="col-sm-5"> <div class="modal-carousel owl-carousel owl-theme"> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list3.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list2.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list1.jpg" alt="list"></figure> </div> </div><!-- /.modal-carousel --> </div> <div class="col-sm-7"> <div class="product-info"> <h4 class="font-20-for-reg-0">Long Diva Dress</h4> <h4 class="font-16-for-reg-0">Brand : <span>Blue Flamingo</span> </h4> <p class="font-16-for-reg-0">Descrição do Vestido </p> <img src="assets/dist/img/products-list/gridb4.jpg" alt="" id="imgpos"> <div class="delivery-date"> <div id="houston-component-14"></div> </div><!-- /.delivery-date --> <div class="btn-group"> <div class="size"> <select class="rq-rental-select2"> <option value="AL">TAM.</option> <option value="AL">38</option> <option value="WY">39</option> <option value="WY">40</option> <option value="WY">41</option> <option value="WY">42</option> <option value="WY">43</option> </select> </div><!-- /.size --> <div class="color"> <select class="rq-rental-select2"> <option value="AL">Cor</option> <option value="AL">Vermelho</option> <option value="WY">Rosa</option> <option value="WY">Verde</option> </select> </div><!-- /.color --> </div><!-- /.btn-group --> <button type="button" class="btn btn-success" class="shopping-bag">Verificar Disponibilidade<i class="fa fa-shopping-bag" aria-hidden="true"></i></button> <div class="remove"> <a href="#" class="left rq-custom"><i class="fa fa-gift active"></i> Remover da Lista de Desejos</a> <a href="#"><i class="fa fa-heart-o active"></i> Remover dos Favoritos</a> </div><!-- /.remove --> </div><!-- /.product-info --> </div> </div><!-- /.row --> </div><!-- /.list-view --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> </figcaption> </figure> <div class="description"> <a href="booking.html" class="font-18-for-reg-0">Long Diva Dress</a> <p>Blue Flamingo</p> </div><!-- /.description --> </div><!-- /.product-list --> </div><!-- /.col-sm-4 --> <div class="col-sm-3 col-def2"> <div class="product-list"> <figure> <a href="assets/dist/img/products-list/grid-b7.jpg" data-lightbox="roadtrip"><img class="img-responsive" src="assets/dist/img/products-list/gridb5.jpg" alt="grid1"/></a> <figcaption> <a href="#" class="left"><i class="fa fa-gift" aria-hidden="true"></i></a> <a href="#" class="right"><i class="fa fa-heart-o" aria-hidden="true"></i></a> <div class="quick-view"> <a href="#" data-toggle="modal" data-target="#rqModal5" data-whatever="@mdo">Dê uma olhada</a> <div class="modal fade rq-modal" id="rqModal5" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <img src="assets/dist/img/cross.png" alt=""></button> <div class="modal-body"> <div class="list-view"> <div class="row"> <div class="col-sm-5"> <div class="modal-carousel owl-carousel owl-theme"> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list3.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list2.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list1.jpg" alt="list"></figure> </div> </div><!-- /.modal-carousel --> </div> <div class="col-sm-7"> <div class="product-info"> <h4 class="font-20-for-reg-0">Long Diva Dress</h4> <h4 class="font-16-for-reg-0">Brand : <span>Blue Flamingo</span> </h4> <p class="font-16-for-reg-0">Descrição </p> <img src="assets/dist/img/products-list/gridb5.jpg" alt="" id="imgpos"> <div class="delivery-date"> <div id="houston-component-15"></div> </div><!-- /.delivery-date --> <div class="btn-group"> <div class="size"> <select class="rq-rental-select2"> <option value="AL">TAM.</option> <option value="AL">38</option> <option value="WY">39</option> <option value="WY">40</option> <option value="WY">41</option> <option value="WY">42</option> <option value="WY">43</option> </select> </div><!-- /.size --> <div class="color"> <select class="rq-rental-select2"> <option value="AL">Color</option> <option value="AL">Vermelho</option> <option value="WY">Rosa</option> <option value="WY">Verde</option> </select> </div><!-- /.color --> </div><!-- /.btn-group --> <button type="button" class="btn btn-success" class="shopping-bag"> Verificar Disponibildiade<i class="fa fa-shopping-bag" aria-hidden="true"></i></button> <div class="remove"> <a href="#" class="left rq-custom"><i class="fa fa-gift active"></i> Remover da Lista de Desejos</a> <a href="#"><i class="fa fa-heart-o active"></i> Remover dos Favoritos</a> </div><!-- /.remove --> </div><!-- /.product-info --> </div> </div><!-- /.row --> </div><!-- /.list-view --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> </figcaption> </figure> <div class="description"> <a href="booking.html" class="font-18-for-reg-0">Long Diva Dress</a> <p>Blue Flamingo</p> </div><!-- /.description --> </div><!-- /.product-list --> </div><!-- /.col-sm-4 --> <div class="col-sm-3 col-def2"> <div class="product-list"> <figure> <a href="assets/dist/img/products-list/grid-b8.jpg" data-lightbox="roadtrip"><img class="img-responsive" src="assets/dist/img/products-list/gridb6.jpg" alt="grid1"/></a> <figcaption> <a href="#" class="left"><i class="fa fa-gift" aria-hidden="true"></i></a> <a href="#" class="right"><i class="fa fa-heart-o" aria-hidden="true"></i></a> <div class="quick-view"> <a href="#" data-toggle="modal" data-target="#rqModal6" data-whatever="@mdo">Dê uma olhada</a> <div class="modal fade rq-modal" id="rqModal6" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <img src="assets/dist/img/cross.png" alt=""></button> <div class="modal-body"> <div class="list-view"> <div class="row"> <div class="col-sm-5"> <div class="modal-carousel owl-carousel owl-theme"> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list3.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list2.jpg" alt="list"></figure> </div> <div class="item"> <figure><img class="img-responsive" src="assets/dist/img/products-list/list1.jpg" alt="list"></figure> </div> </div><!-- /.modal-carousel --> </div> <div class="col-sm-7"> <div class="product-info"> <h4 class="font-20-for-reg-0">Long Diva Dress</h4> <h4 class="font-16-for-reg-0">Brand : <span>Blue Flamingo</span> </h4> <p class="font-16-for-reg-0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Ipsum is simply dummy text of the printing and typesetting industry. </p> <img src="assets/dist/img/products-list/gridb6.jpg" alt="" id="imgpos"> <div class="delivery-date"> <div id="houston-component-16"></div> </div><!-- /.delivery-date --> <div class="btn-group"> <div class="size"> <select class="rq-rental-select2"> <option value="AL">TAM.</option> <option value="AL">38</option> <option value="WY">39</option> <option value="WY">40</option> <option value="WY">41</option> <option value="WY">42</option> <option value="WY">43</option> </select> </div><!-- /.size --> <div class="color"> <select class="rq-rental-select2"> <option value="AL">Cor</option> <option value="AL">Vermelho</option> <option value="WY">Rosa</option> <option value="WY">Verde</option> </select> </div><!-- /.color --> </div><!-- /.btn-group --> <button type="button" class="btn btn-success" class="shopping-bag">Verificar Disponibilidde <i class="fa fa-shopping-bag" aria-hidden="true"></i></button> <div class="remove"> </div><!-- /.remove --> </div><!-- /.product-info --> </div> </div><!-- /.row --> </div><!-- /.list-view --> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </div> </figcaption> </figure> <div class="description"> <a href="booking.html" class="font-18-for-reg-0">Long Diva Dress</a> <p>Blue Flamingo</p> </div><!-- /.description --> </div><!-- /.product-list --> </div><!-- /.col-sm-4 --> </div><!-- /.row --> </div><!-- /.product-display --> <div class="row mrg-top"> <div class="col-xs-4"> <a class="pages-on" href="#">1-9 of 432</a> </div> <div class="col-xs-8"> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> </li> <li><a class="active" href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">...</a></li> <li><a href="#">9</a></li> <li> <a href="#" class="active" aria-label="Next"> <i class="fa fa-angle-right" aria-hidden="true"></i> </a> </li> </ul> </nav> </div> </div><!-- /.row --> </div><!-- /.col-sm-9 --> </div><!-- /.row --> </div><!-- /.container --> </div><!-- /.filter-list --> - <div class="work-procedure base-padd"> <div class="container"> <h2>Como Funciona?</h2> <div class="row"> <div class="col-md-4"> <div class="inner"> <a href="#"><img src="assets/dist/img/work-procedure/1.png" alt="" class="img-responsive"></a> <h3 class="font-30-for-reg-0">Cadastro / Assinatura</h3> <p class="font-16-for-reg-0">O primeiro passo para realizar o <a href="#">Cadastro</a> é escolher o melhor plano que se encaixa pra você. </p> </div><!-- /.inner --> </div> <!-- /.col-md-3 --> <div class="col-md-4"> <div class="inner"> <a href="#"><img src="assets/dist/img/work-procedure/2.png" alt="" class="img-responsive"></a> <h3 class="font-30-for-reg-0">Escolha / Use</h3> <p class="font-16-for-reg-0">A Partir o plano ativo, você poderá¡ escolher aqui no site ou na nossa loja as suas peças. </p> </div><!-- /.inner --> </div> <!-- /.col-md-3 --> <div class="col-md-4"> <div class="inner"> <a href="#"><img src="assets/dist/img/work-procedure/3.png" alt="" class="img-responsive"></a> <h3 class="font-30-for-reg-0">Devolva</h3> <p class="font-16-for-reg-0">Após o uso deve devolver lavada e passada, com a opção de entrega e coleta. </p> </div><!-- /.inner --> </div> <!-- /.col-md-3 --> </div><!-- /.row --> </div><!-- /.container --> </div><!-- /.work-procedure --> <div class="join-us"> <div class="container"> <div class="row"> <div class="col-sm-5"> <a href="sobre.php" class="btn transparent">Escolha seu plano</a> </div> <div class="col-sm-7"> <span class="font-30-pla-reg-2"> Somos um jeito novo de você manter o seu visual em dia, sem gastar um monte de dinheiro com roupas novas. <br/> A roupa certa para aquele evento? Só falar do que você precisa. </span> </div> </div> </div><!-- /.container --> </div><!-- /.join-us --> <div class="favorites base-padd"> <h2>Algumas peças do nosso acervo</h2> <div class="container"> <div class="owl-favorites owl-carousel owl-theme"> <div class="item"> <figure> <img src="http://s2.nbsoftware.com.br/hype61/fotoproduto/1130009PP.jpg?rand=0.39276572203667637" alt="" style="transform: rotate(90deg);"> <a href="booking.html">Ver</a> </figure> </div><!-- /.item --> <div class="item"> <figure> <img src="http://s2.nbsoftware.com.br/hype61/fotoproduto/1120001P.jpg?rand=0.6759872304621309" alt="" style="transform: rotate(90deg);"> <a href="booking.html">Ver</a> </figure> </div><!-- /.item --> <div class="item"> <figure> <img src="http://s2.nbsoftware.com.br/hype61/fotoproduto/1110005M.jpg" alt="" style="transform: rotate(90deg);"> <a href="booking.html">Ver</a> </figure> </div><!-- /.item --> </div><!-- /.item --> </div><!-- /.owl-favorites --> </div><!-- /.container --> </div><!-- /.favorites --> <div class="newsletter base-padd"> <h2>Depoimentos de Clientes</h2> </div><!-- /.newsletter --> <div class="opinion base-padd"> <div class="container"> <div class="owl-opinion owl-carousel owl-theme"> <div class="item"> <img src="assets/dist/img/opinion/1.png" alt=""> <p class="font-14-ope-reg-0">Jonathen Nora</p> <h3> <a href="#"><i class="fa fa-star" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-star" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-star" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-star" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-star-o" aria-hidden="true"></i></a> </h3> <p class="edit">Gostei muito da variedade de modelos e tamanhos e sempre encontro a roupa para aquele evento. Parábens a toda equipe</p> </div><!-- /.item --> </div><!-- /.owl-opinion --> </div><!-- /.container --> </div><!-- /.opinion --> <div id="go-to-top"> <a href="#stickynav"><i class="fa fa-angle-up"></i></a> </div> <?php include "rodape.php"; ?> <script src="app.js"></script> <script src="assets/dist/js/vendor/jquery-3.4.1.min.js"></script> <script src="assets/dist/js/vendor/bootstrap.min.js"></script> <script src="assets/dist/js/vendor/countUp.js"></script> <script src="assets/dist/js/vendor/owl.carousel.min.js"></script> <script src="assets/dist/js/vendor/ion.rangeSlider.min.js"></script> <script src="assets/dist/js/vendor/dateRangePicker.js"></script> <script src="assets/dist/js/vendor/jquery.flexslider-min.js"></script> <script src="assets/dist/js/vendor/jquery.nicescroll.min.js"></script> <script src="assets/dist/js/vendor/select2.min.js"></script> <script src="assets/dist/js/vendor/lightbox.min.js"></script> <script src="assets/dist/js/vendor/jquery.smooth-scroll.js"></script> <script src="assets/dist/js/custom.js"></script> </body> </html>
    • By xdxddxd
      ao clicar em um botão eu gostaria de exibir um confirm no site, mas eu gostaria de Mudar de "OK" Para "Home" e "Cancelar" para "Estoque".
      isso usando javascript puro, alguem pode me ajudar ?
      já agradeço de já.
      tem que usar algum plugin no site ou tem como fazer puro mesmo.
      se quiser deixar só um link com o tutorial eu já agradeço, porém não achei nenhum do jeito que eu quero no google.
    • By Theusy
      Boa tarde pessoal!
      Sou novo em html e css e me deparei com um problema enquanto estava "brincando" de programar.
      Provavelmente um erro bobo de programação, ou algo do tipo.
      Agradeço qualquer tipo de ajuda,
      Obrigado desde já!


    • By Sapinn
      Salve salve.
      Mas uma dúvida minha aqui É o seguinte tenho uma pagina que tem um texto de um usuario e eu gostaria de imprimir esta página usando javascript. Sei que usando o window.print() da pra imprimir o problema é que não fica organizado. Então eu gostaria de imprimir outra pagina na qual eu organizaria melhor o  texto e outra informações do usuario para impressão. Alguém tem algum codigo ae que faça isso?
       
      Desde já agradeço.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.