HTML
xxxxxxxxxx
1
<div class="container py-5 my-5 z-depth-1">
2
<section class="p-md-3 mx-md-5 text-lg-left">
3
<div class="row d-flex justify-content-center align-items-center">
4
<h2 class="font-weight-bold mb-3">Features</h2>
5
<p class="text-muted text-center py-3">
6
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
7
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
8
enim ad minim veniam, quis nostrud exercitation ullamco laboris
9
nisi ut aliquip ex ea commodo consequat.
10
</p>
11
<div class="view overlay rounded z-depth-2 mt-3 mb-5">
12
<img
13
src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/img (56).jpg"
14
class="img-fluid"
15
alt="Sample project image"
16
/>
17
<a href="#">
18
<div class="mask rgba-white-slight"></div>
19
</a>
20
</div>
21
</div>
22
<div class="row mt-5">
23
<div class="col-lg-4 col-md-6 mb-lg-0 mb-5">
24
<div class="mt-3 d-flex align-items-center">
25
<i class="far fa-paper-plane indigo-text fa-2x pr-4"></i>
26
<div class="">
27
<h4 class="font-weight-bold mb-3">Feature 1</h4>
28
<p class="text-muted mb-0">
29
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
30
</p>
31
</div>
32
</div>
33
</div>
34
<div class="col-lg-4 col-md-6 mb-md-0 mb-5">
35
<div class="d-flex align-items-center mt-3">
36
<i class="fa fa-pen-alt green-text pr-4 fa-2x"></i>
37
<div>
38
<h4 class="font-weight-bold mb-3">Feature 2</h4>
39
<p class="text-muted">
40
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
41
</p>
42
</div>
43
</div>
44
</div>
45
<div class="col-lg-4 col-md-6 mb-md-0 mb-5">
46
<div class="d-flex align-items-center mt-3">
47
<i class="fa fa-user amber-text pr-4 fa-2x"></i>
48
<div>
49
<h4 class="font-weight-bold mb-3">Feature 3</h4>
50
<p class="text-muted">
51
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
52
</p>
53
</div>
54
</div>
55
</div>
56
</div>
57
</section>
58
</div>
CSS
1
1
JS
1
1
Console errors: 0