add images and add css style

LiyemaMfengwana · LiyemaMfengwana · commit b10cc9144414 · 2026-05-30T12:47:24.000+02:00
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -11,6 +11,8 @@
 
   <link href="https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Inter:wght@400;600&display=swap"
     rel="stylesheet">
+  <meta name="description" content="A website about web development, HTML, CSS, and JavaScript tutorials.">
+
 </head>
 
 <body>
@@ -23,10 +25,11 @@ <h1 class="page-hero">Wireframe</h1>
   <main class="container">
     <!-- Featured card (full width) -->
     <article class="card card--featured">
-      <div class="card__media fake-img" aria-hidden="true">
-        <div class="diag left"></div>
-        <div class="diag right"></div>
-      </div>
+     <div class="card__media">
+  <img
+    src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3"
+    alt="Person reading project documentation">
+</div>
       <div class="card__body">
         <h2 class="card__title">What is the purpose of a README file?</h2>
         <p class="card__summary">
@@ -38,13 +41,15 @@ <h2 class="card__title">What is the purpose of a README file?</h2>
       </div>
     </article>
 
+
     <!-- Two-column row -->
     <div class="grid">
       <article class="card">
-        <div class="card__media fake-img" aria-hidden="true">
-          <div class="diag left"></div>
-          <div class="diag right"></div>
-        </div>
+       <div class="card__media">
+  <img
+    src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3"
+    alt="Person reading project documentation">
+</div>
         <div class="card__body">
           <h2 class="card__title">What is the purpose of a wireframe?</h2>
           <p class="card__summary">
@@ -57,10 +62,11 @@ <h2 class="card__title">What is the purpose of a wireframe?</h2>
       </article>
 
       <article class="card">
-        <div class="card__media fake-img" aria-hidden="true">
-          <div class="diag left"></div>
-          <div class="diag right"></div>
-        </div>
+      <div class="card__media">
+  <img
+    src="https://images.unsplash.com/photo-1555949963-aa79dcee981c"
+    alt="Developer working with Git and code">
+</div>
         <div class="card__body">
           <h2 class="card__title">What is a branch in Git?</h2>
           <p class="card__summary">
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -161,3 +161,9 @@ body{
 }
 
 
+.card__media img {
+  width: 100%;
+  height: 220px;
+  object-fit: cover;
+  display: block;
+}

Original file line number	Diff line number	Diff line change
`@@ -161,3 +161,9 @@ body{`
`161`	`161`	`}`
`162`	`162`
`163`	`163`
	`164`	`+.card__media img {`
	`165`	`+ width: 100%;`
	`166`	`+ height: 220px;`
	`167`	`+ object-fit: cover;`
	`168`	`+ display: block;`
	`169`	`+}`