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">
<h1 class="score">Score: 25/45</h1>
<div class="que-container">
<h1 class="que-num">Question 10</h1>
<p class="que">Which of the following is the content of the HTML paragraph element?</p>
<img src=" https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-website/coding-question-img.png" class="image" />
</div>
<div class="options-container">
<ul class="options-list">
<li class="options">A. HTML heading element</li>
<li class="options">B. HTML paragraph element</li>
<li class="correct-option">C. This is paragraph...</li>
<li class="options">D. None of the given options</li>
</ul>
<div class="d-flex flex-row justify-content-center">
<button class="button">Submit</button>
</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');
.container {
background-color: #875fc0;
background-size: cover;
height: 100vh;
}
.score {
text-align: right;
color: #ffffff;
font-size: 20px;
padding: 10px;
}
.score-card {
color: #ffffff;
font-family: "Roboto";
padding: 10px;
font-weight: bold;
font-size: 18px;
}
.que-container {
background-color: #ffffff;
border-radius: 15px;
font-family: "Roboto";
padding: 20px;
text-align: center;
height: 35vh;
}
.que-num {
font-size: 30px;
color: #1f2933;
text-align: center;
}
.que {
color: #1f2933;
}
.image {
height: 12vh;
}
.options-container {
background-color: #ffffff;
border-radius: 15px;
font-family: "Roboto";
padding: 10px;
height:50vh;
margin-top: 20px;
margin-bottom: 20px;
}
.options-list {
list-style-type: none;
padding: 0px;
}
.options {
color: #323f4b;
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-radius: 5px;
padding: 7px;
margin: 7px;
font-weight: 500;
border-color: #323f4b;
}
.correct-option {
background-color: #875fc0;
color: #ffffff;
border-style: solid;
border-width: 1px;
border-radius: 5px;
padding: 7px;
margin: 7px;
font-weight: 500;
border-color: #323f4b;
}
.button {
background-color: #fbaf00;
color: #ffffff;
border-radius: 10px;
font-family: "Roboto";
width: 98px;
height: 38px;
border-width: 0px;
}
