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="container-1 d-flex flex-row">
<div>
<h1 class="heading-1">K.L.Rahul</h1>
<p class="paragraph-1">Kannur Lokesh Rahul(born 18 April 1992),commonly known as KL Rahul,ia an Indain international cricketer who plays...more</p>
</div>
<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/klrahul-img1.png"
/>
</div>
<div class="container-2">
<h1 class="heading-2">IPL Records</h1>
<div class="card-1 d-flex flex-row">
<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/klrahul-img2.png"
/>
<div>
<h1 class="heading-3">KXIP vs RCB</h1>
<p class="paragraph-2">He scored an unbeaten 132 off just 69 balls against Royal Challengers Bangalore...more</p>
</div>
</div>
<h1 class="heading-4">videos</h1>
<div class="container-3 d-flex flex-row">
<div>
<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/klrahul-img3.png" class="img"
/>
<p class="paragraph-3">KL Rahul hits 337 for Karnataka</p>
</div>
<div>
<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/klrahul-img4.png" class="img"
/>
<p class="paragraph-3">Incredible innings by KL Rahul</p>
</div>
<div>
<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/klrahul-img5.png" class="img"
/>
<p class="paragraph-3">Singlehanded win by KL Rahul</p>
</div>
</div>
<div class="button">
<a href="https://en.wikipedia.org/wiki/KL_Rahul">
<button class="btn btn-primary "> View more</button>
</a>
</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");
.container-1 {
background-color: #fb4e71;
height:25vh;
color:#ffffff;
padding:15px;
margin:1px;
}
.heading-1{
color:#ffffff;
font-family:"Roboto";
font-size:28px;
font-weight:bold;
}
.paragraph-1{
color:#ffffff;
font-size:14px;
font-family:"Roboto";
}
.container-2{
background-color: #e6f6ff;
background-size:cover;
height:75vh;
padding:20px;
font-family:"Roboto";
margin:1px;
}
.heading-2{
font-size:20px;
font-weight:bold;
}
.card-1{
background-color:#ffffff;
}
.heading-3{
font-size:20px;
font-weight:normal;
padding:5px;
}
.paragraph-2{
font-size:15px;
padding:5px;
}
.heading-4{
font-size:25px;
padding:5px;
}
.container{
font-family:"Roboto";
}
.paragraph-3{
padding:10px;
font-size:15px;
font-weight:300;
}
.img{
width:170px;
}
.button{
text-align:center;
}
