Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:
Hi, I really want to ask something I don’t understand on my code. It’s at the “Info source part” (line 42)
When the page is wide enough, the “Info source:” is align left, and the link after is inline with that (just like what I want). But then when I shrinkage the page, the “Info source:” will be apart with each other and the link will go below them. What should I do? I want that even if shrinkage the page, the “Info source:” will stay tight together. I have used but it still works the same

Sorry for my bad english. This page is really far from perfect and I really need someone to help me. I would appreciate your answer
thank you
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Susi Pusjiastuti</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>SUSI PUDJIASTUTI</h1>
    </header>
    <main id="main">
      <div id="tribute-info">
        <figure id="img-div">
        <img id="image" src="https://cdn1.katadata.co.id/media/images/thumb/2016/02/22/2016_02_22-15_33_12_fd7c3214776fd10c6c669d7631e344ab_960x640_thumb.jpg" alt="susi pudjiastuti">
        <figcaption id=img-caption>Susi Pudjiastuti, the adored Fisheries Ministry because of her breakthroughs<figcaption>
      </figure>
      <p>
        Susi Pudjiastuti ialah Menteri Perikanan dan Kelautan tahun 2014 - 2019. Terkenal dengan kebijakan menenggelamkan kapal yang melakukan illegal fishing di perairan Indonesia, beliau berhasil meningkatkan jumlah nelayan di Indonesia sekaligus meningkatkan hasil tangkapan. Selama menjabat sebagai menteri, beliau juga pernah mengalokasikan dana 100 miliar perpulau untuk meningkatkan perekonomian penduduk pulau kecil  
      </p>
      <h3>Kebijakan</h3>
      <p id="kebijakan">
        <ul>
        <li>Peraturan Menteri Kelautan Nomor 2 Tahun 2015 tentang Larangan Penggunaan Alat Penangkapan Ikan Pukat Hela (Trawls) dan Pukat Tarik (Seine Nets).<br>
*Alat-alat tangkap tersebut dinilai dapat merusak lingkungan</li>

<li>Permen KKP No. 56/2016 tentang Larangan Penangkapan dan/atau Pengeluaran Benih Lobster (Panulirus Spp.), Kepiting (Scylla Spp.), dan Rajungan (Portunus Spp.) dari Wilayah Republik Indonesia.<br>
*ekspor benih lobster akan membuat kerusakan ekologi karena permintaan dari luar negeri yang sangat tinggi menyebabkan eksploitasi besar-besaran. Selain itu, ekspor benih lobster juga hanya akan menguntungkan petambak negara lain karena harganya sangat tinggi saat dewasa</li>
      </ul>
     
      <h3>Penghargaan</h3>
      <p id="penghargaan">
      <ul>
        <li>2016 Dinobatkan sebagai Leaders for a Living Planet oleh WWF</li>

<li>2017 merai penghargaan Seafood Champion Award dengan kategori Leadership, karena melalui kepemimpinannya, kesehatan martitim di Indonesia semakin membaik</li>

<li>2017 Penghargaan The Right Man on The Right Place mendapat gelar sebagai The Bravest Indonesia Female Leader dari LensaIndonesia.com</li>
      </p>
      </ul>
      <p>Info source:
      <a href="https://id.wikipedia.org/wiki/Susi_Pudjiastuti" id="tribute-link" target="_blank">https://id.wikipedia.org/wiki/Susi_Pudjiastuti</a>
      </p>
    </main>

  </body>
</html>

/* file: styles.css */
*{
  font-family:Arial, Helvetica, sans-serif;
}
h1{
  background-color: 	#6497b1;
  padding: 20px;
  margin:0;
  width:
}

#image{
  max-width: 100%;
  height: auto; 
}
main{
  background-image: linear-gradient( 115deg, 	#005b96, rgba(106, 136, 206, 0.7) ), url(https://a-z-animals.com/media/2022/11/Atlantic-Ocean.jpg);
  color: white;
  padding-top: 70px;
  padding-bottom: 50px;
  margin-top:0;
}

#tribute-info, #image{
  margin-left: auto;
  margin-right: auto;
  text-align: justify
}
h1, figcaption{
  text-align: center;
}

#tribute-info{
  width: 45%;
  max-width: 600px;
}

#penghargaan{
  margin-bottom: 20px;
}
li{
  margin-bottom: 10px;
}
#last{
  margin-bottom: 30px;
}

a{
  color: yellow;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

You have only add display property with value block in your Image.

3

Yeah, I also found it after the test, thank you. But that’s not the main problem. I really want to modify the info source and its link just like what I have asked earlier. Do you know how to do that?

1 Like
5

Try to create a footer element. and nest info- source to it.

6

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