"formulario de promocoes "
Bootstrap 4.1.1 Snippet by stefanyTeles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card card-inverse card-info"> <img class="card-img-top" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/La_grande_plage_de_Nazar%C3%A9_-_panoramio_%2820%29.jpg/1200px-La_grande_plage_de_Nazar%C3%A9_-_panoramio_%2820%29.jpg"> <div class="card-block"> <figure class="profile profile-inline"> <img src="https://picsum.photos/200/150/?random" class="profile-avatar" alt=""> </figure> <h4 class="card-title">Fernando de Noronha</h4> <div class="card-text"> <p>Pacote promocional para Rio de Janeiro - RJ.</p> <p> Hospedagem</p> <p> Café da manhã e almoço</p> <p> R$ 800.00</p> <p> Oferta por pessoa.</p> </div> </div> <div class="card-footer"> <button class="btn btn-info btn-sm">Adicionar ao Carrinho</button> </div> </div> </div> <div class="col-sm-6 col-md-4 col-lg-3 mt-4"> <div class="card card-inverse card-info"> <img class="card-img-top" src="https://www.melhoresdestinos.com.br/wp-content/uploads/2020/04/praias-desertas-em-ubatuba.jpg"> <div class="card-block"> <figure class="profile profile-inline"> <img src="https://www.melhoresdestinos.com.br/wp-content/uploads/2020/04/praias-desertas-em-ubatuba.jpg" class="profile-avatar" alt=""> </figure> <h4 class="card-title">Capitolio</h4> <div class="card-text"> <p> Pacote promocional para Capitolio -MG</p> <p> Hospedagem</p> <p> Café da manhã e almoço</p> <p> R$ 570,00</p> <p> Oferta por pessoa.</p> </div> </div> <div class="card-footer"> <button class="btn btn-info btn-sm">Adicionar ao carrinho </button> </div> </div> </div> <div class="col-sm-6 col-md-2 col-lg-3 mt-4"> <div class="card card-inverse card-info"> <img class="card-img-top" src="https://media-cdn.tripadvisor.com/media/photo-s/15/09/cf/18/iriri-praia-deserta.jpg"> <div class="card-block"> <figure class="profile profile-inline"> <img src="https://media-cdn.tripadvisor.com/media/photo-s/15/09/cf/18/iriri-praia-deserta.jpg" class="profile-avatar" alt=""> </figure> <h4 class="card-title">Campo Grande</h4> <div class="card-text"> <p> Pacote promocional para Campo Grande : indaia parque hotel -MGS</p> <p> Hospedagem</p> <p> Café da manhã e almoço</p> <p> R$ 620.00</p> <p> Oferta por pessoa.</p> </div> </div> <div class="card-footer"> <button class="btn btn-info btn-sm">Adicionar ao Carrinho</button> </div> </div> </div> <div class="col-sm-6 col-md-2 col-lg-3 mt-4"> <div class="card card-inverse card-info"> <img class="card-img-top" src="https://s3.amazonaws.com/media.viajenaviagem.com/wp-content/uploads/2019/11/praia-taipu-de-fora.jpg"> <div class="card-block"> <figure class="profile profile-inline"> <img src="https://s3.amazonaws.com/media.viajenaviagem.com/wp-content/uploads/2019/11/praia-taipu-de-fora.jpg" class="profile-avatar" alt=""> </figure> <h4 class="card-title">Paraná</h4> <div class="card-text"> <p> Pacote promocional para ilha do mel - pousada ilha do mel -Paraná</p> <p> Hospedagem</p> <p> Café da manhã e almoço</p> <p> R$ 740.00</p> <p> Oferta por pessoa.</p> </div> </div> <div class="card-footer"> <button class="btn btn-info btn-sm">Adicionar ao carrinho</button> </div> </div> </div> </div> </div> </div>
{ font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 14px; } h5 { font-size: 1.28571429em; font-weight: 700; line-height: 1.2857em; margin: 0; } .card { font-size: 1em; overflow: hidden; padding: 0; border: none; border-radius: .28571429rem; box-shadow: 0 1px 3px 0 #d4d4d5, 0 0 0 1px #d4d4d5; } .card-block { font-size: 1em; position: relative; margin: 0; padding: 1em; border: none; border-top: 1px solid rgba(34, 36, 38, .1); box-shadow: none; } .card-img-top { display: block; width: 100%; height: auto; } .card-title { font-size: 1.28571429em; font-weight: 700; line-height: 1.2857em; } .card-text { clear: both; margin-top: .5em; color: rgba(0, 0, 0, .68); } .card-footer { font-size: 1em; position: static; top: 0; left: 0; max-width: 100%; padding: .75em 1em; color: rgba(0, 0, 0, .4); border-top: 1px solid rgba(0, 0, 0, .05) !important; background: #fff; } .card-inverse .btn { border: 1px solid rgba(0, 0, 0, .05); } .profile { position: absolute; top: -12px; display: inline-block; overflow: hidden; box-sizing: border-box; width: 25px; height: 25px; margin: 0; border: 1px solid #fff; border-radius: 50%; } .profile-avatar { display: block; width: 100%; height: 100%; border-radius: 50%; } .profile-inline { position: relative; top: 0; display: inline-block; } .profile-inline ~ .card-title { display: inline-block; margin-left: 4px; vertical-align: top; } .text-bold { font-weight: 700; } .meta { font-size: 1em; color: rgba(0, 0, 0, .4); } .meta a { text-decoration: none; color: rgba(0, 0, 0, .4); } .meta a:hover { color: rgba(0, 0, 0, .87); }

Related: See More


Questions / Comments: