CodeYourFuture · Ashjz · May 9, 2025 · May 11, 2025 · May 11, 2025 · May 19, 2025
diff --git a/Wireframe/Content/Wireframe_Penpot.webp b/Wireframe/Content/Wireframe_Penpot.webp
diff --git a/Wireframe/Content/git-branches-merge.png b/Wireframe/Content/git-branches-merge.png
diff --git a/Wireframe/Content/readme.png.webp b/Wireframe/Content/readme.png.webp
diff --git a/Wireframe/article.md b/Wireframe/article.md
@@ -0,0 +1,8 @@
+1. What is the purpose of a README file?
+   A README file provides essential information about a project, including what it does, how to install and use it, dependencies, and how to contribute. It's often the first thing users or developers see when they visit your repository, and it helps them understand and get started quickly.
+
+2. What is the purpose of a wireframe?
+   A wireframe is a visual guide or blueprint that represents the layout and structure of a web page or app before it's developed. It focuses on functionality and placement of elements (like buttons, menus, and content areas), helping teams plan and agree on the design before writing any code.
+
+3. What is a branch in Git?
+   A branch in Git is a separate line of development that allows you to work on features, bug fixes, or experiments independently from the main codebase (usually the main or master branch). Once changes are complete, a branch can be merged back into the main project.
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -5,29 +5,62 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
     <link rel="stylesheet" href="style.css" />
+    <meta name="theme-color" content="navy" />
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Q & A</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Take a look at the answers to some common questions about wireframe and their purpose in our articles section.
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="Content/readme.png.webp" alt="Illustration representing a README file" />
+        <h2>README</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          What is the purpose of a README file?
         </p>
-        <a href="">Read more</a>
+        <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" class="button-link" aria-label="Read more about the purpose of a README file">Read more</a>
+      </article>
+      <article>
+        <img src="Content/Wireframe_Penpot.webp" alt="Low-fidelity wireframe example" />
+        <h2>Wireframe</h2>
+        <p>
+          What is the purpose of a wireframe?
+        </p>
+        <a href="https://www.productplan.com/glossary/wireframe/" class="button-link" aria-label="Read more about the purpose of a wireframe">Read more</a>
+      </article>
+      <article>
+        <img src="Content/git-branches-merge.png" alt="Diagram showing a Git branch and merge flow" />
+        <h2>Git</h2>
+        <p>
+          What is a branch in Git?
+        </p>
+        <a href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches" class="button-link" aria-label="Read more about branches in Git">Read more</a>
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>&copy; 2025 MR_ASH. All rights reserved.</p>
+      <div class="social-media">
+        <a href="https://facebook.com" alt="facebook" target="_blank" aria-label="Visit our Facebook page">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook"
+            viewBox="0 0 16 16">
+            <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />    
+            </svg>
+        </a> |
+        <a href="https://x.com" alt="X" target="_blank" aria-label="Visit our X page">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-twitter-x"
+            viewBox="0 0 16 16">
+            <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
+            </svg>
+        </a> |
+        <a href="https://instagram.com" alt="instagram" target="_blank" aria-label="Visit our Instagram page">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram" viewBox="0 0 16 16">
+            <path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
+          </svg>
+        </a>
+      </div>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,89 +1,164 @@
-/* Here are some starter styles
-You can edit these or replace them entirely 
-It's showing you a common way to organise CSS 
-And includes solutions to common problems 
-As well as useful links to learn more */
-
-/* ====== Design Palette ======
- This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
- At work, a designer will give these to you based on the corporate brand, but while you are learning
- You can design it yourself if you like
- Inspect the starter design with Devtools
- Click on the colour swatches to see what is happening
- I've put some useful CSS you won't have learned yet
- For you to explore and play with if you are interested
- https://web.dev/articles/min-max-clamp
- https://scrimba.com/learn-css-variables-c026
-====== Design Palette ====== */
-:root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 system-ui;
-  --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
-  --container: 1280px;
-}
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
 body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
-}
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  font-family: Arial, sans-serif;
+  background: AliceBlue;
+  color: Black;
 }
-img,
-svg {
+
+header {
   width: 100%;
-  object-fit: cover;
+  text-align: center;
+  padding: 15px;
+  background: MidnightBlue;
+  color: White;
 }
-/* ====== Site Layout ====== 
-Setting the overall rules for page regions
-https://www.w3.org/WAI/tutorials/page-structure/regions/
-*/
-main {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
+
+header p {
+  color: White;
+  margin: 0;
 }
+
 footer {
   position: fixed;
+  left: 0;
   bottom: 0;
+  width: 100%;
   text-align: center;
+  padding: 15px;
+  background: MidnightBlue;
+  color: White;
+  z-index: 100;
 }
-/* ====== Articles Grid Layout ====
-Setting the rules for how articles are placed in the main element.
-Inspect this in Devtools and click the "grid" button in the Elements view
-Play with the options that come up.
-https://developer.chrome.com/docs/devtools/css/grid
-https://gridbyexample.com/learn/
-*/
+
+footer p {
+  color: White;
+  margin: 0;
+}
+
 main {
+  flex: 1;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
+  gap: 20px;
+  max-width: 1200px;
+  margin: 0 auto 80px auto;
+  padding: 20px;
+  box-sizing: border-box;
 }
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
-Now laying out just the INSIDE of the repeated card/article design.
-Keeping things orderly and separate is the key to good, simple CSS.
-*/
+
 article {
-  border: var(--line);
-  padding-bottom: var(--space);
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
+}
+
+img {
+  width: 100%;
+  max-width: 200px;
+  margin-bottom: 10px;
+}
+
+h1 {
+  margin: 0;
+  font-size: 2em;
+}
+h2 {
+  margin: 10px 0 0 0;
+  color: MidnightBlue;
+}
+p {
+  color: DarkSlateGray;
+}
+
+.button-link {
+  display: inline-block;
+  margin-top: 10px;
+  padding: 8px 18px;
+  background: RoyalBlue;
+  color: White;
+  border-radius: 4px;
+  text-decoration: none;
+  font-size: 1em;
+  transition: background 0.2s;
+}
+.button-link:hover {
+  background: Navy;
+}
+
+.social-media {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 10px;
+}
+.social-media a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: Gainsboro;
+  color: Black;
+  text-decoration: none;
+  transition: background 0.2s, color 0.2s;
+}
+.social-media a:hover {
+  background: RoyalBlue;
+  color: White;
+}
+.social-media svg {
+  width: 18px;
+  height: 18px;
+}
+
+
+main > article:first-child {
+  grid-column: 1 / -1;
+  order: -1;
+  background: #fff;
+  padding: 32px 20px;
+  border-radius: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: left;
+  font-size: 1.35em;
+}
+
+main > article img {
+  width: 100%;
+  max-width: 200px;
+  margin-bottom: 10px;
+  object-fit: contain;
+  aspect-ratio: 1.5/1;
+}
+
+main > article:first-child img {
+  max-width: 200px;
+  aspect-ratio: unset;
+}
+
+@media (max-width: 768px) {
+  main {
+    grid-template-columns: 1fr;
+    padding: 10px;
+  }
+  article {
+    width: 100%;
+    max-width: 100%;
   }
-  > img {
-    grid-column: span 3;
+  main > article:first-child {
+    font-size: 1.1em;
+    padding: 20px 8px;
   }
 }
diff --git a/Wireframe/wireframe.png → wireframe.png b/Wireframe/wireframe.png → wireframe.png