Hi CCBP friends, Are you are facing problem in solving your assignment 1 of Static Website. I here to help you, I have added my code below. This Code passed all the test cases. have a look at it and then get an idea on how to solve.
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/[email protected]/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-image d-flex flex-column justify-content-end">
<div class="cardcontainer">
<h1 class="mainheading">Foundations</h1>
<p class="desc">Learn Cources that will help you move forward in your career.</p>
<div class="d-flex flex-row flexbox">
<div class="boxcard">
<img src="https://assets.ccbp.in/frontend/static-website/foundations-python-img.png" class="cardimage" alt="" />
<h6>Python</h6>
</div>
<div class="boxcard">
<img src="https://assets.ccbp.in/frontend/static-website/foundations-python-img.png" class="cardimage" alt="" />
<h6>Python</h6>
</div>
</div>
<div class="d-flex flex-row flexbox">
<div class="boxcard">
<img src="https://assets.ccbp.in/frontend/static-website/foundations-python-img.png" class="cardimage" alt="" />
<h6>Python</h6>
</div>
<div class="boxcard">
<img src="https://assets.ccbp.in/frontend/static-website/foundations-python-img.png" class="cardimage" alt="" />
<h6>Python</h6>
</div>
</div>
</div>
</div>
</body>
</html>CSS
.bg-image {
height: 100vh;
background-size: cover;
background-image: url('https://assets.ccbp.in/frontend/static-website/foundations-bg.png');
}
.mainheading {
font-size: 26px;
font-weight: bold;
font-family: Roboto;
color: #323f4b;
}
.desc {
font-size: 13px;
font-family: Roboto;
color: #7b8794;
}
.cardcontainer {
background-color: #ffffff;
border-radius: 20px;
width: 100vw;
height: 80vh;
padding: 10px;
}
.boxcard {
padding: 10px;
text-align: center;
height: 100px;
width: 120px;
border-radius: 20px;
border-color: #323f4b;
border-style: outset;
margin-right: 20px;
margin-bottom: 20px;
}
.cardimage {
height: 50px;
width: 50px;
}