I finished the project, however, I want to improve my skills and make my project look cleaner. I would like to know how to put my image in a big white box with the text describing the image. I tried using sections and divs but couldn’t get the desired result. Does anyone know how ??
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title"><bold>Chainsaw Man</bold></h1>
<p>Neighbourhood friendly Chainsaw Man</p>
<div id="img-div" class="block">
<img id="image" src="https://www.anime-internet.com/content/images/2022/05/chainsaw-man-81-1024x576-2.jpg" >
<div id="img-caption">Chainsaw Man beating the villainous Katana Man</div>
<p id="tribute-info"><a id="tribute-link" href="https://chainsaw-man.fandom.com/wiki/Chainsaw_Man_Wiki" target="_blank">Chainsaw Man's History</a></p>
</div>
</main>
</body>
</html>
/* file: styles.css */
body {
background-color:rgb(255,255,0);
color: rgb(0,0,0);
text-align:center;
width:100%;
height:10%;
display:block;
}
.block{
background-color:rbg(255,255,255);
margin-left:auto;
margin-right:auto;
}
img {
max-width:100%;
height:auto;
display:block;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:105.0) Gecko/20100101 Firefox/105.0
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge: