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;
}