Tribute Page - Build a Tribute Page

Hi,

One of the parameters of the check do not want to confirm my code (center #image in its parent). I already tried many things, even copy-pasted code from the example and it still wont work. I also asked my friend that is a developer and he was after an hour of trying just confused why it does not want to work, so … we already spent quite a lot of time on this and we would appreciate some help :slight_smile:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Religion's pamphlet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Barlow+Condensed:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap">
    <link rel="stylesheet" href="styles.css" />
    <title>Religion of The Great Tomb of Nazarick</title>
  </head>
  <body>
    <header>
      <h1 id="title">The Word of Nazari</h1>
      <p id="undertitle">The return of our Overlord is coming,<br> prepare to be able to serve Him!</p>
    </header>
    <main id="main">
      <figure id="img-div">
        <img id="image" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/60017153-bb25-4fae-a8ef-d466fd48eeef/dd916bw-e5415d97-5c45-4b0e-b281-eb39ea6c6337.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzYwMDE3MTUzLWJiMjUtNGZhZS1hOGVmLWQ0NjZmZDQ4ZWVlZlwvZGQ5MTZidy1lNTQxNWQ5Ny01YzQ1LTRiMGUtYjI4MS1lYjM5ZWE2YzYzMzcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.hcw0cGfvUfz0alq-roMa5v6JaCIpsvGWmiMQ606wJdU" alt="Lord Momon's hamlet" />
        <figcaption id="img-caption">Our Overlord Ainz Ooal Gown sees it all, knows it all and rules upon all, maybe as our fellow Momon, maybe as one of His many servants of Nazarick.</figcaption>
      </figure>
      <div>
        <figure id="tribute-info">
          <p>We Nazari are always looking for new members to join our ranks and serve for the good of Nazarick. As such we expect members to act in the interest of the cult. All hail Ainz who humbles us all! You do not need us to have the opportunity to some day benefit Overlord to the point He acknowledges your contribution, but it would not hurt to be an associate of the group that takes it upon itself to better understand His will, deeds and prepares itself to be conquered.</p>
        </figure>
        <div id="q-a">
            <h2 id="q">Who are Nazaris?</h2>
            <div id="a">
              <p>Nazaris are people of intelligent races who wish to become in life and death part of The Great Tomb of Nazarick and serve our undead Lord Ainz Ooal Gown once He returns back to Earth. He still has to be born and then lost on an currently unknown planet, but sooner or later He should do all that and return to rule over us all.</p>
            </div>
            <h2 id="q">What do Nazaris believe?</h2>
            <div id="a">
              <p>We believe in Ainz Ooal Gown, the only remaining and somewhat deserving god that will sooner or later return back to Earth and conquered us all. Besides that we also believe in teachings of Ainz who will say that even He would be oppressed if He were weak. But He is not. With the help of servants of Nazarick He is the strongest ruler to ever rule, which He will prove by getting here and conquering Earth.</p>
            </div>
            <h2 id="q">What do Nazaris stand for?</h2>
            <div id="a">
              <p>We have to become strong and stronger to be worthy of serving The One Who Rose Above Us. Those still lacking will be able to serve as a part of His undead army, but those of greater strenghts might be worthy of being resurrected or even appointed as His servants. We do so knowing that He works with our best interest in mind, but only as far as we are part of Nazarick. People that are not Nazari in heart or their offsprings might not want to be around when He inevitably returs.</p>
            </div>
            <h2 id="q">Am I a good candidate for Nazari community?</h2>
            <div id="a">
              <p><b>YOU ARE NOT DESERVING!</b> None of us is, but we try our best in order to be someday noticed by His Excellence. So if you also want to get a chance to survive or even serve, this is it. The other open option for you is probably a Happy Farm, He would not want you to go to waste. As fellow undeserving humans we are ready to help you on your yourney or act against those of us who would seek to harm growth ability of other members.</p>
            </div>
            <h2 id="q">How do I join?</h2>
            <div id="a">
              <p>If you want to become part of Nazari community, write to us and we will let you know how to become part of us, where to get more material on the topic, what are the current revelations, discussions etc. You can find our address on the bottom of this page.</p>
            </div>
        </div>
        <figure id="tribute-info">
          <p>Tales of His conquests were archived in tales of Overlord, while there is also a lot of other material as well as <a id="tribute-link" href="https://overlordmaruyama.fandom.com/wiki/Ainz_Ooal_Gown" target="_blank">TLDR</a>. You can always study on your own, but as a single word can form many songs to praise His name, so a tale can spur many believes of what He seeks the most. You would do well to avert your eyes from such under-researched paths and let the group guide you towards deeper understanding. We are not 'be all end all', but many lives will be exhausted to find the interpretation of His will that will let us survive and serve in the wake of His return.</p>
        </figure>
      </div>
    </main>
    <hr>
    <footer>
        <div class="address-div">
        <address>
          Ainz Ooal Gown<br />
          Mayor's house<br />
          E-Rentel<br />
          Sorcerer Kingdom
          <p>*Use only if you are a former member of Ainz Ooal Gown guild. Do care to contact Him personally, His faithful servant in charge of His bureaucracy might kill you otherwise.</p>
        </address>
        </div>
        <div class="address-div">
        <address>
         Name<br />
          Address<br />
          Code & City<br />
          Country
        </address>
        </div>
      </footer>
  </body>
</html>
html {
  font-family: Roboto, sans-serif;
}

body, #image, #img-div {
  margin: 0 auto;
}

body {
  max-width: 800px;
  color: rgb(255, 200, 100);
  text-shadow: 0 0 1px black;
  background-color:rgb(125, 0, 50);
}

/* Header */

header {
  text-align: center;
  color: rgb(255, 200, 100);
  border: 7px solid rgb(255, 200, 100);
  margin: 7px;
}

#title {
  margin: 25px 0 5px 0;
  font-size: 37px;
  font-weight: 800;
}

#undertitle {
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  margin: 0 0 25px 0;
}

/* MAIN */

#main {
  text-align: justify;
}

a {
  color: rgb(255, 200, 100);
  text-decoration: none;
  font-weight: 700;
  text-shadow: 0 0 3px;
}

a:hover {
  text-shadow: 0 0 5px rgb(225, 0, 0);
}

b {
  font-weight: 600;
}

#img-div {
  max-width: 600px;
  border-top: 5px solid;
  padding: 10px 0 0 0;
}

#image {
  display: block;
  max-height: 500px;
  max-width: 100%;
  border: 6px solid rgba(255, 200, 100, 0.5);
  transition: transform 300ms, border 250ms, box-shadow 250ms;
}

#image:hover {
  transform: scale(1.1);
  border: 6px solid rgba(255, 200, 100, 0.4);
  box-shadow: 0px 0px 12px 7px;
}

#img-caption {
  font-family: Barlow Condensed;
  font-size: 18px;
  margin: 10px 25px 20px;
}

#tribute-info {
  font-weight: 500;
  margin: 0 70px;
  border-top: 5px solid;
  border-bottom: 5px solid;
}

#tribute-info > p {
  margin: 20px 25px;
  
}

#q-a {
  font-family: Barlow Condensed;
  margin: 20px 30px;
}

#q {
  font-size: 25px;
  margin: 0 0 0 10px;
}

#a > p {
  font-size: 20px;
  margin: 10px 0 20px;
}

/* FOOTER */

footer {
  margin: 10px 50px;
  padding: 0 50px;
}

.address-div {
  box-sizing: border-box;
  float: left;
  width: 49.9%;
  font-family: Barlow Condensed;
  font-size: 19px;
  text-align: center;
  margin: 20px 0 30px;
  max-width: 300px;
  min-width: 250px;
}

address > p {
  font-family: Roboto;
  font-size: 9px;
  margin: 10px 0 0;
}

hr {
  border: 3.5px solid rgb(255, 200, 100);
  background-color: rgb(255, 200, 100);
  margin: 7px 7px 0;
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

if you remove the border to the image it passes

or you can use box-sizing: border-box;

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