-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy paththree-columns-testimonials.html
More file actions
158 lines (153 loc) · 5.95 KB
/
Copy paththree-columns-testimonials.html
File metadata and controls
158 lines (153 loc) · 5.95 KB
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/bootstrap-testimonials.min.css" />
</head>
<body>
<section style="color: #000; background-color: #f3f2f2;">
<div class="container py-5">
<div class="row d-flex justify-content-center">
<div class="col-md-10 col-xl-8 text-center">
<h3 class="fw-bold mb-4">Testimonials</h3>
<p class="mb-4 pb-2 mb-md-5 pb-md-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet
numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum
quisquam eum porro a pariatur veniam.
</p>
</div>
</div>
<div class="row text-center">
<div class="col-md-4 mb-4 mb-md-0">
<div class="card">
<div class="card-body py-4 mt-2">
<div class="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(10).webp"
class="rounded-circle shadow-1-strong"
width="100"
height="100"
/>
</div>
<h5 class="font-weight-bold">Teresa May</h5>
<h6 class="font-weight-bold my-3">Founder at ET Company</h6>
<ul class="list-unstyled d-flex justify-content-center">
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star-half-alt fa-sm text-info"></i>
</li>
</ul>
<p class="mb-2">
<i class="fas fa-quote-left pe-2"></i>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat
ad velit ab hic tenetur.
</p>
</div>
</div>
</div>
<div class="col-md-4 mb-4 mb-md-0">
<div class="card">
<div class="card-body py-4 mt-2">
<div class="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(15).webp"
class="rounded-circle shadow-1-strong"
width="100"
height="100"
/>
</div>
<h5 class="font-weight-bold">Maggie McLoan</h5>
<h6 class="font-weight-bold my-3">Photographer at Studio LA</h6>
<ul class="list-unstyled d-flex justify-content-center">
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
</ul>
<p class="mb-2">
<i class="fas fa-quote-left pe-2"></i>Autem, totam debitis suscipit saepe
sapiente magnam officiis quaerat necessitatibus odio assumenda perferendis
labore laboriosam.
</p>
</div>
</div>
</div>
<div class="col-md-4 mb-0">
<div class="card">
<div class="card-body py-4 mt-2">
<div class="d-flex justify-content-center mb-4">
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(17).webp"
class="rounded-circle shadow-1-strong"
width="100"
height="100"
/>
</div>
<h5 class="font-weight-bold">Alexa Horwitz</h5>
<h6 class="font-weight-bold my-3">Front-end Developer in NY</h6>
<ul class="list-unstyled d-flex justify-content-center">
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="fas fa-star fa-sm text-info"></i>
</li>
<li>
<i class="far fa-star fa-sm text-info"></i>
</li>
</ul>
<p class="mb-2">
<i class="fas fa-quote-left pe-2"></i>Cras sit amet nibh libero, in gravida
nulla metus scelerisque ante sollicitudin commodo cras purus odio,
vestibulum in tempus viverra turpis.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>