Changed the Header h1 and p style , font size, to be centered and add a box shadow and borders.

Mona-Eltantawy · Mona-Eltantawy · commit cff05163ae6c · 2026-01-24T14:03:28.000Z
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,8 +8,8 @@
   </head>
 
   <body>
-    <header>
-      <h1>Wireframe</h1>
+    <header class="header">
+      <h1 clas="title">Wireframe</h1>
  <p>
    The skeleton for your website.
  </p>
@@ -30,7 +30,7 @@ <h2>What is the purpose of a README file?</h2>
       </article>
 
       <article> 
-        <img src="https://cdn.sanity.io/images/599r6htc/regionalized/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.png?q=75&fit=max&auto=format&dpr=0.75" alt=" Wireframe"/>
+        <img class="img2" src="https://cdn.sanity.io/images/599r6htc/regionalized/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.png?q=75&fit=max&auto=format&dpr=0.75" alt=" Wireframe"/>
         
         <h2>What is the purpose of a wireframe?</h2>
         <p> The purpose of a wireframe is to create a skeletal blueprint of a digital product (website, app) to define its structure, layout, and functionality before visual design,
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -26,13 +26,36 @@ As well as useful links to learn more */
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
-body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
+.header h1{
+  background: rgba(76, 93, 110, 0.8);
+  width:100%;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  top:0;
+  padding:10px;
+  justify-content: center;
+  text-align: center;
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  font-size: xx-large;
+  font-weight: bold;
+color: white;
+}
+.header p {
+   justify-content: center;
+  text-align: center;
+  font-family: Georgia, 'Times New Roman', Times, serif;
+  font-size: x-large;
+
+  font-weight: bold;
+color: rgb(39, 36, 36);
+}
+ body {
+  background-color: rgb(178, 203, 203);
+  font-family: serif;
+  font-size: medium;
+
 }
 a {
-  padding: var(--space);
+  padding: 4px 4px;
   border: var(--line);
   max-width: fit-content;
 }
@@ -50,9 +73,15 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
+  position: center;
+  display: flex;
   bottom: 0;
   text-align: center;
+  justify-content: center;
+  font-size: medium;
+  border: solid black 1px;
+  border-width: fit-content var(--container);
+  
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -86,4 +115,6 @@ article {
   > img {
     grid-column: span 3;
   }
+  .img2{ grid-column: span2;
+ }
 }
