xxxxxxxxxx1
<div class="container">2
<section class="my-5">3
<div class="d-flex justify-content-center mx-auto row">4
<div class="col-md-4">5
<div class="card">6
<div class="card-body">7
<blockquote class="blockquote blockquote-custom bg-white px-3 pt-4">8
<div class="blockquote-custom-icon bg-info shadow-1-strong"9
style="margin-right: .75rem; animation-iteration-count: infinite;" data-mdb-toggle="animation"10
data-mdb-animation-start="onLoad" data-mdb-animation="tada" data-mdb-animation-duration="1000">11
<i class="fa fa-quote-left text-white"></i>12
</div>13
<p class="mb-0 mt-2 font-italic">14
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor15
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud16
exercitation ullamco laboris nisi ut aliquip ex ea commodo17
<a href="#" class="text-info">@consequat</a>."18
</p>19
<footer class="blockquote-footer pt-4 mt-4 border-top">20
Someone famous in21
<cite title="Source Title">Source Title</cite>22
</footer>23
</blockquote>24
</div>25
</div>26
</div>27
<div class="col-md-4">28
<div class="card panels-card">29
<div class="rounded-top" style="background-color: #e0e0e0;">30
<ul class="list-inline float-end my-0 py-1 pe-3">31
<li class="list-inline-item">32
<i class="fab fa-facebook" aria-hidden="true"></i>33
</li>34
<li class="list-inline-item">35
<i class="fab fa-twitter" aria-hidden="true"></i>36
</li>37
<li class="list-inline-item">38
<i class="fab fa-instagram" aria-hidden="true"></i>39
</li>40
</ul>41
</div>42
<nav class="navbar navbar-expand-lg navbar-dark d-flex justify-content-between z-depth-1-bottom px-3"43
style="background-color: #fafafa;">44
<div>45
<ul class="list-inline my-2 py-1">46
<li class="list-inline-item">47
<i class="fas fa-bars" aria-hidden="true"></i>48
</li>49
<li class="list-inline-item font-weight-bold text-uppercase">50
weather51
</li>52
</ul>53
</div>54
<div>55
<ul class="list-inline my-2 py-1">56
<li class="list-inline-item">57
<i class="fas fa-search" aria-hidden="true"></i>58
<i class="fas fa-ellipsis-v ps-3" aria-hidden="true"></i>59
</li>60
</ul>61
</div>62
</nav>63
<div class="card-body rounded-bottom text-dark" style="background-color: #fafafa;">64
<div class="row">65
<div class="col-6 p-1">66
<div class="card" style="background-color: #e0e0e0;"67
data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in-left"68
data-mdb-animation-duration="1000" data-mdb-animation-delay="200">69
<div class="card-body pb-0">70
<i class="fas fa-cloud fa-3x pb-4"></i>71
<div class="d-flex justify-content-between">72
<p class="mb-0 h5">15°</p>73
<p class="mb-0 hour">12:15 PM</p>74
</div>75
</div>76
<hr>77
<div class="card-body pt-0">78
<h6 class="font-weight-bold mb-1">San Francisco</h6>79
<p class="mb-0">Cloudy</p>80
</div>81
</div>82
</div>83
<div class="col-6 p-1">84
<div class="card" style="background-color: #ffcc80;" data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in-right"85
data-mdb-animation-duration="1000" data-mdb-animation-delay="200">86
<div class="card-body pb-0">87
<i class="fas fa-sun fa-3x pb-4"></i>88
<div class="d-flex justify-content-between">89
<p class="mb-0 h5">23°</p>90
<p class="mb-0 hour">3:25 PM</p>91
</div>92
</div>93
<hr>94
<div class="card-body pt-0">95
<h6 class="font-weight-bold mb-1">New York City</h6>96
<p class="mb-0">Sunny</p>97
</div>98
</div>99
</div>100
</div>101
<div class="row">102
<div class="col-6 p-1">103
<div class="card" style="background-color: #9fa8da;" data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in-left"104
data-mdb-animation-duration="1000" data-mdb-animation-delay="400">105
<div class="card-body pb-0">106
<i class="fas fa-tint fa-3x pb-4"></i>107
<div class="d-flex justify-content-between">108
<p class="mb-0 h5">10°</p>109
<p class="mb-0 hour">10:30 AM</p>110
</div>111
</div>112
<hr>113
<div class="card-body pt-0">114
<h6 class="font-weight-bold mb-1">Seattle</h6>115
<p class="mb-0">Light rain</p>116
</div>117
</div>118
</div>119
<div class="col-6 p-1">120
<div class="card" style="background-color: #e0e0e0;" data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in-right"121
data-mdb-animation-duration="1000" data-mdb-animation-delay="400">122
<div class="card-body pb-0">123
<i class="fas fa-cloud fa-3x pb-4"></i>124
<div class="d-flex justify-content-between">125
<p class="mb-0 h5">14°</p>126
<p class="mb-0 hour">8:10 PM</p>127
</div>128
</div>129
<hr>130
<div class="card-body pt-0">131
<h6 class="font-weight-bold mb-1">Milwaukee</h6>132
<p class="mb-0">Cloudy</p>133
</div>134
</div>135
</div>136
</div>137
<div class="row">138
<div class="col-6 p-1">139
<div class="card" style="background-color: #ffcc80;" data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in-left"140
data-mdb-animation-duration="1000" data-mdb-animation-delay="600">141
<div class="card-body pb-0">142
<i class="fas fa-sun fa-3x pb-4"></i>143
<div class="d-flex justify-content-between">144
<p class="mb-0 h5">25°</p>145
<p class="mb-0 hour">1:35 PM</p>146
</div>147
</div>148
<hr>149
<div class="card-body pt-0">150
<h6 class="font-weight-bold mb-1">Honolulu</h6>151
<p class="mb-0">Sunny</p>152
</div>153
</div>154
</div>155
<div class="col-6 p-1">156
<div class="card indigo text-white" style="background-color: #3f51b5;" data-mdb-toggle="animation" data-mdb-animation-start="onLoad" data-mdb-animation="fade-in-right"157
data-mdb-animation-duration="1000" data-mdb-animation-duration="600">158
<div class="card-body pb-0">159
<i class="fas fa-umbrella fa-3x pb-4"></i>160
<div class="d-flex justify-content-between">161
<p class="mb-0 h5">5°</p>162
<p class="mb-0 hour">7:00 AM</p>163
</div>164
</div>165
<hr class="hr-light">166
<div class="card-body pt-0">167
<h6 class="font-weight-bold mb-1">Anchorage</h6>168
<p class="mb-0">Heavy rain</p>169
</div>170
</div>171
</div>172
</div>173
</div>174
</div>175
</div>176
</div>177
</section>178
</div>xxxxxxxxxx1
body {2
background-color: #f5f7fa;3
}4
5
.blockquote-custom {6
position: relative;7
font-size: 1.1rem;8
}9
10
.blockquote-custom-icon {11
width: 50px;12
height: 50px;13
border-radius: 50%;14
display: flex;15
align-items: center;16
justify-content: center;17
position: absolute;18
top: -40px;19
left: 19px;20
}21
22
.card.panels-card .hour {23
font-size: 0.8rem;24
margin-top: 0.3rem;25
}1
1
Console errors: 0