I added some styling to css

Rawan-Al0-0 · Rawan-Al0-0 · commit 168197597e39 · 2025-02-15T18:23:51.000Z
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -5,29 +5,55 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
     <link rel="stylesheet" href="style.css" />
+    <meta http-equiv="Cache-Control" content="public, max-age=3600"> <!-- Cache for 1 hour.
+    I used chatgpt to help me understand the problem and how to solveit in a simpler way.  -->
+    <meta name="description" content="this page explain: wireframe, README file, and a branch in git.">
+     <!-- I used lighthouse link to explain this more to me-->
+
   </head>
   <body>
     <header>
+      <title>Wireframe</title>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+       we are going to learn a few things.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="placeholder.svg" width="640" height="360" alt="a general image" />
+        <h2>What is the purpose of a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          The README.md file acts as a guide for users and developers, 
+          explaining what the project is, how to set it up, and how to contribute.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.geeksforgeeks.org/what-is-readme-md-file/">Read more</a>
+      </article>
+      <article>
+        <img src="placeholder.svg" width="640" height="360" alt="a general image" />
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>
+          to layout content and functionality on a page which takes into account user needs and user journeys.
+           Wireframes are used early in the development process to establish the basic structure of a page before visual design and content is added
+        </p>
+        <a href="https://www.experienceux.co.uk/faqs/what-is-wireframing/#:~:text=A%20wireframe%20is%20commonly%20used,design%20and%20content%20is%20added.">Read more</a>
+      </article>
+      <article>
+        <img src="placeholder.svg" width="640" height="360" alt="a general image" />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          a pointer to a snapshot of your changes. 
+        </p>
+        <a href="https://www.atlassian.com/git/tutorials/using-branches#:~:text=In%20Git%2C%20branches%20are%20a,branch%20to%20encapsulate%20your%20changes.">Read more</a>
       </article>
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        check these resources for more info:
       </p>
+      <a href="https://www.productplan.com/glossary/wireframe/">wireframe info</a>
+      <a href="https://www.w3schools.com/html/html5_semantic_elements.asp">Semantic HTML info</a>
+      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child">first-child info</a>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -22,14 +22,15 @@ As well as useful links to learn more */
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --line: 1px solid;
-  --container: 1280px;
+  --container: 880px;
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+  text-align: center;
 }
 a {
   padding: var(--space);
@@ -50,7 +51,7 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
+  background: var(--paper);
   bottom: 0;
   text-align: center;
 }
