Responsive Web Design Projects - Build a Tribute Page

HTML-CSS
1

i got a lot of eror, howewer i think i did type correct but it does not work… please help me

  • You should have a main element with an id of main .

  • Failed:Your #img-div, #image, #img-caption, #tribute-info, and #tribute-link should all be descendants of #main.

  • Your img element should have a display of block .

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

  • Your #image should have a height of auto .

     **Your code so far**

/* file: index.html */
<style>
 body {
   background-color: black;
   color: white;
   font-family: calibri;
 }
</style>



<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id="main"> 
 <h1 id="title">Vegeta - the true underog</h1>


<div id="img-div">
 <a id="tribute-link" target="_blank" href="https://www.youtube.com/watch?v=MqmKlo6Gj84">
 <img id="image" src="https://cdnuploads.aa.com.tr/uploads/Contents/2021/08/11/thumbs_b_c_8fe61e9f4fdf15a13e895a102669f301.jpg" alt="Vegeta - the true underog" width="204" height="204">
 </a>
   
 <figcaption id="img-caption"> 
Fatih Terim 4 Eylül 1953 tarihinde Adana'da doğdu. Fakir bir ailenin çocuğu olan Terim, babasıyla birlikte pek çok farklı işlerde çalışmıştır. Futbol kariyerine Adana Demirspor'da kaleci olarak başlamıştır. 1974 yılında 1 milyon 650 bin liraya Galatasaray'a transfer olmuştur.</figcaption>
</div>
 </div>
<p id="tribute-info">
 
 <b>Fatih Terim ve KAzandırdığı Kupalar</b>
 <ul>
   <li>8 lig</li>
     <li>3 TSYD Kupası</li>
     <li>3 Türkiye Kupası</li>
     <li>2 Cumhurbaşkanlığı Kupası</li>
</ul>
</p>
</div>

/* file: styles.css */

#img-caption
{
 width: 400px;
}
#image
{
 max-width: 1004;
height: auto;
 display: block;
}

   **Your browser information:**

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

Challenge: Responsive Web Design Projects - Build a Tribute Page

Link to the challenge:

2

First tip: when posting longer blocks of code, please take the time to indent the code properly. This will allow people to help you faster.

3

How did you have <script> tag when you are not asked to use it? :thinking:

5

it was for a test control

6

Let’s start by looking at these 3 test conditions

  • Your img element should have a display of block .
  • Your #image should have a max-width of 100% .
  • Your #image should have a height of auto .

What is the max-width of your #image in this css code?

{
 max-width: 1004;
height: auto;
 display: block;
}

If the #image height needs to be auto, why is it 204 in the html?

<img id="image" src="https://cdnuploads.aa.com.tr/uploads/Contents/2021/08/11/thumbs_b_c_8fe61e9f4fdf15a13e895a102669f301.jpg" alt="Vegeta - the true underog" width="204" height="204">

And as others have said, please indent your code neatly. It is hard to help when your code is hard to read, and harder for you to error check it.

This article may be useful to you.

7

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