london | may2025 | mohammad | aldali | wireframe

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>

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