HTML
xxxxxxxxxx1
<!-- Container for demo purpose -->2
<div class="container my-5 py-5">3
4
<!-- Section: Design Block -->5
<section class="mb-8">6
<div class="row gx-xl-5 justify-content-center">7
8
<div class="multi-carousel">9
<div class="multi-carousel-inner">10
<div class="multi-carousel-item col-lg-4 col-6 mb-4 mb-xl-0">11
<!-- Product card -->12
<div class="position-relative">13
<!-- Wishlist button -->14
<a href="aaaaa" role="button" class="btn btn-danger btn-floating position-absolute"15
style="z-index: 10; right: 1rem; top: 1rem">16
<i class="fas fa-heart"></i>17
</a>18
<!-- Product image -->19
<div class="20
bg-image21
ripple22
shadow-4-soft23
rounded-624
mb-425
overflow-hidden26
d-block27
"28
data-ripple-color="light">29
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/042.jpg" class="w-100"30
alt="" />31
<a href="bbbbbb">32
<div class="mask">33
<div34
class="35
d-flex36
justify-content-start37
align-items-end38
h-10039
p-340
">41
<span class="badge badge-danger rounded-pill me-2">-15%</span>42
</div>43
</div>44
<div class="hover-overlay">45
<div class="mask" style="background-color: hsla(0, 0%, 98.4%, 0.09)"></div>46
</div>47
</a>48
</div>49
50
<!-- Product content -->51
<a href="" class="px-3 text-reset d-block">52
<p class="fw-bold mb-2">Elegant dress Elegant dress Elegant dress Elegant dress </p>53
<p class="text-muted mb-2">Dresses</p>54
<ul class="rating mb-2" data-mdb-toggle="rating" data-mdb-readonly="true"55
data-mdb-value="4">56
<li>57
<i class="far fa-star fa-sm text-primary ps-0" title="Bad"></i>58
</li>59
<li>60
<i class="far fa-star fa-sm text-primary" title="Poor"></i>61
</li>62
<li>63
<i class="far fa-star fa-sm text-primary" title="OK"></i>64
</li>65
<li>66
<i class="far fa-star fa-sm text-primary" title="Good"></i>67
</li>68
<li>69
<i class="far fa-star fa-sm text-primary" title="Excellent"></i>70
</li>71
</ul>72
<h5 class="mb-2">73
<s class="text-muted me-2 small align-middle">$119</s><span74
class="align-middle">$101</span>75
</h5>76
</a>77
<!-- Product content -->78
</div>79
<!-- Product card -->80
</div>81
82
<div class="multi-carousel-item col-lg-4 col-6 mb-4 mb-lg-0">83
<!-- Product card -->84
<div class="position-relative">85
<!-- Wishlist button -->86
<a href="#!" role="button" class="btn btn-danger btn-floating position-absolute"87
style="z-index: 10; right: 1rem; top: 1rem">88
<i class="fas fa-heart"></i>89
</a>90
<!-- Product image -->91
<div class="92
bg-image93
ripple94
shadow-4-soft95
rounded-696
mb-497
overflow-hidden98
d-block99
"100
data-ripple-color="light">101
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/085.jpg" class="w-100"102
alt="" />103
<a href="#!">104
<div class="mask">105
<div106
class="107
d-flex108
justify-content-start109
align-items-end110
h-100111
p-3112
">113
<span class="badge badge-primary rounded-pill me-2">New</span>114
<span class="badge badge-success rounded-pill">Eco</span>115
</div>116
</div>117
<div class="hover-overlay">118
<div class="mask" style="background-color: hsla(0, 0%, 98.4%, 0.09)"></div>119
</div>120
</a>121
</div>122
123
<!-- Product content -->124
<a href="" class="px-3 text-reset d-block">125
<p class="fw-bold mb-2">Sophisticated dress</p>126
<p class="text-muted mb-2">Dresses</p>127
<ul class="rating mb-2" data-mdb-toggle="rating" data-mdb-readonly="true"128
data-mdb-value="5">129
<li>130
<i class="far fa-star fa-sm text-primary ps-0" title="Bad"></i>131
</li>132
<li>133
<i class="far fa-star fa-sm text-primary" title="Poor"></i>134
</li>135
<li>136
<i class="far fa-star fa-sm text-primary" title="OK"></i>137
</li>138
<li>139
<i class="far fa-star fa-sm text-primary" title="Good"></i>140
</li>141
<li>142
<i class="far fa-star fa-sm text-primary" title="Excellent"></i>143
</li>144
</ul>145
<h5 class="mb-2">146
<span class="align-middle">$399</span>147
</h5>148
</a>149
<!-- Product content -->150
</div>151
<!-- Product card -->152
</div>153
154
<div class="multi-carousel-item col-lg-4 col-6 mb-4 mb-lg-0">155
<!-- Product card -->156
<div class="position-relative">157
<!-- Wishlist button -->158
<a href="#!" role="button" class="btn btn-danger btn-floating position-absolute"159
style="z-index: 10; right: 1rem; top: 1rem">160
<i class="fas fa-heart"></i>161
</a>162
<!-- Product image -->163
<div class="164
bg-image165
ripple166
shadow-4-soft167
rounded-6168
mb-4169
overflow-hidden170
d-block171
"172
data-ripple-color="light">173
<img src="https://mdbootstrap.com/img/new/ecommerce/vertical/069.jpg" class="w-100"174
alt="" />175
<a href="#!">176
<div class="mask">177
<div178
class="179
d-flex180
justify-content-start181
align-items-end182
h-100183
p-3184
">185
</div>186
</div>187
<div class="hover-overlay">188
<div class="mask" style="background-color: hsla(0, 0%, 98.4%, 0.09)"></div>189
</div>190
</a>191
</div>192
193
<!-- Product content -->194
<a href="" class="px-3 text-reset d-block">195
<p class="fw-bold mb-2">Fashionable dress</p>196
<p class="text-muted mb-2">Dresses</p>197
<ul class="rating mb-2" data-mdb-toggle="rating" data-mdb-readonly="true"198
data-mdb-value="4">199
<li>200
<i class="far fa-star fa-sm text-primary ps-0" title="Bad"></i>201
</li>202
<li>203
<i class="far fa-star fa-sm text-primary" title="Poor"></i>204
</li>205
<li>206
<i class="far fa-star fa-sm text-primary" title="OK"></i>207
</li>208
<li>209
<i class="far fa-star fa-sm text-primary" title="Good"></i>210
</li>211
<li>212
<i class="far fa-star fa-sm text-primary" title="Excellent"></i>213
</li>214
</ul>215
<h5 class="mb-2">216
<span class="align-middle">$249</span>217
</h5>218
</a>219
<!-- Product content -->220
</div>221
<!-- Product card -->222
</div>223
<button class="carousel-control-prev" type="button" tabindex="0" data-mdb-slide="prev">224
<span class="carousel-control-prev-icon" aria-hidden="true"></span>225
</button>226
<button class="carousel-control-next" type="button" tabindex="0" data-mdb-slide="next">227
<span class="carousel-control-next-icon" aria-hidden="true"></span>228
</button>229
</div>230
</div>231
</div>232
</section>233
<!-- Section: Design Block -->234
235
</div>236
<!-- Container for demo purpose -->237
CSS
1
1
JS
1
1
Console errors: 0