From ffb9dc8fbd8b123bbf0c59aca84df48c5acba87f Mon Sep 17 00:00:00 2001
From: Mohammad Al-Dally <mohammadal-dally@MacBook-Air-Mohammad.local>
Date: Wed, 14 May 2025 11:14:15 +0100
Subject: [PATCH] update html and css for wireframe structure and style

---
 Wireframe/index.html | 41 ++++++++++++++++++++++++++++++++++-------
 Wireframe/style.css  |  4 ++++
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e53..89fa9935 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,23 +10,50 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        “A wireframe is a basic visual guide used </br>to plan the layout and structure of a webpage or app. </br>It shows the placement of elements like headers,</br>
+         buttons, and content without focusing on colors or design details.”
       </p>
     </header>
     <main>
+      
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="https://i.postimg.cc/Mp4rrW9T/image.jpg" alt=" pic of drown wireframe" />
+        <h2>wireframe</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          “A wireframe is a basic visual guide used </br>to plan the layout and structure of a webpage or app. </br>It shows the placement of elements like headers,</br>
+         buttons, and content without focusing on colors or design details.”
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.productplan.com/glossary/wireframe/"><span>Read more</span></a>
       </article>
+      <section>
+      <article>
+        <img src="https://i.postimg.cc/QdC3NWt5/image.jpg" alt=" pic about example of html5_semantic_elements" />
+        <h2>semantic html</h2>
+        <p>
+          Semantic HTML uses meaningful tags <strong>(like header, article, footer)</strong> to describe the structure and purpose of web content.
+            It improves accessibility, SEO.
+        </p>
+        <a href="https://www.w3schools.com/html/html5_semantic_elements.asp"><span>Read more</span></a>
+      </article>
+    </section>
+    <section>
+      <article>
+        <img src="https://i.postimg.cc/ZKS6L0pH/image.jpg" alt=" first-child pic" />
+        <h2>first childe</h2>
+        <p>
+          :first-child is a CSS pseudo-class that targets the first child element inside its parent.
+        </p>
+        <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child"> <span>Read more</span></a>
+      </article>
+    </section>
+    
+     
+      
+     
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        this changes was by Mohammad Aldali.
       </p>
     </footer>
   </body>
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c..bf8f889a 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -39,6 +39,7 @@ a {
 img,
 svg {
   width: 100%;
+  height: 400px;
   object-fit: cover;
 }
 /* ====== Site Layout ====== 
@@ -87,3 +88,6 @@ article {
     grid-column: span 3;
   }
 }
+header{
+  text-align: center;
+}
\ No newline at end of file