Tribute Page - Build a Tribute Page

Please take a look at my code snippets. I can’t pass the three mistakes. Also my CSS doesn’t work even when including the style link. Thanks.

  • Failed:Your img element should have a display of block.

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

  • Failed:Your #image should be centered within its parent.

Here is the CSS snippets:

.img-container {
margin: auto;
padding: 30px;
background-color: #002;
}

.JFK-image {
object-fit: contain;
border-radius: 10px;
max-width: 100%;
display: block;
height: auto;
margin: auto;
}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

We need to see all of your HTML and CSS, not just a few snippets. Please paste it all in here using the following method so we can see it and test it correctly.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like

Here are my codes . Thanks for the instructions.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>John F. Kennedy</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600&display=swap">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1 id="title">John Fitzgerald Kennedy</h1>
  <h3>"Eternal Flame, Enduring Legacy: Navigating the Charismatic Chronicles of John F. Kennedy."</h3>
<main id="main">
    <div class="image-container" id="img-div">
      <img src="https://i.ibb.co/JCftRR7/jfk-jackie.webp" alt="jfk-jackie portrait" class="JFK-image" id="image"/>
      <div class="caption" id="img-caption">John and Jacqueline Kennedy at the family compound in Hyannis Port, Mass., 1959, a year before his campaign for the presidency-The New York Post, Nov 2013</div>
    </div>
  <section class="life">
    <p class="life-header bold"> The Life and Achivements of John F. Kennedy</p>
    <ul id="tribute-info">
      <li><span class="bold">Born to Lead (1917): </span>John F. Kennedy, born on May 29, 1917, into a prominent political family, heralding the arrival of a future statesman.</li>
      <li><span class="bold">PT-109 Heroism (1943): </span>In World War II, Lieutenant Kennedy's PT-109 sank, yet his leadership rescued crew members, showcasing courage under fire in the Pacific.</li>
      <li><span class="bold">Congressional Ascent (1947): </span>Elected to the U.S. House of Representatives in 1946, JFK commenced his political journey, representing Massachusetts with charm and charisma.</li>
      <li><span class="bold">Senatorial Rise (1952): </span>Elevated to the Senate in 1952, Kennedy established himself as a progressive voice, advocating for civil rights and healthcare reform.</li>
      <li><span class="bold">Pulitzer Prize (1957): </span>His book "Profiles in Courage" earned JFK a Pulitzer Prize in 1957, highlighting his dedication to political courage and principled leadership.</li>
      <li><span class="bold">Presidential Candidacy (1960):</span>In 1960, Kennedy declared his bid for the presidency, emphasizing a new era of youthful vigor and promise.</li>
      <li><span class="bold">First Televised Debates (1960):</span>The historic televised debates against Nixon showcased Kennedy's poise and eloquence, transforming the political landscape.</li>
      <li><span class="bold">Inauguration (1961): </span>On January 20, 1961, Kennedy delivered his iconic inaugural address, urging citizens to "ask not what your country can do for you but what you can do for your country."</li>
      <li><span class="bold">Bay of Pigs (1961):</span>Facing a crucial early test, Kennedy navigated the Bay of Pigs invasion, learning from setbacks and displaying resilience.</li>
      <li><span class="bold">Cuban Missile Crisis (1962): </span>In the tensest days of the Cold War, JFK's strategic acumen during the Cuban Missile Crisis averted nuclear conflict.</li>
      <li><span class="bold">Space Race Commitment (1962): </span>Kennedy's pledge to land a man on the moon before the end of the decade galvanized NASA, culminating in the Apollo 11 mission in 1969.</li>
      <li><span class="bold">Civil Rights Advocacy (1963): </span>Kennedy passionately addressed civil rights, proposing legislation to end segregation and protect voting rights.</li>
      <li><span class="bold">Berlin Wall Speech (1963):</span>In June 1963, Kennedy delivered his famous "Ich bin ein Berliner" speech, affirming solidarity with West Berlin.</li>
      <li><span class="bold">Nuclear Test Ban Treaty (1963):</span>The Limited Nuclear Test Ban Treaty, signed in 1963, marked a pivotal step towards global nuclear disarmament.</li>
      <li><span class="bold">March on Washington (1963):</span>JFK supported the March on Washington for Jobs and Freedom, where Martin Luther King Jr.delivered his iconic "I Have a Dream" speech.</li>
      <li><span class="bold">Assassination (1963):</span>Tragically, on November 22, 1963, President Kennedy was assassinated in Dallas, Texas, leaving a nation in shock and mourning.</li>
      <li><span class="bold">Legacy of the Peace Corps (1961):</span>Established in 1961, the Peace Corps reflected Kennedy's call for global citizenship and altruism.</li>
      <li><span class="bold">Alliance for Progress (1961):</span>Kennedy's vision for a cooperative and economically interconnected Western Hemisphere led to the Alliance for Progress initiative.</li>
      <li><span class="bold">Equal Pay Act (1963):</span>Kennedy's commitment to gender equality was evident in his signing of the Equal Pay Act, addressing wage disparities.</li>
      <li><span class="bold">Eternal Flame at Arlington (1967):</span>JFK's legacy endures at Arlington National Cemetery, where an eternal flame symbolizes the enduring impact of his transformative leadership.</li>

  </ul>
  <div class="quote-container">
    <p class="quote">"My fellow Americans, ask not what your country can do for you, ask what you can do for your country."</p>
    <p class="quote">--John F. Kennedy</p>
  </div>
</section>
  <h3>Looking for more insights into the life of John F. Kenedy? Please refer to his<a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/John_F._Kennedy"> Wikipedia entry</a>.</h3>
</main>
</body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
}

h1 {
  padding: 20px;
  font-family: 'Arimo', sans-serif;
}

h3 {
  font-size: 20px;
  background-color: #13151f;
  margin: 10px;
  padding: 10px;
  border-radius: 10px;
  color: white; 
}

body {
  background-color: #03050f;
  color: white;
  font-family: 'Arimo', sans-serif;
  text-align: center;
}

.img-container {
  margin: auto;
  padding: 30px;
  background-color: #002;
}

.JFK-image {
  object-fit: contain;
  border-radius: 10px;
  max-width: 100%;
  display: block;
  height: auto;
  margin: auto;
}

.caption {
  padding-top: 5px;
}

.life {
  font-size: 20px;
  padding: 30px;
  max-width: 600px;
  margin: 10px auto;
  background-color: #002;
}

.life-header {
  font-size: 20px;
  font-family: 'Arimo', sans-serif;
  padding: 30px;
  text-align: center;
}

.bold {
  font-weight: bold;
}

li {
  margin: 20px;
}

.quote {
  margin: 30px 30px 5px;
  font-style: italic;
  text-indent: 30px;
}

a {
  color: #99f;
  text-decoration: none; 
}

a:hover {
  text-decoration: underline; 
}

1 Like

Hello!

I notice a small typo in the link. It should be styles. css for the href here.

I like your tribute page.

I hope this helps you.

Wishing you great progress!

Thank you. It finally works.

1 Like

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