Tribute Page - Build a Tribute Page

HTML-CSS
1

Preformatted text``Preformatted textTell us what’s happening:
Preformatted text* Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.

  • Passed:Your #image should have a height of auto.

  • Failed:Your #image should be centered within its parent.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Dr.Dora Akunyili

Prof. Dora Akunyili

Prof. Dora Akunyili Prof. Dora Nkem Akunyili OFR (14 July 1954 –7 June 2014)

The Lioness Of Drug War.

Early life and education
Dora Edemobi was born in Makurdi,
Benue State, Nigeria to Chief Paul Young Edemobi who hailed from Nanka, Anambra State.

She received her First School Leaving Certificate from St. Patrick's Primary School, Isuofia, Anambra State, in 1966 and had her West African School Certificate Examination (W.A.S.C) at Queen of the Rosary Secondary School Nsukka, Enugu State in 1973, where she graduated with Grade I Distinction consequently.
She won the Eastern Nigerian Government Post Primary Scholarship and the Federal Government of Nigeria Undergraduate Scholarship.
She went on to study pharmacology at the University of Nigeria (U.N.N.), graduating in 1978 and received her Ph.D. in ethnopharmacology in 1985.

Career

She served on several State Government Boards and then was named Supervisory Councilor for Agriculture in a Local Government unit in Anambra State.
She worked as a hospital pharmacist in the University of Nigeria Teaching Hospital. (U.N.T.H), Enugu State.
In 1981, she became a Graduate Assistant in the FaU.NN. of Pharmaceutical Sciences, U.N.N.
In 1990, she became a Senior Lecturer and in 1996, she was made a Consultant Pharmacologist at the College of Medicine.
In 1996, Akunyili became Zonal Secretary of the Petroleum Special Trust Fund (P.T.F), coordinating projects funded by profits from oil in Nigeria's South Eastern States.
In 2001, President Olusegun Obasanjo appointed her the Director-General of the National Agency for Food and Drug Administration and Control (NAFDAC).

Personal life and death

She was married to Chike Akunyili, a medical doctor, and they had six children: Ijeoma, Edozie, Somto, Njideka, Chidiogo and Obumneme. In 2017, one of her children, Njideka Akunyili Crosby was awarded the prestigious Genius Grant from the John D. and Catherine T. MacArthur Foundation.
In 2012, her book: The War Against Counterfeit Medicine: My Story was publishe

Dora Akunyili died at a specialist cancer hospital in India on 7 June 2014 after a two-year battle with uterine cancer.

Her funeral took place on 27 and 28 August, attended by many dignitaries from within Nigeria and beyond, including former President Goodluck Jonathan, and a former Nigerian military ruler General Yakubu Gowon.

Akunyili was laid to rest at Agulu in Anambra State.

For more about Dora Akunyili.Click here.


/**
body {
margin-top: 60px;
}

  • {
    font-family: Helvetica, sans-serif;
    }

main {
background-color: rgb(245, 245, 245);
margin: 30px 5px;
}

#title {
margin-top: 50px;
font-size: 40px;
}

.header {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
}

#img-div {
width: 95%;
margin: 5px auto;
background-color: white;
}

#img-div>#image {
display:block;
margin:20px auto;
width:60%;
max-width:100%;
height:auto;
}

#img-div > #img-caption {
width: 59%;
margin: 5px auto;
padding-bottom: 20px;
}

#tribute-info {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

#tribute-info > h3 {
margin: 50px 0 20px 0;
}

#tribute-info > p{
width: 45%;
margin: 20px auto;
line-height: 30px;
}

q {
margin: 20px 0 0 0;
}

footer {
margin: 20px 0;
}

a {
cursor: pointer;
color: rgb(108, 137, 223);
}

*/

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Challenge: {{challengeTitle}} Tribute Page - Build a Tribute Page

Link to the challenge:

2

Post the entire html and css code formatted properly here. Use the </> button in your editor to do it.

3 
<!DOCTYPE html>  
  <html lang="en">   
    <head>    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css"> 
     <title>
Dr.Dora Akunyili
    </title>
</head>
<body>
    <main id="main">
        <div class="header">
<h1 id="title">  
Prof. Dora Akunyili  
</h1>
</div>  
<div id="img-div">   
<img id="image" alt="Prof. Dora Akunyili" src="https://f5p3e9e4.stackpathcdn.com/wp-content/uploads/2014/06/doraakun-680x365_c.jpg"/>
<figcaption id="img-caption">
  Prof. Dora Nkem Akunyili OFR (14 July 1954 –7 June 2014)
  </figcaption>
  </div>
  <div id="tribute-info">  
<h3 class="title-dora"> The Lioness Of Drug War.</h3> <p>Early life and education<br> Dora Edemobi was born in Makurdi,<br> Benue State, Nigeria to Chief Paul Young Edemobi who hailed from Nanka, Anambra State.<br><br> She received her First School Leaving Certificate from St. Patrick's Primary School, Isuofia, Anambra State, in 1966 and had her West African School Certificate Examination (W.A.S.C) .....
<br><br>   
</p> 
<p id="moreinfo"> For more about Dora Akunyili.<a id="tribute-link" href="https://en.wikipedia.org/wiki/Dora Akunyili" target="_blank">Click here.</a></p> 
 </div>  
      <br>  

  </main>
</body>
</html>  

```body {
  margin-top: 60px;
}

* {
    font-family: Helvetica, sans-serif;
}

main {
    background-color: rgb(245, 245, 245);
    margin: 30px 5px;
}

#title {
    margin-top: 50px;
    font-size: 40px;
}

.header {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
}

#img-div {
    max-width:800px;
    margin: 0 auto;
background-color: #ffffff;
}

 #image {
    display:block;
    margin:20px auto;
   max-width:100%;
    height:auto;
    padding:10px;
}

#img-div > #img-caption {
    width: 59%;
    margin: 5px auto;
    padding-bottom: 20px;
}

#tribute-info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#tribute-info > h3 {
    margin: 50px 0 20px 0;
}

#tribute-info > p{
    width: 45%;
    margin: 20px auto;
    line-height: 30px;
}

q {
    margin: 20px 0 0 0;
}

footer {
    margin: 20px 0;
}

a {
    cursor: pointer;
    color: rgb(108, 137, 223);
}
4

Your code passed the test:

image
image1634×789 88.3 KB

Anyway, try to delete the padding:10px; from #image, and max-width:800px; from the #img-div (set also themargin:0px auto;) to see what is happening.

5

I have tried based on your suggestion but its not passing. it says: Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.
  • Failed:Your #image should be centered within its parent.

Really need some help here

6

Try one more time. Delete the #img-div and #image. Add this one selector:

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}
7

it did not pass. * Your img element should have a display of block.

  • Failed:Your #image should have a max-width of 100%.

  • Passed:Your #image should have a height of auto.

  • Failed:Your #image should be centered within its parent.
    i am worried if the problem is from my stylesheet, but it passed the height set to “auto”.

9

When you specify an id element, like #image, just put it by itself. Like:

#image {
/* blah blah */
}

Let’s take h2 as an example…
When you specify a general element, like h2, you need to tell it which h2’s you mean.
That’s when you have it ‘within’ an id or class,
like:

#img-div > h2 {
/*  blah blah */
}

or

.header > h2 {
/* blah blah */
}

If you just had:

h2 {
/* blah blah */
}

then it would target ALL h2 elements in your HTML document

10 
#img-div>#image{
  max-width:100%;
  height:auto;
  display:block;
  margin:auto;
}

I've tried the above and its not passing it. Is there any other method to use?
11

On this line:
#img-div>#image{

It should only be:
#image{

The rest, below that line, can stay the same.

12

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.