HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body>
<div class="bg-container d-flex flex-column justify-content-end">
<div class="bg-card">
<h1 class="heading-1">NEWS OF THE DAY</h1>
<h2 class="heading-2">iB Cricket announces world's first Virtual Reality Cricket League</h2>
<p class="paragraph">iB Cricket and Viu together have announced the World's first virtual reality cricket league featuring 12 international cricketers,who will be completing against each other for the iB Cricket Super Over League title in Mumbai.Iconic cricketers like Virender Sehwag,Suresh Raina,Brendom McCullum will be competing in the league. </p>
<button class="button">Read more</button>
</div>
</div>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");
.bg-container{
background-image:url(" https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/newsbg.png");
height:100vh;
background-size:cover;
}
.bg-card{
background-color:#ffffff;
border-top-left-radius:20px;
border-top-right-radius:20px;
padding:20px;
}
.heading-1{
color:#7b8794;
font-family:"Roboto";
font-size:15px;
}
.heading-2{
color:#323f4b;
font-family:"Roboto";
font-size:25px;
}
.paragraph{
color:#7b8794;
font-family:"Roboto";
font-size:12px;
}
.button{
color:#ffffff;
background-color:#323f4b;
border-radius:7px;
font-size:12px;
padding:5px;
border-radius:7px;
width:100px;
}
