Tell us what’s happening: Hi, I keep getting the max-width: 100% and the display property of block wrong and it wont accept my code. I’m confused and not sure what the problem is.
Describe your issue in detail here.
Your code so far
<!-- file: index.html -->
<!DOCTYPE HTML>
<html lang="en">
<body>
<head>
<title id="title">Dr. Ova May</title>
</head>
<main id="main">
<div id="heading">
<h1>Dr. Ova May</h1>
<p>The women who saved the world</p>
</div>
<div id="img-div">
<img id="image" width="100%">
<div id="img-caption">Dr. Ova May in her lab</div>
</div>
<h2 id="tribute-info">Here's a time line of Dr. May's life:</h2>
<ul>
<li>1994: Born in Kwanda</li>
<li>2012: Graduated High school</li>
<li>2020: Graduated first in her class at Medical school</li>
<li>2023: Finds the cure for cancer</li>
</ul>
<a href="styles.css" link rel="stylesheet" id="tribute-link" target="_blank">
</main>
<footer>
<p>For more info on her life visit@www.DrOvaMay.com</p>
</footer>
</body>
</html>
You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!
Tell us what’s happening: Hi, I dont understand the display property being blocked in this project. When I add display: blocked on the CSS it says the project has failed. I dont understand why it is failing. It also says the image should be max-width: 100% in #image but when I insert that under #image it says project has failed
Describe your issue in detail here.
Hi, I dont understand the display property being blocked in this project. When I add display: blocked on the CSS it says the project has failed. I dont understand why it is failing. It also says the image should be max-width: 100% in #image but when I insert that under #image it says project has failed
Your code so far
<!-- file: index.html -->
<!DOCTYPE HTML>
<html lang="en">
<body>
<head>
<meta charset="UTF-8">
<title id="title">Dr. Ova May</title>
</head>
<main id="main">
<div id="heading">
<h1>Dr. Ova May</h1>
<p>The women who saved the world</p>
</div>
<div id="img-div">
<img id="image" width="100%">
<div id="img-caption">Dr. Ova May in her lab</div>
</div>
<h2 id="tribute-info">Here's a time line of Dr. May's life:</h2>
<ul>
<li>1994: Born in Kwanda</li>
<li>2012: Graduated High school</li>
<li>2020: Graduated first in her class at Medical school</li>
<li>2023: Finds the cure for cancer</li>
</ul>
<a href="styles.css" link rel="stylesheet" id="tribute-link" target="_blank">
</main>
<footer>
<p>For more info on her life visit@www.DrOvaMay.com</p>
</footer>
</body>
</html>
You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!
Thank you so much @Gray.n.Grey . I had tried creating a link but yhe image was not opening but I will try again and come back here if I need any more help.
One thing to note is that it is not possible to use a local (one from your device) picture, unless it is first uploaded to a hosting site.
If you are not worried about sharing it, I use pexels for my photos. Other people have access to use them which is fine because they are not personal photos.