"Testimonial"
Bootstrap 4.0.0 Snippet by pablocorezzola

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.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>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Roboto|Titillium+Web" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container" style="background:#ebebeb;margin:35px;display:table">
<!-- EXAMPLE 1 -->
<div class="parent-box">
<div class="box">
<div class="dialog-box">
<p>
<a href="#">
Primer titular de prueba...
</a>
</p>
<p>
<span>
ACTUALIDAD
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
</span>
</p>
</div>
<div class="info">
<div style="width:50%;float:left;">
<a href="#">Romina<br>Gomez</a>
</div>
<div>
<img style="max-height:100%;" src="https://www.getmypests.com/layout/images/modern-pest-customer.png" />
</div>
</div>
</div>
</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
html, body{
background:#ebebeb;
}
.parent-box{
width:25%;height:300px;float:left;display:flex;;
}
.info > div:first-of-type{
width: 50%;
float: left;
align-items: center;
padding: 5px;
padding-top:30px;
display: flex;
font-family: 'Titillium Web'
}
.info > div:first-of-type > a{
padding-left:15px;
color:#1E3344;
text-decoration: none;
}
.info > div:last-of-type{
width: 50%;
float: left;
padding: 5px 0 0 0;
display: flex;
justify-content: center;
align-items: flex-end;
}
.info > div:last-of-type > img{
width:100%;
}
.box{
width:100%;
height:100%;
padding: 15px 15px 0 15px;
}
.dialog-box span{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: