HTML
xxxxxxxxxx1
<div class="container">2
<section class="mx-auto my-5" style="max-width: 23rem;">3
4
<div class="card panels-card">5
<div class="rounded-top" style="background-color: #e0e0e0;">6
<ul class="list-inline float-end my-0 py-1 pe-3">7
<li class="list-inline-item">8
<i class="fab fa-facebook" aria-hidden="true"></i>9
</li>10
<li class="list-inline-item">11
<i class="fab fa-twitter" aria-hidden="true"></i>12
</li>13
<li class="list-inline-item">14
<i class="fab fa-instagram" aria-hidden="true"></i>15
</li>16
</ul>17
</div>18
<nav class="navbar navbar-expand-lg navbar-dark d-flex justify-content-between z-depth-1-bottom px-3"19
style="background-color: #fafafa;">20
<div>21
<ul class="list-inline my-2 py-1">22
<li class="list-inline-item">23
<i class="fas fa-bars" aria-hidden="true"></i>24
</li>25
<li class="list-inline-item font-weight-bold text-uppercase">26
weather27
</li>28
</ul>29
</div>30
<div>31
<ul class="list-inline my-2 py-1">32
<li class="list-inline-item">33
<i class="fas fa-search" aria-hidden="true"></i>34
<i class="fas fa-ellipsis-v ps-3" aria-hidden="true"></i>35
</li>36
</ul>37
</div>38
</nav>39
<div class="card-body rounded-bottom text-dark" style="background-color: #fafafa;">40
<div class="row">41
<div class="col-6 p-1">42
<div class="card" style="background-color: #e0e0e0;">43
<div class="card-body pb-0">44
<i class="fas fa-cloud fa-3x pb-4"></i>45
<div class="d-flex justify-content-between">46
<p class="mb-0 h5">15°</p>47
<p class="mb-0 hour">12:15 PM</p>48
</div>49
</div>50
<hr>51
<div class="card-body pt-0">52
<h6 class="font-weight-bold mb-1">San Francisco</h6>53
<p class="mb-0">Cloudy</p>54
</div>55
</div>56
</div>57
<div class="col-6 p-1">58
<div class="card" style="background-color: #ffcc80;">59
<div class="card-body pb-0">60
<i class="fas fa-sun fa-3x pb-4"></i>61
<div class="d-flex justify-content-between">62
<p class="mb-0 h5">23°</p>63
<p class="mb-0 hour">3:25 PM</p>64
</div>65
</div>66
<hr>67
<div class="card-body pt-0">68
<h6 class="font-weight-bold mb-1">New York City</h6>69
<p class="mb-0">Sunny</p>70
</div>71
</div>72
</div>73
</div>74
<div class="row">75
<div class="col-6 p-1">76
<div class="card" style="background-color: #9fa8da;">77
<div class="card-body pb-0">78
<i class="fas fa-tint fa-3x pb-4"></i>79
<div class="d-flex justify-content-between">80
<p class="mb-0 h5">10°</p>81
<p class="mb-0 hour">10:30 AM</p>82
</div>83
</div>84
<hr>85
<div class="card-body pt-0">86
<h6 class="font-weight-bold mb-1">Seattle</h6>87
<p class="mb-0">Light rain</p>88
</div>89
</div>90
</div>91
<div class="col-6 p-1">92
<div class="card" style="background-color: #e0e0e0;">93
<div class="card-body pb-0">94
<i class="fas fa-cloud fa-3x pb-4"></i>95
<div class="d-flex justify-content-between">96
<p class="mb-0 h5">14°</p>97
<p class="mb-0 hour">8:10 PM</p>98
</div>99
</div>100
<hr>101
<div class="card-body pt-0">102
<h6 class="font-weight-bold mb-1">Milwaukee</h6>103
<p class="mb-0">Cloudy</p>104
</div>105
</div>106
</div>107
</div>108
<div class="row">109
<div class="col-6 p-1">110
<div class="card" style="background-color: #ffcc80;">111
<div class="card-body pb-0">112
<i class="fas fa-sun fa-3x pb-4"></i>113
<div class="d-flex justify-content-between">114
<p class="mb-0 h5">25°</p>115
<p class="mb-0 hour">1:35 PM</p>116
</div>117
</div>118
<hr>119
<div class="card-body pt-0">120
<h6 class="font-weight-bold mb-1">Honolulu</h6>121
<p class="mb-0">Sunny</p>122
</div>123
</div>124
</div>125
<div class="col-6 p-1">126
<div class="card indigo text-white" style="background-color: #3f51b5;">127
<div class="card-body pb-0">128
<i class="fas fa-umbrella fa-3x pb-4"></i>129
<div class="d-flex justify-content-between">130
<p class="mb-0 h5">5°</p>131
<p class="mb-0 hour">7:00 AM</p>132
</div>133
</div>134
<hr class="hr-light">135
<div class="card-body pt-0">136
<h6 class="font-weight-bold mb-1">Anchorage</h6>137
<p class="mb-0">Heavy rain</p>138
</div>139
</div>140
</div>141
</div>142
</div>143
</div>144
145
</section>146
</div>CSS
xxxxxxxxxx1
body {2
background-color: #f5f7fa;3
}4
5
.card.panels-card .hour {6
font-size: 0.8rem;7
margin-top: 0.3rem;8
}JS
xxxxxxxxxx1
const card = document.querySelector('.map-card');2
const cardBody = card.querySelector('.card-body')3
4
card.addEventListener('click', () => {5
cardBody.classList.toggle('closed')6
}) Console errors: 0