Packagedaaabattery/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>John F. Kennedy: A Legacy of Leadership</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>John F. Kennedy: A Legacy of Leadership</h1>
    </header>
    <nav>
        <a href="#home">Home</a>
        <a href="#artifact1">Newspaper Article</a>
        <a href="#artifact2">Social Media Post</a>
        <a href="#reflection">Reflection</a>
    </nav>
    <div class="container">
        <!-- Title Page Section -->
        <section id="home">
            <h2>John F. Kennedy</h2>
            <div class="title-image">
                <img src="https://images.foxtv.com/static.fox7austin.com/www.fox7austin.com/content/uploads/2023/07/1280/720/JFK-in-chair.jpg?ve=1&tl=1" alt="John F. Kennedy">
            </div>
            <p class="caption">President John F. Kennedy in his office, demonstrating his calm and composed leadership during challenging times.</p>
            <p>Years in Office: 1961 - 1963</p>
        </section>

        <!-- Artifact 1 Section -->
        <section id="artifact1" class="artifact">
            <h2>Newspaper Article: Apollo 11 Lands on the Moon</h2>
            <p><strong>Date:</strong> July 20, 1969</p>
            <p><strong>Article Title:</strong> One Giant Leap for Mankind: Apollo 11 Lands on the Moon</p>
            <p>A historic event in human history has just occurred, the mission of the Apollo 11 has achieved the goal of landing on the Moon. This was the ultimate achievement of President John F Kennedy’s progressive Executive Programme outlined in his address in 1961 in which the United States pledged itself to sending man to the moon before the decade was out. The story of the first step on the lunar surface by Neil Armstrong reflects the American dream and determination and speaking of Kennedy’s promise has made the United States a leading nation in space exploration. This not only demonstrated the technological advancement in the country but also represents a major accomplishment in the Cold War space race against the Soviet Union.</p>
        </section>

        <!-- Artifact 2 Section -->
        <section id="artifact2" class="artifact">
            <h2>Fake Social Media Post: Cuban Missile Crisis</h2>
            <p><strong>Platform:</strong> Instagram</p>
            <p><strong>Username:</strong> @TheWhiteHouse</p>
            <p><strong>Date:</strong> October 22, 1962</p>
            <img src="https://upload.wikimedia.org/wikipedia/commons/1/12/John_F._Kennedy,_White_House_color_photo_portrait.jpg" alt="JFK addressing the nation">
            <p>@TheWhiteHouse: “In a crucial moment for our nation and the world, President John F. Kennedy addresses the American people about the Cuban Missile Crisis. In a decisive move, JFK announces a naval blockade around Cuba to prevent the Soviet Union from deploying nuclear missiles. This bold action has averted a potential nuclear catastrophe and showcased the strength and resolve of American leadership. #Leadership #ColdWar #JFK”</p>
        </section>

        <!-- Reflection Section -->
        <section id="reflection" class="artifact">
            <h2>Reflecting on JFK’s Legacy</h2>
            <p>Kennedy, John Fitzgerald (JFK) is deemed to have been a great and inspiring president whose administration, despite the short period of his rule, had its achievements and issues. The recent steward of King’s legacy of moon landing, the successful Apollo 11 mission remains a testament to his dream of the United States as a leader in space exploration and fostered unity and pride. While the Cuban Missile Crisis, on the other hand, brings out his prowess in international relations as well as diplomacy, leadership, and conflict solving. During the 1961 disaster, he shows his unrelenting desire to preserve and protect world peace. In total, these artifacts exemplify the impact that JFK had on America’s domestic and foreign policy, making him one of the key players shaping America’s destiny.</p>
        </section>
    </div>
    <script src="script.js"></script>
</body>
</html>

## script.js
// For now, we don't have interactive elements, but this file is ready for future use
console.log("Website for John F. Kennedy's Legacy");

## sebastiansjfkhistoryproject.markdown

      
    Raw
  

              sebastiansjfkhistoryproject.markdown
            
          
    SebastiansJFKHistoryProject

A Pen by Moxena- on CodePen.
License.

  
## style.css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
}

nav {
    background-color: #444;
    padding: 10px;
    text-align: center;
}

nav a {
    color: #fff;
    margin: 0 15px;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

.container {
    padding: 20px;
}

.artifact {
    background-color: #fff;
    margin: 20px 0;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.artifact img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}

.caption {
    color: #555;
    font-size: 0.9em;
}

.title-image {
    text-align: center;
    margin: 20px 0;
}

.title-image img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>John F. Kennedy: A Legacy of Leadership</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<header>
	<h1>John F. Kennedy: A Legacy of Leadership</h1>
	</header>
	<nav>
	<a href="#home">Home</a>
	<a href="#artifact1">Newspaper Article</a>
	<a href="#artifact2">Social Media Post</a>
	<a href="#reflection">Reflection</a>
	</nav>
	<div class="container">
	<!-- Title Page Section -->
	<section id="home">
	<h2>John F. Kennedy</h2>
	<div class="title-image">
	<img src="https://images.foxtv.com/static.fox7austin.com/www.fox7austin.com/content/uploads/2023/07/1280/720/JFK-in-chair.jpg?ve=1&tl=1" alt="John F. Kennedy">
	</div>
	<p class="caption">President John F. Kennedy in his office, demonstrating his calm and composed leadership during challenging times.</p>
	<p>Years in Office: 1961 - 1963</p>
	</section>

	<!-- Artifact 1 Section -->
	<section id="artifact1" class="artifact">
	<h2>Newspaper Article: Apollo 11 Lands on the Moon</h2>
	<p><strong>Date:</strong> July 20, 1969</p>
	<p><strong>Article Title:</strong> One Giant Leap for Mankind: Apollo 11 Lands on the Moon</p>
	<p>A historic event in human history has just occurred, the mission of the Apollo 11 has achieved the goal of landing on the Moon. This was the ultimate achievement of President John F Kennedy’s progressive Executive Programme outlined in his address in 1961 in which the United States pledged itself to sending man to the moon before the decade was out. The story of the first step on the lunar surface by Neil Armstrong reflects the American dream and determination and speaking of Kennedy’s promise has made the United States a leading nation in space exploration. This not only demonstrated the technological advancement in the country but also represents a major accomplishment in the Cold War space race against the Soviet Union.</p>
	</section>

	<!-- Artifact 2 Section -->
	<section id="artifact2" class="artifact">
	<h2>Fake Social Media Post: Cuban Missile Crisis</h2>
	<p><strong>Platform:</strong> Instagram</p>
	<p><strong>Username:</strong> @TheWhiteHouse</p>
	<p><strong>Date:</strong> October 22, 1962</p>
	<img src="https://upload.wikimedia.org/wikipedia/commons/1/12/John_F._Kennedy,_White_House_color_photo_portrait.jpg" alt="JFK addressing the nation">
	<p>@TheWhiteHouse: “In a crucial moment for our nation and the world, President John F. Kennedy addresses the American people about the Cuban Missile Crisis. In a decisive move, JFK announces a naval blockade around Cuba to prevent the Soviet Union from deploying nuclear missiles. This bold action has averted a potential nuclear catastrophe and showcased the strength and resolve of American leadership. #Leadership #ColdWar #JFK”</p>
	</section>

	<!-- Reflection Section -->
	<section id="reflection" class="artifact">
	<h2>Reflecting on JFK’s Legacy</h2>
	<p>Kennedy, John Fitzgerald (JFK) is deemed to have been a great and inspiring president whose administration, despite the short period of his rule, had its achievements and issues. The recent steward of King’s legacy of moon landing, the successful Apollo 11 mission remains a testament to his dream of the United States as a leader in space exploration and fostered unity and pride. While the Cuban Missile Crisis, on the other hand, brings out his prowess in international relations as well as diplomacy, leadership, and conflict solving. During the 1961 disaster, he shows his unrelenting desire to preserve and protect world peace. In total, these artifacts exemplify the impact that JFK had on America’s domestic and foreign policy, making him one of the key players shaping America’s destiny.</p>
	</section>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	// For now, we don't have interactive elements, but this file is ready for future use
	console.log("Website for John F. Kennedy's Legacy");
	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f0f0f0;
	}

	header {
	background-color: #333;
	color: #fff;
	padding: 20px;
	text-align: center;
	}

	nav {
	background-color: #444;
	padding: 10px;
	text-align: center;
	}

	nav a {
	color: #fff;
	margin: 0 15px;
	text-decoration: none;
	}

	nav a:hover {
	text-decoration: underline;
	}

	.container {
	padding: 20px;
	}

	.artifact {
	background-color: #fff;
	margin: 20px 0;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.artifact img {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
	}

	.caption {
	color: #555;
	font-size: 0.9em;
	}

	.title-image {
	text-align: center;
	margin: 20px 0;
	}

	.title-image img {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
	}