Tell us what’s happening:
Describe your issue in detail here.
Hello guys, I’ve been stuck here for a while, kindly help.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wangari Maathai</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">Wangari Maathai</h1>
<div id="img-div">
<img id="image"></img>
<figcaption id="img-caption">Mother Nature</figcaption>
<a id="tribute-info">The first African woman to receive the Nobel Peace Prize</a>
<p>For more info about<a id="tribute-link" target="_blank" href="https://wangarimaathai.com"> Wangari Maathai</a> click the link</p>
<a href-"https://italiantrulli.com"><img src="pic_wangarimaathai.jpg" alt="Wangari Maathai" class="center"></a>
<legend>
Below is a biography of Wangari Maathai
</legend>
<h2>1940</h2>
<p>-Born in Nyeri, Kenya</p>
<h2>1964</h2>
<p>She obtained her first degree in Biological Sciences from Mount St. Scholastica College in Atchison<p>
<h2>1964</h2>
<p>She obtained a Master of Science degree from the University of Pittsburgh</p>
<h2>1971</h2>
<p> Anatomy, University of Nairobi</p>
<h2>1976</h2>
<p>She introduced the idea of community-based tree planting</p>
<h2>2005</h2>
<p>She was appointed Goodwill Ambassador to the Congo Basin Forest Ecosystem by the eleven Heads of State in the Congo region</p>
<h2>2011</h2>
<p>Died at the age of 71</p>
</div>
</main>
</body>
</html>
Could you explain a little more about what you’re having difficulty with exactly please?
Your code passes all but one of the tests.
Your #image should be centred within the #img-div. That’s easy enough to do by adding the appropriate margin property to #image.
I’m a little confused why you have an #image element which isn’t an image however?
You have a separate img element further down…
… the href has a hyphen which is syntactically invalid. The reason the image won’t display though is that you can’t use locally stored image files for these projects. You’d need to link to it on an image hosting site (e.g. flickr).
I wouldn’t bother with a class of ‘center’ on your img element. You can just apply the appropriate CSS rules directly to the #image selector.
If you want to centre an element, a simple way do to so is:
element {
display: block;
margin: auto;
}
So, you can apply these rules to the #image or img selector in your CSS, instead of creating a separate .center selector and giving the element that class.
As for hosting the image, there are countless image hosting sites which you can sign up to for free and then host your images on. You then give the img element a src attribute with a url pointing to the image on the image hosting site.
I use https://www.flickr.com/ quite often. There are MANY other options however, so you may prefer some other site.
You sign up for a free account with the image hosting site. Then you upload your image to the site. It will then give you a url which you can set as the src for your img.
EXAMPLE (hosted on my flickr): <img src="https://live.staticflickr.com/65535/50576392253_713a1b67b8_b.jpg" width="512" height="384" alt="Badger"/>
Then follow the steps on screen to upload the image.
Then go to your photostream (from the You menu) and click on the image you’ve uploaded.
Click on the share arrow (bottom right) and you’ll get a window like this:
If you click on the Embed tab, you can then copy the html code in the box, which will look something like this:
The only bit you really need from this is the src attribute in the img element. So paste that bit into the src attribute of your img element and your image should now display.
