Hey, I am trying to get the tribute page done but I keep running into the same issues:
- 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.
index.html =
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="tStyles.css">
<title>Eiichiro Oda Tribute Page</title>
</head>
<body>
<main id="main">
<h1 id="title">Eiichiro Oda</h1>
<h3>The man who changed the history of manga</h3>
<div id="img-div" class="image-container">
<img src="images/EiichiroOda.webp" alt="Eiichiro Oda standing holding up a his fingers making out the number 32" id="image" class="oda-image">
<div class="caption" id="img-caption">Eiiricho Oda looking cool</div>
</div>
<div class="life">
<p class="life-header bold">Timeline of Eiichiro Oda's life:</p>
<ul id="tribute-info">
<li><span class="bold">1975 -</span> Eiichiro Oda was born</li>
<li><span class="bold">1982 -</span> He won second place prize in "Jun-Nyuusen" when he was 7 years old. This is the same time when eiichiro Oda decided he wanted to become a manga artist.</li>
<li><span class="bold">1992 -</span> Won first place with the manga "Wanted!" in the Tezuka competition.</li>
<li><span class="bold">1993 -</span> wrote the manga "Kami Kara Mirai no Purezento.</li>
<li><span class="bold">1994 -</span> Wrote the Manga Ikki Yako.</li>
<li><span class="bold">1996 -</span> The starting point of One Piece was through Eiichiro Oda's Manga project of Romance Dawn.</li>
<li><span class="bold">1997 -</span> The first edition of One Piece manga was released and became very popular. </li>
<li><span class="bold">1999 -</span> The One Piece Manga was turned into an anime.</li>
<li><span class="bold">2004 -</span> Eiichiro Oda marries Chiaki Inaba. Who he met through the production of One Piece. Chiaki Inaba was the voice actor for the One Piece character Nami.</li>
<li><span class="bold">2006 -</span> Eiichiro and Akira Toriyama(creator of Dragon Ball) Worked together to create a collaboration project of both of their series called "Cross Epoch"</li>
<li><span class="bold">2009 -</span> One Piece Film: Strong Wrold was released.</li>
<li><span class="bold">2010 -</span> With the release of "3D2Y" chapter. Eiichiro Oda declared that the seires is half way complete. </li>
<li><span class="bold">2011 -</span> Eiichiro Oda and Mitsutoshi Shimabukuro(Creator of Toriko). Worked together on a collaboration piece called "One Piece x Toriko".</li>
<li><span class="bold">2014 -</span> Eiichiro Oda does a tribute cover to Masashi Kishimoto(Creator of Naruto). Eiichiro and Masashi were good friends and Eiichiro wanted to congratulate Masashi on the completetion of the Naruto series. </li>
<li><span class="bold">2015 -</span> Eiichiro broke the record for the "Most copies published for the same comic book series by a single author"</li>
<li><span class="bold">2022 -</span> One Piece anime broke 1,000 episodes. </li>
<li><span class="bold">2023 -</span> The realese of the Netflix live action series of One Piece.</li>
</ul>
<div class="qoute-container">
<p class="qoute">"You can't get back what you've lost, What's important now is What is it that you still have."</p>
<p class="qoute-author">--Eiichiro Oda</p>
</div>
</div>
<h3>If you want to learn more about Eiichiro Oda and his accomplishments then visit <a target="_blank" id="tribute-link" href="">Wikipedia Page</a></h3>
</main>
</body>
</html>
styes.css =
* {
padding: 0;
margin: 0;
box-sizing: border-box; /* Add this line for better box sizing */
}
body {
background-color: lightgrey;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 1.6rem;
line-height: 1.5;
text-align: center;
color: black;
}
#main {
/* Ensure the main element contains all other elements */
display: flex;
flex-direction: column;
align-items: center;
}
#title {
/* Describe the subject of the tribute page */
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px; /* Adjust the font size as needed */
font-weight: bold; /* Make it bold */
}
#img-div {
/* Either a figure or div element */
margin: auto;
padding: 30px;
background-color: #fff;
text-align: center;
}
#image {
/* Responsively resize the image */
max-width: 100%; /* Resize relative to parent width */
height: auto; /* Maintain aspect ratio */
display: block; /* Make it a block element */
margin: 0 auto; /* Center horizontally */
}
#img-caption {
/* Describe the image */
padding-top: 5px;
}
#tribute-info {
/* Describe the subject of the tribute page */
font-size: 16px;
padding: 10px; /* Adjust padding as needed */
max-width: 600px;
margin: 10px auto;
}
#tribute-link {
/* Link to an outside site */
text-decoration: none; /* Remove underline */
color: #0073e6; /* Adjust link color as needed */
font-weight: bold; /* Make it bold */
}
Your browser information:
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge:
. Thank you for your Help!!!