Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title id="title">Mr. Emmanuel Atat(Emmy Cee)</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Emmy Cee</h1>
      <nav>
      <ul>
        <li><a href="#Academic Accomplishmeents">A. A</a></li>
        <li><a href="#Carrer Accomplishments">C.A</a></li>
      </ul>
      </nav>
    </header>
    <main id="main">
     <h1>Tribute Page</h1>
      <p id="tribute-info">This is a record of Emmanuel's accomplishments and works.</p>
      <div id="img-div">
        <img id="image" src="https://www.facebook.com/photo?fbid=348824907981489&set=a.228482776682370" max-width="100%" height="auto">
        <div id="img-caption">
 <h1 id="img-caption">A foreordained Coder</h1>
        </div>
      </div>  
      <section>
       <ul><li> <h1 id="Academic Accomplishments">Academic Accomplishments</h1></li></ul>
        <p>He started nusery education when he was 3 years old and completed it sucessfuly.
          Started collage 2016/2017 Academic session.   
Got his WEAC certificate from Dominion International Schools year(2023/2024) Academic session.
        </p>
       <ul><li> <h2 id="Carrer Accomplishments">Career Accomplishments</h2></li></ul>
        <p>A student in BYU pathway-connect. A student in COURSERA. Studying computer science in the BYU-Idaho. 
        </p>
      </section>
      <footer>
        <a href="https://www.facebook.com/profile.php?id=100085619460078&sk=about" target="_blank" id="tribute-link">More about Emmanuel</a>
      </footer>
    </main>
  </body>
</html>

/* file: styles.css */
img{
  display: block;
  max-width: 100%;
  height: auto;
  align-items: center;
}
header{
  display: flex;
  background-color: black;
  margin: 0;
  color: white;
  justify-content: space -between;
  align-items: center;
}
body{
  background-color: white;
  font-family: Courier;
  color: black;
  margin: 0;
}
footer{
  color: white;
}

Your browser information:

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

Challenge Information:

Tribute Page - Build a Tribute Page
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page**strong text**

I have problem centering the #image in its parent.

2

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!

3

Create a #image selector, and add margin property to 0 auto within it.

2 Likes
4

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