Need help with my first html project

HTML-CSS
1

Hi guys,

currently I am working on my first project and struggling with it. My head is burning and can´t solve the problem.

Can someone help me, please?

Here it is:

https://codepen.io/freeCodeCamp/pen/MJjpwO

html, body{
  text-align: center;
  min-width: 260px;
}
#main{
  margin: 30px auto;
  padding: 15px;
  border: 0px solid;
  border-radius: 5px
}

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

#img-div{
  margin: -5px;
  margin-top: 20px;
  width: 100%
  border: 5px solid white;
}

#img-caption{
  margin:15px;
}

#headline{
  margin-top: 15px;
  text-align: left;
}

ul{
  max-width: 550px;
  margin: 0 auto;
  text-align: left;
}

li{
  margin: 10px;
}

q{
  font-style: italic;
}

! :slight_smile:

2 
<!DOCTYPE html>

<div id="main"
  <h1 id="title">The life of Richard Dean Anderson</h1> 

<div id="img-div">
  <img id="image" src="https://www.themoviedb.org/person/26085-richard-dean-anderson?language=de" alt="Richard Dean Anderson>
 <div id="img-caption">
    Richard Dean Anderson as he was playing "Colonel Jack O´Neill"
    </div>
    <div id="tribute-info">
     <h3> Here are some personel details about Richard Dean Anderson:</h3>
     <ul>
       <li><b> Born on the 23th of January,                    1950 in Minneapolis</b>
       <li><b> He began his television career                  in 1976, playing Dr. Jeff Webber                in the American soap-opera                      series ´General Hospital´</b>
       <li><b> Then roses as the lead actor in                the televion series ´MacGyver´                  between 1985 and 1992 </b>
       <li><b> But he became famous in the                    series ´Stargate SG1´ from 1997                until 2005 </b>
       <li><b> In 2011 he was playing in some                  episodes of 'Farily Legal´ </b>
       <li><b>Today he is actively involved in               environmental protection and is a               member of the Sea Shepherd                     Conservation Society </b>
     </ul>
     <p><q> I´m not big on reading directions.             I can´t do that. I´m just not from             that world.</q> -- Richard Dean                 Anderson about yourself </p>
     </div>
    <p> You can read more about his biography <a id="tribute-link" href="https://en.wikipedia.org/wiki/Richard_Dean_Anderson" target="_blank">Click here</a></p>
</body>
3

What is your problem?

1 Like
4

Hi Phillip

I have two problems:

1.) I can´t change the size and colour of the headline:

The life of Richard Dean Anderson

When I open it looks like smaller and thinner.

2.) I can´t see the photo, which I put into the code. Those with the link "themovidb.org … and the discprition below.

5

You provided with us an empty codepen link. Can you post the real one?

6

Yes, for sure. I did it already one houre before. Check my second post, please. I can see the whole quellcode there…

7

Hi Phillip and @everyone:

I registrated on the site and know you and other users should see my work:

https://codepen.io/Bulgaria/pen/PgLRba

Please, help me. I am struggling with the h1 (it is too small compared to the rest of the content) and the img-div (I can´t see the picture and don´t find the mistake in the code)

:wink:

8

You need a closing bracket on your first div tag:

<div id="main">

You need a closing quotation mark on your img’s alt attribute:

alt="Richard Dean Anderson"

Your image won’t show because the URL in its source attribute points to a normal page, not to an image. Try:

src="https://image.tmdb.org/t/p/w600_and_h900_bestv2/w9Wi0OUEFGy9vMUpiZjj9GLzpag.jpg"

Also, the top of you page is being cut off because your #main’s top margin is -40px.

So, make sure you’re closing all tags/strings. The html code displaying on the page is a giveaway that some tag has not been closed properly.