CodeYourFuture · Motorcycle-lab · May 5, 2026 · May 5, 2026 · May 6, 2026 · May 6, 2026
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,71 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </header>
-    <main>
+
+<head>
+  <title>Wireframe Guide</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+
+<body>
+  <header class="page-header">
+
+    <h1> Wireframe </h1>
+    <p class="short-description">Your guide to version control and design.</p>
+  </header>
+  <main class="main-wrapper">
+    <section class="featured-article">
+      <h2>Featured Article</h2>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img
+          src="https://media2.dev.to/dynamic/image/width=1280,height=720,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbqwje91mhujxu2gk5p83.jpg"
+          alt="readme">
+        <h3> What is the purpose of a README file? </h3>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is a markdown document that provides an introduction and documentation for a project hosted on
+          GitHub. It is usually placed in the root directory of a repository and is automatically displayed on the
+          repository’s main page.
         </p>
-        <a href="">Read more</a>
+
+        <h4>Other Purposes of a README File</h4>
+        <ul>
+          <li>Provides an overview of the project</li>
+          <li>Describes installation and setup </li>
+          <li>Documents usage instructions</li>
+          <li>List contributors and guidelines for contributing</li>
+          <li>Contains licensing information</li>
+          <li>Enhances project visibility and usability</li>
+        </ul>
+
+        <p><a href="https://datamanagement.hms.harvard.edu/collect-analyze/documentation-metadata/readme-files">Read
+            More</a></p>
+        <hr>
+
       </article>
-    </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
-  </body>
-</html>
+    </section>
+
+    <article class="side-card">
+      <img src="https://images.surferseo.art/5f496a4a-799c-4502-8e9e-2f396dae9c91.png" alt="Wireframe Of A Website">
+      <h2>What is the purpose of a wireframe?</h2>
+      <p>Wireframes are basic blueprints that help teams align on requirements, keeping UX design conversations focused
+        and constructive. Think of your wireframe as the skeleton of your app, website, or other final product. Your
+        wireframe shows the design team and stakeholders the bare-bones outlines of essential webpages, components, and
+        features, including:</p>
+
+      <a href="https://www.figma.com/resource-library/what-is-wireframing/">Read More</a>
+    </article>
+
+    <article class="side-card">
+      <img src="https://images.surferseo.art/5f496a4a-799c-4502-8e9e-2f396dae9c91.png" alt="Branch in Git">
+      <h2>What is a branch in Git?</h2>
+      <p>In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting
+        the main project. Think of it as a " parallel universe " for your code. </p>
+      <a href="https://www.geeksforgeeks.org/git/introduction-to-git-branch/" class="btn">Read more</a>
+    </article>
+  </main>
+  <footer>
+    <p> Smiles made in 2026 </p>
+  </footer>
+</body>
+
+</html>
diff --git a/Wireframe/short link image.png b/Wireframe/short link image.png
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,31 +1,26 @@
-/* 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 */
+.page-header{
+display:flex;
+flex-direction:column;
+align-items: center;
+justify-content: center;
+text-align: center;
+min-height: 300px;
+background-color: #f4f4f4;  
+}
+
+.page-header h1 {
+  margin-bottom: 10px;
+}
 
-/* ====== 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);
+  --ink: color-mix(in oklab, var(--color) 5%, rgb(16, 15, 15));
   --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);
@@ -41,49 +36,63 @@ svg {
   width: 100%;
   object-fit: cover;
 }
-/* ====== Site Layout ====== 
-Setting the overall rules for page regions
-https://www.w3.org/WAI/tutorials/page-structure/regions/
-*/
-main {
+
+.main-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space);
+
   max-width: var(--container);
+
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
+.main-wrapper > *:first-child {
+  grid-column: span 2;
+}
+
 footer {
   position: fixed;
   bottom: 0;
   text-align: center;
 }
-/* ====== 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/
-*/
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
-}
-/* ====== 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);
-  text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
+ display: flex;
+ flex-direction: column;
+
+  height: 100%;
+
+  padding: 0 var(--space) var(--space) var(--space);
+
+  overflow:hidden;
+}
+
+article img{
+  width: calc(100% + (var(--space) *2));
+  margin-left: calc(var(--space)* -1);
+  height: 250px;
+  object-fit: cover;
+  margin-bottom: var(--space);
+}
+
+article h2 {
+  min-height: 5em; 
+  display: flex;
+  align-items: center; /* Vertically centers the text if it's only one line */
+  margin-top: 0;
+  margin-bottom: var(--space);
+}
+
+article p{
+  flex-grow: 1;
+  margin-bottom: var(--space);
+}
+
+article a{
+  margin-top: auto;
+  align-self: flex-start;
 }