I cant figure out whats wrong with this, ive been stuck on it for a while

HTML-CSS
1 
<main id="main">
  <h1 id="title">Kakarot aka (Goku)</h1>
  <p> Son Goku, born Kakarot, is a Saiyan raised on Earth and the overall main protagonist of the Dragon Ball series</p>
  <div id="img-div">
    <img id="image" alt="Kakarot aka (Goku) image" src="https://cloudedanime.files.wordpress.com/2017/04/dragon-ball-super-84-04-goku-and-gohan.jpg"/>
    <figcaption id="img-caption">Goku standing to the left</figcaption>
  </div>
  <div id="tribute-info">
    <h3>Here's a timeline of Goku's transformation</h3>
    <ul>
      <li><strong>Birth</strong> -the very first form of the legendary super saiyan, frail baby with a pitifully low power level of 2.</li>
       <li>
          <strong>12 years old</strong> - This is the main form that Son Goku was in throughout the first Dragon Ball series. He was stronger than most human fighters, only losing to the most powerful foes like Taopaipai.
          <li>
            <strong>Great Ape</strong> - This is the very first true transformation that Goku went through. Son Goku while in the Great Ape form would receive a 10-fold increase in his power, the ability to generate really powerful blasts from his mouth.
            <li>
              <strong>Pseudo Super Saiyan</strong> - This is the first time the legendary Super Saiyan form showed the tip of the iceberg. Before transforming, Son Goku would release a huge amount of power and become a pseudo form of the much loved Super Saiyan form he would get further down the line.
              <li>
                <strong>Super Saiyan</strong> - I believe this form is what all the Dragon Ball Z fans will think of the moment they are asked what kinds of transformation Son Goku has undergone.  In this legendary Super Saiyan form, Son Goku would receive an increase in power that is 50 times the power level that he possesses before he undergoes the transformation. 
                <li>
                  <strong>Super Saiyan 2</strong> - This form is attained after Son Goku spent some time in the Other World after the defeat of Cell.  While using the Super Saiyan 2 transformation, Goku’s hair would grow spikier and longer than what they were in the base Super Saiyan form. His muscles would also become a lot more defined. His power level would be multiplied by 100 times.
                  <li>
                    <strong>Super Saiyan God</strong> - This form is the main focus of the movie Dragon Ball Z: Battle of Gods.  Son Goku has a power level that far surpasses what he has when he was in the Super Saiyan 3 form. His appearance also receives an upgrade with a slimmer body, darker skin tone, red irises, and red hair that is not as spiky as the other Super Saiyan forms.
                    <li>
                      <strong>Super Saiyan Blue</strong> - This form was attained after Son Goku tried to synchronize his base Super Saiyan form with the Super Saiyan God. It is almost identical to the base Super Saiyan form, but Son Goku’s hair would turn a cyanish-blue color and his aura would also turn into a blue color with some gold mixed in. This form offers Son Goku the kind of power that far surpasses that of the Super Saiyan God form. It can also be powered up even more if Son Goku uses Kaio-Ken.
                      <li>
                        <strong>Ultra Instinct</strong> - The currently most powerful transformation that Son Goku can do. This form allows Goku to be able to completely synchronize his natural drive with his impulses, granting him the full power both offensively and defensively. In this form, Goku’s power far exceeds that of a normal God of Destruction. However, this form is still inaccessible at will by Goku, and it can only be used in a matter of minutes.
    </ul>
    
    <i>“Show them what a Saiyan is made of!”</i> <br><br>
    <i>-- Goku</i>
  </div>
  <h5>To learn more about Goku's transformation click this link <a id="tribute-link" target="_blank" href="https://saiyanstuff.com/blogs/news/complete-timeline-order-goku-forms-transformations/">Saiyan Stuff</>.
  </h5>
      </main>

#main {
max-width: 100%;
max-height: 100%;
margin: 30px auto;
padding: 15px;
background-color: #dddddd;
border-values: 5px;
}

#title{
text-align: center;
}

#main > p {
text-align: center;
}

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

#image {
display: block;
max-width: 100%;
padding-bottom: 10px;
}

#tribute-info {
max-width: 600px;
margin: 0 auto;
}

#tribute-info > h3 {
text-align: center;
}

#tribute-info > ul li {
margin-bottom: 10px;
line-height: 30px
}

h5 {
text-align: center;
}

type or paste code here

these are the problems that I’m running into
-Your img element should have a display of block .

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

Hi,

Please share your code, we can’t help you without seeing it to check it.

Also could you explain in more detail what you are stuck on? Which user story isn’t passing or what code are you struggling to implement?

1 Like
3

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

1 Like
5

how do i share my code on here, sorry this is my first time on here

6

Okay,

I forgot to explain this part so that’s on me sorry.

Please highlight your code and press the </> button to format it so it is more readable.

This gif explains how to do this or the alternative, adding backticks.

Glad you’re having fun with the project subject though!

1 Like
7

thank you!
and these are the problems that I’m running into
-Your img element should have a display of block .

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

Your img element should have a display of block
Your #image should have a max-width of 100%
Your #image should be centered within its parent.



<main id="main">
  <h1 id="title">Kakarot aka (Goku)</h1>
  <p> Son Goku, born Kakarot, is a Saiyan raised on Earth and the overall main protagonist of the Dragon Ball series</p>
  <div id="img-div">
    <img id="image" alt="Kakarot aka (Goku) image" src="https://cloudedanime.files.wordpress.com/2017/04/dragon-ball-super-84-04-goku-and-gohan.jpg"/>
    <figcaption id="img-caption">Goku standing to the left</figcaption>
  </div>
  <div id="tribute-info">
    <h3>Here's a timeline of Goku's transformation</h3>
    <ul>
      <li><strong>Birth</strong> -the very first form of the legendary super saiyan, frail baby with a pitifully low power level of 2.</li>
       <li>
          <strong>12 years old</strong> - This is the main form that Son Goku was in throughout the first Dragon Ball series. He was stronger than most human fighters, only losing to the most powerful foes like Taopaipai.
          <li>
            <strong>Great Ape</strong> - This is the very first true transformation that Goku went through. Son Goku while in the Great Ape form would receive a 10-fold increase in his power, the ability to generate really powerful blasts from his mouth.
            <li>
              <strong>Pseudo Super Saiyan</strong> - This is the first time the legendary Super Saiyan form showed the tip of the iceberg. Before transforming, Son Goku would release a huge amount of power and become a pseudo form of the much loved Super Saiyan form he would get further down the line.
              <li>
                <strong>Super Saiyan</strong> - I believe this form is what all the Dragon Ball Z fans will think of the moment they are asked what kinds of transformation Son Goku has undergone.  In this legendary Super Saiyan form, Son Goku would receive an increase in power that is 50 times the power level that he possesses before he undergoes the transformation. 
                <li>
                  <strong>Super Saiyan 2</strong> - This form is attained after Son Goku spent some time in the Other World after the defeat of Cell.  While using the Super Saiyan 2 transformation, Goku’s hair would grow spikier and longer than what they were in the base Super Saiyan form. His muscles would also become a lot more defined. His power level would be multiplied by 100 times.
                  <li>
                    <strong>Super Saiyan God</strong> - This form is the main focus of the movie Dragon Ball Z: Battle of Gods.  Son Goku has a power level that far surpasses what he has when he was in the Super Saiyan 3 form. His appearance also receives an upgrade with a slimmer body, darker skin tone, red irises, and red hair that is not as spiky as the other Super Saiyan forms.
                    <li>
                      <strong>Super Saiyan Blue</strong> - This form was attained after Son Goku tried to synchronize his base Super Saiyan form with the Super Saiyan God. It is almost identical to the base Super Saiyan form, but Son Goku’s hair would turn a cyanish-blue color and his aura would also turn into a blue color with some gold mixed in. This form offers Son Goku the kind of power that far surpasses that of the Super Saiyan God form. It can also be powered up even more if Son Goku uses Kaio-Ken.
                      <li>
                        <strong>Ultra Instinct</strong> - The currently most powerful transformation that Son Goku can do. This form allows Goku to be able to completely synchronize his natural drive with his impulses, granting him the full power both offensively and defensively. In this form, Goku’s power far exceeds that of a normal God of Destruction. However, this form is still inaccessible at will by Goku, and it can only be used in a matter of minutes.
    </ul>
    
    <i>“Show them what a Saiyan is made of!”</i> <br><br>
    <i>-- Goku</i>
  </div>
  <h5>To learn more about Goku's transformation click this link <a id="tribute-link" target="_blank" href="https://saiyanstuff.com/blogs/news/complete-timeline-order-goku-forms-transformations/">Saiyan Stuff</>.
  </h5>
      </main>

#main {
  max-width: 100%;
  max-height: 100%;
    margin: 30px auto;
  padding: 15px;
  background-color: #dddddd;
    border-values: 5px;
}

#title{
  text-align: center;
}

#main > p {
  text-align: center;
}

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

#image {
  display: block;
  max-width: 100%;
  padding-bottom: 10px;
}

#tribute-info {
  max-width: 600px;
  margin: 0 auto;
}

#tribute-info > h3 {
  text-align: center;
}

#tribute-info > ul li {
  margin-bottom: 10px;
  line-height: 30px
}

h5 {
  text-align: center;
}
1 Like
9

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