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