xxxxxxxxxx1
<div class="container my-5">2
3
<!-- Grid row -->4
<div class="row">5
6
<!-- Grid column -->7
<div class="col-lg-4 col-md-12 mb-4">8
9
<!-- Card -->10
<div class="card booking-card">11
12
<!-- Card image -->13
<div class="view overlay">14
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/water-lily.jpg" alt="Card image cap">15
<a href="#!">16
<div class="mask rgba-white-slight"></div>17
</a>18
</div>19
20
<!-- Card content -->21
<div class="card-body">22
23
<!-- Title -->24
<h4 class="card-title font-weight-bold"><a>Fine Art Pictures Gallery</a></h4>25
<!-- Data -->26
<ul class="list-unstyled list-inline rating">27
<li class="list-inline-item mr-0"><i class="fa fa-star"> </i></li>28
<li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>29
<li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>30
<li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>31
<li class="list-inline-item"><i class="fa fa-star-half-o"></i></li>32
</ul>33
<!-- Text -->34
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>35
<hr class="my-4">36
<p class="h5 font-weight-bold mb-4">Opening hours</p>37
<ul class="list-unstyled d-flex justify-content-start mb-0">38
<li>Tuesday - Friday</li>39
<li>40
<div class="chip ml-3">10:00AM</div>41
</li>42
<li>43
<div class="chip ml-0 mr-0">6:00PM</div>44
</li>45
</ul>46
<ul class="list-unstyled d-flex justify-content-start mb-0">47
<li>Saturday - Sunday</li>48
<li>49
<div class="chip ml-3">9:00AM</div>50
</li>51
<li>52
<div class="chip ml-0 mr-0">7:00PM</div>53
</li>54
</ul>55
<ul class="list-unstyled d-flex justify-content-start mb-0">56
<li>Monday</li>57
<li>58
<div class="chip ml-3">CLOSED</div>59
</li>60
</ul>61
</div>62
63
</div>64
<!-- Card -->65
66
</div>67
<!-- Grid column -->68
69
<!-- Grid column -->70
<div class="col-lg-4 col-md-6 mb-4">71
72
<!-- Card -->73
<div class="card sunny-card">74
75
<!-- Card content -->76
<div class="card-body">77
78
<!-- Title -->79
<h2 class="card-title h1 font-weight-bold">80
<i class="fa fa-calendar-check-o"></i> MDB</h2>81
<h2 class="card-subtitle font-weight-bold text-right my-5 pb-5">Choose topics <span class="float-right">that interest you</span></h2>82
83
<!-- Grid row -->84
<div class="row">85
86
<!-- Grid column -->87
<div class="col-md-12 mb-3">88
89
<div class="chip chip-sunny mr-2">90
<img src="https://mdbootstrap.com/img/Photos/Avatars/img(21).jpg" alt="Contact Person"> Pets91
</div>92
93
<div class="chip chip-sunny mr-2">94
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" alt="Contact Person"> Makeup95
</div>96
97
<div class="chip chip-sunny mr-2">98
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-12.jpg" alt="Contact Person"> Travels99
</div>100
101
<div class="chip chip-raspberry white mr-2">102
<i class="fa fa-coffee fa-lg mr-2"></i>Coffee103
</div>104
105
<div class="chip chip-raspberry white mr-2">106
<i class="fa fa-cutlery fa-lg mr-2"></i>Cooking107
</div>108
109
<div class="chip chip-raspberry white mr-2">110
<i class="fa fa-cogs fa-lg mr-2"></i>Craft111
</div>112
113
<div class="chip chip-orange mr-2">114
Science115
<i class="close fa fa-times"></i>116
</div>117
118
<div class="chip chip-orange mr-2">119
Dance120
<i class="close fa fa-times"></i>121
</div>122
123
<div class="chip chip-orange mr-2">124
Medicine125
<i class="close fa fa-times"></i>126
</div>127
128
</div>129
<!-- Grid column -->130
131
</div>132
<!-- Grid row -->133
134
<!-- Button -->135
<a href="#" class="btn-floating float-right m-0"><i class="fa fa-check"></i></a>136
137
</div>138
139
</div>140
<!-- Card -->141
142
</div>143
<!-- Grid column -->144
145
<!-- Grid column -->146
<div class="col-lg-4 col-md-6 mb-4">147
148
<!-- Card -->149
<div class="card news-card">150
151
<!-- Heading-->152
<div class="card-body">153
<div class="content">154
<div class="right-side-meta">2 h</div>155
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).jpg" class="rounded-circle avatar-img z-depth-1-half">Tony156
</div>157
</div>158
159
<!-- Card video-->160
<div class="embed-responsive embed-responsive-1by1">161
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/37pwbUp8t1I" allowfullscreen></iframe>162
</div>163
164
<!-- Card content -->165
<div class="card-body">166
167
<!-- Social meta-->168
<div class="social-meta">169
<div>170
<div class="chip white-text mr-0">171
bboy172
<i class="close white-text fa fa-times pr-0"></i>173
</div>174
<div class="chip white-text mr-0">175
breakin176
<i class="close white-text fa fa-times pr-0"></i>177
</div>178
<div class="chip white-text mr-0">179
battleoftheyear180
<i class="close white-text fa fa-times pr-0"></i>181
</div>182
</div>183
<span><i class="fa fa-heart-o"></i>265 likes</span>184
<p><i class="fa fa-comment "></i>89 comments</p>185
</div>186
187
<hr>188
189
<!-- Comment input -->190
<div class="md-form">191
<i class="fa fa-heart-o prefix"></i>192
<input placeholder="Add Comment..." type="text" id="form555" class="form-control">193
</div>194
195
</div>196
<!-- Card content -->197
198
</div>199
<!-- Card -->200
201
</div>202
<!-- Grid column -->203
204
</div>205
<!-- Grid row -->206
207
</div>xxxxxxxxxx1
body {2
background-color: #eee;3
}4
.card.sunny-card {5
background-color: #feffdf;6
}7
.card.sunny-card .card-title,8
.card.sunny-card .card-subtitle {9
color: #ffa952;10
}11
.card.sunny-card .card-title .fa {12
color: #ef5a5a;13
}14
.card.sunny-card .chip.chip-sunny {15
background-color: #ffe79a;16
}17
.card.sunny-card .chip.chip-raspberry {18
color: #ef5a5a; 19
border: 1px solid #ef5a5a;20
}21
.card.sunny-card .chip.chip-orange {22
background-color: #ffa952;23
}24
.card.sunny-card .btn-floating {25
background-color: #ef5a5a;26
}27
.card.news-card {28
background-color: #0b032d;29
color: #ffb997;30
}31
.card.news-card .md-form .form-control {32
border-bottom: 1px solid #ffb997;33
color: #ffb997;34
}35
.card.news-card .md-form input::placeholder {36
color: #fff;37
}38
.card.news-card .md-form input[type=text]:focus:not([readonly]) {39
box-shadow: 0 1px 0 0 #ffb997;40
border-bottom: 1px solid #ffb997;41
}42
.card.news-card .md-form .prefix.active,43
.card.news-card .content .right-side-meta {44
color: #ffb997;45
}46
.card.news-card .chip {47
background-color: #843b62;48
}49
.card.booking-card {50
background-color: #c7f2e3;51
}52
.card.booking-card .fa {53
color: #f7aa00;54
}55
.card.booking-card .card-body .card-text {56
color: #db2d43;57
}58
.card.card.booking-card .chip {59
background-color: #87e5da;60
}61
.card.booking-card .card-body hr {62
border-top: 1px solid #f7aa00;63
}1
1
Console errors: 0