<div class="container-fluid px-1 px-md-4 py-5 mx-auto">
<div class="row d-flex justify-content-center px-3">
<div class="card">
<h2 class="ml-auto mr-4 mt-3 mb-0">Toronto</h2>
<p class="ml-auto mr-4 mb-0 med-font">Snow</p>
<h1 class="ml-auto mr-4 large-font">-20°</h1>
<p class="time-font mb-0 ml-4 mt-auto">08:30 <span class="sm-font">AM</span></p>
<p class="ml-4 mb-4">Wednesday, 18 October 2019</p>
</div>
</div>
</div>
body {
color: #fff;
overflow-x: hidden;
height: 100%;
background-color: #CFD8DC;
background-repeat: no-repeat
}
.card {
background-image: url("https://i.imgur.com/dpqZJV5.jpg");
background-size: cover;
width: 600px;
height: 350px;
border-radius: 20px;
box-shadow: 0px 8px 16px 4px #9E9E9E;
margin-top: 50px;
margin-bottom: 50px
}
.time-font {
font-size: 50px
}
.sm-font {
font-size: 18px
}
.med-font {
font-size: 28px
}
.large-font {
font-size: 60px
}