"Tabela de Preços Host"
Bootstrap 4.1.1 Snippet by ICTUSSISTEMAS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link async rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"><section class="section">
<div class="container">
<div class="section-title text-center">
<h2>HOSPEDAGEM DE SITES <span>100% DEDICADA COM</span></h2>
<p class="letra">Cada <strong>HOSPEDAGEM DE SITES</strong> é criada em minutos, com possibilidades de ampliação de recursos de forma rápida e fácil, sem necessidade de reinstalações ou ajustes das aplicações.</p>
</div><!-- end section-title -->
<div class="container content aparecer">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 ">
<div class="row">
<div class="col-md-12"><strong></strong></div>
<div class="col-md-12"></div>
</div>
</div>
<div class="col-md-3 bloco-head">
<div class="row">
<div class="col-md-12 bloco-titulo"><strong>HOSPEDAGEM I</strong></div>
<div class="col-md-12 bloco-valor">
<h4><sup>R$</sup>29,98</h4>
</div>
<div class="col-md-12 bloco-periodo">
<small>Mensal</small>
</div>
<div class="col-md-12 bloco-botao">
<a href="#6" class="btn btn-white btn-sm"><i class="fas fa-shopping-basket"></i> | Assinar</a>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.section {
padding: 50px 0;
background-color: #fff;
}
.section-title {
display: block;
position: relative;
width: 100%;
margin-bottom: 40px;
}
p.letra {
font-size: 20px;
font-weight: 200;
margin-top: 10px;
padding-bottom: 10px;
}
/*price*/
.bloco-head{
background:#202736;
color:#FFF;
text-align:center;
/*height:20vh;*/
padding-bottom: 2%;
}
.bloco-head-active{
background:#A22326;
color:#FFF;
text-align:center;
/*height:20vh;*/
padding-bottom: 2%;
}
.bloco-head-active .bloco-titulo{
padding:5%;
background:#962023;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: