xxxxxxxxxx1
<div class="container-fluid p-4">2
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">3
4
<div class="col mb-4">5
<!-- Card -->6
<div class="card promoting-card">7
8
<!-- Card content -->9
<div class="card-body d-flex flex-row">10
11
<!-- Avatar -->12
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">13
14
<!-- Content -->15
<div>16
17
<!-- Title -->18
<h4 class="card-title font-weight-bold mb-2">New spicy meals</h4>19
<!-- Subtitle -->20
<p class="card-text"><i class="far fa-clock pr-2"></i>07/24/2018</p>21
22
</div>23
24
</div>25
26
<!-- Card image -->27
<div class="view overlay">28
<img class="card-img-top rounded-0" src="http://test.bjornebo.no/visBilde.php?id=93" alt="Card image cap">29
<a href="#!">30
<div class="mask rgba-white-slight"></div>31
</a>32
</div>33
34
<!-- Card content -->35
<div class="card-body">36
37
<div class="collapse-content">38
39
<!-- Text -->40
<p class="card-text collapse" id="collapseContent1">41
Recently, we added several exotic new dishes to our restaurant menu. They come from countries such as Mexico, Argentina, and Spain. Come to us, have some delicious wine and enjoy our juicy meals from around the world.42
Lots and lots of text here....43
Lots and lots of text here....44
Lots and lots of text here....45
Lots and lots of text here....46
Lots and lots of text here....47
Lots and lots of text here....48
Lots and lots of text here....49
Lots and lots of text here....50
</p>51
<!-- Button -->52
<a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse" href="#collapseContent1" aria-expanded="false" aria-controls="collapseContent1"></a>53
<i class="fas fa-share-alt text-muted float-right p-1 my-1" data-toggle="tooltip" data-placement="top" title="Share this post"></i>54
<i class="fas fa-heart text-muted float-right p-1 my-1 mr-3" data-toggle="tooltip" data-placement="top" title="I like it"></i>55
56
</div>57
58
</div>59
60
</div>61
<!-- Card --> 62
</div>63
64
<div class="col mb-4">65
<!-- Card -->66
<div class="card promoting-card">67
68
<!-- Card content -->69
<div class="card-body d-flex flex-row">70
71
<!-- Avatar -->72
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.jpg" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">73
74
<!-- Content -->75
<div>76
77
<!-- Title -->78
<h4 class="card-title font-weight-bold mb-2">New spicy meals</h4>79
<!-- Subtitle -->80
<p class="card-text"><i class="far fa-clock pr-2"></i>07/24/2018</p>81
82
</div>83
84
</div>85
86
<!-- Card image -->87
<div class="view overlay">88
<img class="card-img-top rounded-0" src="http://test.bjornebo.no/visBilde.php?id=91" alt="Card image cap">89
<a href="#!">90
<div class="mask rgba-white-slight"></div>91
</a>92
</div>93
94
<!-- Card content -->95
<div class="card-body">96
97
<div class="collapse-content">98
99
<!-- Text -->100
<p class="card-text collapse" id="collapseContent2">101
Recently, we added several exotic new dishes to our restaurant menu. They come from countries such as Mexico, Argentina, and Spain. Come to us, have some delicious wine and enjoy our juicy meals from around the world.102
Lots and lots of text here....103
Lots and lots of text here....104
Lots and lots of text here....105
Lots and lots of text here....106
Lots and lots of text here....107
Lots and lots of text here....108
Lots and lots of text here....109
Lots and lots of text here....110
Lots and lots of text here....111
Lots and lots of text here....112
Lots and lots of text here....113
Lots and lots of text here....114
Lots and lots of text here....115
Lots and lots of text here....116
Lots and lots of text here....117
Lots and lots of text here....118
Lots and lots of text here....119
Lots and lots of text here....120
Lots and lots of text here....121
Lots and lots of text here....122
Lots and lots of text here....123
Lots and lots of text here....124
Lots and lots of text here....125
Lots and lots of text here....126
Lots and lots of text here....127
Lots and lots of text here....128
Lots and lots of text here....129
Lots and lots of text here....130
Lots and lots of text here....131
Lots and lots of text here....132
Lots and lots of text here....133
Lots and lots of text here....134
</p>135
<!-- Button -->136
<a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse" href="#collapseContent2" aria-expanded="false" aria-controls="collapseContent2"></a>137
<i class="fas fa-share-alt text-muted float-right p-1 my-1" data-toggle="tooltip" data-placement="top" title="Share this post"></i>138
<i class="fas fa-heart text-muted float-right p-1 my-1 mr-3" data-toggle="tooltip" data-placement="top" title="I like it"></i>139
140
</div>141
142
</div>143
144
</div>145
<!-- Card --> 146
147
</div>148
149
150
151
152
</div>153
</div>154
155
xxxxxxxxxx1
.collapse-content .fa.fa-heart:hover {2
color: #f44336 !important;3
}4
.collapse-content .fa.fa-share-alt:hover {5
color: #0d47a1 !important;6
}1
1
Console errors: 0