Try and Error

Author: JustKenTabata

index.html

@@ -34,7 +34,7 @@ <h1>
     <div>
       <h2>1968</h2>
       <h3>Intel Founded</h3>
-      <!-- Add image -->
+        <img src="img/1.jpg" alt="Intel Founded" />
       <p>
         Robert Noyce and Gordon Moore rename the newly formed company 
         NM Electronics to Intel Corporation, laying the foundation for 
@@ -46,7 +46,7 @@ <h3>Intel Founded</h3>
     <div>
       <h2>1971</h2>
       <h3>First Microprocessor</h3>
-      <!-- Add image -->
+        <img src="img/2.jpg" alt="First Microprocessor"/>
       <p>
         Intel debuts the 4004, the world's first commercial microprocessor, 
         igniting the microprocessor revolution and propelling the future 
@@ -58,7 +58,7 @@ <h3>First Microprocessor</h3>
     <div>
       <h2>1978</h2>
       <h3>8086 Processor</h3>
-      <!-- Add image -->
+        <img src="img/3.jpg" alt="8086 Processor"/>
       <p>
         Launch of the 8086 processor, establishing the x86 architecture 
         that drives countless PCs and servers in the modern era.
@@ -69,7 +69,7 @@ <h3>8086 Processor</h3>
     <div>
       <h2>1985</h2>
       <h3>386 Processor</h3>
-      <!-- Add image -->
+        <img src="img/4.jpg" alt="386 Processor" />
       <p>
         Intel introduces the 386 processor with 32-bit architecture, 
         ushering in a new era of performance and multitasking for 

style.css

@@ -1 +1,68 @@
 /* Add your CSS here */
+body {
+	background-color: #e0e0e0; /* Light gray background for the whole page */
+}
+/* Style for header and hero section */
+header {
+	background-color: #0071c5; /* Intel blue */
+	padding: 32px 0 24px 0;
+	text-align: center;
+}
+
+header div {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 16px;
+}
+
+header img {
+	width: 120px; /* Resize the Intel logo */
+	height: auto;
+	margin-bottom: 12px;
+}
+
+header h1 {
+	font-size: 2.2rem;
+	margin: 0 0 8px 0;
+  color: #fff; /* White heading */
+}
+
+header p {
+	font-size: 1.1rem;
+	max-width: 500px;
+	margin: 0 auto;
+	color: #fff; /* White text for description */
+}
+
+/* Style for timeline cards */
+section {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: 20px;
+	margin: 32px 0;
+}
+section > div {
+	background: #fff;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+	width: 320px; /* Increased width for large screens */
+	padding: 28px; /* Increased padding for more space */
+	text-align: center;
+	transition: box-shadow 0.2s;
+}
+
+section h2 {
+	color: #0071c5; /* Intel blue for year */
+}
+
+section > div:hover {
+	box-shadow: 0 4px 16px rgba(0,0,0,0.15);
+}
+
+section img {
+	width: 300px;
+	height: auto;
+	margin-bottom: 8px;
+}