Tell us what’s happening:
Describe your issue in detail here.
Any of you have any advice on how to fix it?
**Your code so far**
/* file: index.html */
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<style>
body {
background-color: black;
color: white;
font-family: calibri;
}
</style>
<main id="main">
<h1 id="title"> Prince Stolas </h1>
<div id="img-div">
<a id="tribute-link" target="_blank" href="https://youtu.be/rcp3tZ3XFyQ">
<img id="image" src="https://pbs.twimg.com/media/FHSJT00VQAI25QP.jpg" alt="Picture of Vegeta" img { max-width: 100%; height: auto; }>
</a>
<br>
<figcaption id="img-caption"> Stolas is a Goetic Prince of Hell and a major supporting character in Helluva Boss. He is the father of Octavia and the husband of Stella. </figcaption>
</div>
<p id="tribute-info"> <b>Stolas abilites:</b>
<ul>
<li> Demon transformation </li>
<li> Petrification </li>
<li> Telekinesis </li>
</ul>
</p>
</div>
/* file: styles.css */
body {
font-family: Arial;
}
h1 {
text-align: center;
font-size: 65px;
text-transform: uppercase;
#image
{
display:block;
max-width: 100%;
height: auto;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.115 Safari/537.36 OPR/88.0.4412.85
Challenge: Responsive Web Design Projects - Build a Tribute Page
Link to the challenge: