xxxxxxxxxx1
<div class="container-fluid my-2">2
<div class="card-columns">3
<div class="card mt-2 mb-3">4
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image008.jpg" alt="Card image cap">5
<div class="card-body py-2 px-1 palette-1 d-flex">6
<div class="color-1 flex-fill mx-1"></div>7
<div class="color-2 flex-fill mx-1"></div>8
<div class="color-3 flex-fill mx-1"></div>9
<div class="color-4 flex-fill mx-1"></div>10
<div class="color-5 flex-fill mx-1"></div>11
</div>12
</div>13
<div class="card mt-2 mb-3">14
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image002.jpg" alt="Card image cap">15
<div class="card-body py-2 px-1 palette-4 d-flex">16
<div class="color-1 flex-fill mx-1"></div>17
<div class="color-2 flex-fill mx-1"></div>18
<div class="color-3 flex-fill mx-1"></div>19
<div class="color-4 flex-fill mx-1"></div>20
<div class="color-5 flex-fill mx-1"></div>21
</div>22
</div>23
<div class="card mt-2 mb-3">24
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image004.jpg" alt="Card image cap">25
<div class="card-body py-2 px-1 palette-5 d-flex">26
<div class="color-1 flex-fill mx-1"></div>27
<div class="color-2 flex-fill mx-1"></div>28
<div class="color-3 flex-fill mx-1"></div>29
<div class="color-4 flex-fill mx-1"></div>30
<div class="color-5 flex-fill mx-1"></div>31
</div>32
</div>33
<div class="card mt-2 mb-3">34
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image017.jpg" alt="Card image cap">35
<div class="card-body py-2 px-1 palette-2 d-flex">36
<div class="color-1 flex-fill mx-1"></div>37
<div class="color-2 flex-fill mx-1"></div>38
<div class="color-3 flex-fill mx-1"></div>39
<div class="color-4 flex-fill mx-1"></div>40
<div class="color-5 flex-fill mx-1"></div>41
</div>42
</div>43
<div class="card mt-2 mb-3">44
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image13.jpg" alt="Card image cap">45
<div class="card-body py-2 px-1 palette-6 d-flex">46
<div class="color-1 flex-fill mx-1"></div>47
<div class="color-2 flex-fill mx-1"></div>48
<div class="color-3 flex-fill mx-1"></div>49
<div class="color-4 flex-fill mx-1"></div>50
<div class="color-5 flex-fill mx-1"></div>51
</div>52
</div>53
<div class="card mt-2 mb-3">54
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image14.jpg" alt="Card image cap">55
<div class="card-body py-2 px-1 palette-7 d-flex">56
<div class="color-1 flex-fill mx-1"></div>57
<div class="color-2 flex-fill mx-1"></div>58
<div class="color-3 flex-fill mx-1"></div>59
<div class="color-4 flex-fill mx-1"></div>60
<div class="color-5 flex-fill mx-1"></div>61
</div>62
</div>63
<div class="card mt-2 mb-3">64
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image20.jpg" alt="Card image cap">65
<div class="card-body py-2 px-1 palette-3 d-flex">66
<div class="color-1 flex-fill mx-1"></div>67
<div class="color-2 flex-fill mx-1"></div>68
<div class="color-3 flex-fill mx-1"></div>69
<div class="color-4 flex-fill mx-1"></div>70
<div class="color-5 flex-fill mx-1"></div>71
</div>72
</div>73
<div class="card mt-2 mb-3">74
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image16.jpg" alt="Card image cap">75
<div class="card-body py-2 px-1 palette-8 d-flex">76
<div class="color-1 flex-fill mx-1"></div>77
<div class="color-2 flex-fill mx-1"></div>78
<div class="color-3 flex-fill mx-1"></div>79
<div class="color-4 flex-fill mx-1"></div>80
<div class="color-5 flex-fill mx-1"></div>81
</div>82
</div>83
<div class="card mt-2 mb-3">84
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/image007.jpg" alt="Card image cap">85
<div class="card-body py-2 px-1 palette-9 d-flex">86
<div class="color-1 flex-fill mx-1"></div>87
<div class="color-2 flex-fill mx-1"></div>88
<div class="color-3 flex-fill mx-1"></div>89
<div class="color-4 flex-fill mx-1"></div>90
<div class="color-5 flex-fill mx-1"></div>91
</div>92
</div>93
</div>94
</div>xxxxxxxxxx1
.card-body div {2
height: 160px;3
}4
.palette-1 .color-1 {5
background-color: #c2d8c7;6
}7
.palette-1 .color-2 {8
background-color: #e6854d;9
}10
.palette-1 .color-3 {11
background-color: #a8a6d8;12
}13
.palette-1 .color-4 {14
background-color: #ffa9ff;15
}16
.palette-1 .color-5 {17
background-color: #8e5b7f;18
}19
.palette-2 .color-1 {20
background-color: #00428d;21
}22
.palette-2 .color-2 {23
background-color: #00a3ed;24
}25
.palette-2 .color-3 {26
background-color: #e1eff5;27
}28
.palette-2 .color-4 {29
background-color: #00705f;30
}31
.palette-2 .color-5 {32
background-color: #c2b29d;33
}34
.palette-3 .color-1 {35
background-color: #ff4619;36
}37
.palette-3 .color-2 {38
background-color: #fdc2c0;39
}40
.palette-3 .color-3 {41
background-color: #e2e5e9;42
}43
.palette-3 .color-4 {44
background-color: #00632e;45
}46
.palette-3 .color-5 {47
background-color: #222626;48
}49
.palette-4 .color-1 {50
background-color: #00899a;51
}52
.palette-4 .color-2 {53
background-color: #00c1cd;54
}55
.palette-4 .color-3 {56
background-color: #bbd8d8;57
}58
.palette-4 .color-4 {59
background-color: #ffded8;60
}61
.palette-4 .color-5 {62
background-color: #7c6065;63
}64
.palette-5 .color-1 {65
background-color: #f1d2bf;66
}67
.palette-5 .color-2 {68
background-color: #ffc884;69
}70
.palette-5 .color-3 {71
background-color: #ec8452;72
}73
.palette-5 .color-4 {74
background-color: #a30000;75
}76
.palette-5 .color-5 {77
background-color: #243e19;78
}79
.palette-6 .color-1 {80
background-color: #733fbe;81
}82
.palette-6 .color-2 {83
background-color: #d185de;84
}85
.palette-6 .color-3 {86
background-color: #ffd4d7;87
}88
.palette-6 .color-4 {89
background-color: #ff8cb2;90
}91
.palette-6 .color-5 {92
background-color: #cf56a7;93
}94
.palette-7 .color-1 {95
background-color: #004949;96
}97
.palette-7 .color-2 {98
background-color: #7b9788;99
}100
.palette-7 .color-3 {101
background-color: #e4ebee;102
}103
.palette-7 .color-4 {104
background-color: #bec2bd;105
}106
.palette-7 .color-5 {107
background-color: #0e1b26;108
}109
.palette-8 .color-1 {110
background-color: #005676;111
}112
.palette-8 .color-2 {113
background-color: #17aacf;114
}115
.palette-8 .color-3 {116
background-color: #eaf6fa;117
}118
.palette-8 .color-4 {119
background-color: #003b4e;120
}121
.palette-8 .color-5 {122
background-color: #5e5967;123
}124
.palette-9 .color-1 {125
background-color: #c9b59f;126
}127
.palette-9 .color-2 {128
background-color: #1c3d00;129
}130
.palette-9 .color-3 {131
background-color: #c10000;132
}133
.palette-9 .color-4 {134
background-color: #fd002e;135
}136
.palette-9 .color-5 {137
background-color: #cf7d00;138
}1
1
Console errors: 0