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-1">
</div>
<div class="bg-container-2 d-flex flex-column justify-content-center">
<div class="bg-container-2">
<h1 class="heading-2" >Foundations</h1>
<p1 class="paragraph">Learn cources that will help you move forward in your career</p1>
</div>
<div class="d-flex flex-row justify-content-center">
<div class="bg-container-3">
<img src="https://assets.ccbp.in/frontend/static-website/foundations-python-img.png" alt=""
class="img-2">
<h1 class="heading-1">Python</h1>
</div>
<div class="bg-container-3">
<img src="https://assets.ccbp.in/frontend/static-website/foundations-javascript-img.png" alt=""
class="img-2">
<h1 class="heading-1">Javascript</h1>
</div>
</div>
<div class="d-flex flex-row justify-content-center">
<div class="bg-container-3">
<img src="https://assets.ccbp.in/frontend/static-website/foundations-html5-img.png" alt=""
class="img-2">
<h1 class="heading-1">HTML5</h1>
</div>
<div class="bg-container-3">
<img src="https://assets.ccbp.in/frontend/static-website/foundations-java-img.png" alt=""
class="img-2">
<h1 class="heading-1">Java</h1>
</div>
</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-1{
background-color:#ffffff;
height:50vh;
width:100vh;
background-image:url("https://assets.ccbp.in/frontend/static-website/foundations-bg.png");
}
.bg-container-2{
background-color:#ffffff;
background-size:cover;
font-family:"Roboto";
width:100vh;
height:70vh;
border-top-left-radius:20px;
border-top-right-radius:20px;
}
.bg-container-3{
border:2px solid #cbd2d9;
margin:10px;
border-radius:10px;
}
.img-2{
margin:30px;
height:13vh;
width:15vh;
padding:10px;
}
.heading-1{
font-family:"Roboto";
margin:10px;
font-size:15px;
text-align:center;
font-weight:bolder;
}
.heading-2{
color:#323f4b;
font-family:"Roboto";
font-weight:600;
margin:20px;
text-align:center;
}
.paragraph{
color:#7b8794;
font-family:"Roboto";
margin:20px;
text-align:center;
}