"session box"
Bootstrap 4.1.1 Snippet by paulohnmatos

Post to Facebook Tweet this

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="https://fonts.googleapis.com/css?family=KoHo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" type="text/css"/>
<div class="container-fluid mg-4">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-md-4">
<div class="caixa-text">
<div class="img-top">
<p class="text-center base-ic"><i class="fas fa-home fa-3x ic-top"></i></p>
</div>
<h3 class="text-center title-cixa">Lorem Ipsum</h3>
<p class="text-caixa">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br>
<a href="#" class="adosaibamais">Saiba mais...</a>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="caixa-text">
<div class="img-top">
<p class="text-center base-ic"><i class="fas fa-home fa-3x ic-top"></i></p>
</div>
<h3 class="text-center title-cixa">Lorem Ipsum</h3>
<p class="text-caixa">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<br>
<a href="#" class="adosaibamais">Saiba mais...</a>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="caixa-text">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
.mg-4{ margin-bottom: 20px;margin-top: 50px;}
.base-ic{ margin-top: -50px;}
.ic-top{ border: 1px solid rgba(0,0,0,.3);padding: 10px;border-radius: 45px;color: #8ad4df;background-color: #263238;box-shadow: 3px 8px 4px rgba(0,0,0,.1);transition: .2s;}
@media(max-width: 767px){ .caixa-text{ margin-top: 40px;}}
.ic-top:hover{ margin-top: -10px;}
.caixa-text{ border: 1px solid rgba(0,0,0,.06);border-radius: 5px;padding: 20px;box-shadow: 1px 1px 12px rgba(0,0,0,.1);}
.caixa-text:hover{ box-shadow: 0px 0px 0px rgba(0,0,0,.1);}
.text-caixa{ text-align: center;font-family: 'Merriweather', serif;color: rgba(0,0,0,.5);}
.title-cixa{ font-family: 'KoHo', sans-serif;}
.adosaibamais{ text-decoration: none;color: rgba(0,0,0,.5);transition: .4s;}
.adosaibamais:hover{ text-decoration: none;color: rgba(0,0,0,.5);font-weight: 600;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vuetify Material Dashboard

Questions / Comments: