CodeYourFuture · Shayida999 · Jun 5, 2025 · Jun 5, 2025 · Jun 5, 2025
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,26 +8,38 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <h1>📄 Wireframe Explorer 📄</h1>
+      <p>a two-dimensional skeletal outline of a webpage or app.</p>
+      <hr />
     </header>
+
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
-        </p>
-        <a href="">Read more</a>
+        <img src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210328185457/How-To-Create-a-Wireframe-in-Software-Design.png" alt="Wireframe design showing page layout" />
+        <h2>WireFrame</h2>
+        <p>A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website.</p>
+        <a href="https://en.wikipedia.org/wiki/Website_wireframe" target="_blank" rel="noopener noreferrer">Read more</a>
       </article>
+
+      <article>
+        <img src="https://gcapes.github.io/git-course/fig/feature-branches.svg" alt="Diagram showing Git feature branches" />
+        <h2>Git Branch</h2>
+        <p>In Git, branching allows developers to create independent lines of development, diverging from the main project line and working on new features or bug fixes without affecting the primary codebase.
+        It's like creating a separate "parallel universe" for your code, enabling parallel development efforts.</p>
+        <a href="https://learngitbranching.js.org/" target="_blank" rel="noopener noreferrer">Learn Git Branching</a>
+      </article>
+
+      <article>
+        <img src="https://i.ytimg.com/vi/jeOfS90Flf8/maxresdefault.jpg" alt="YouTube screenshot explaining README file usage" />
+        <h2>ReadMe</h2>
+        <p>A README file is a plain text file, often used in software repositories or when sharing datasets, that provides a brief introduction and explanation of the project or data.
+        You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.</p>
+        <a href="https://www.makeareadme.com/" target="_blank" rel="noopener noreferrer">Read more</a>
+      </article> 
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>&copy; 2025 CodeYourFuture — All rights reserved.</p>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,89 +1,166 @@
-/* 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);
+  --paper: white;
   --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;
+  --line: 1px solid black;
+  --container: 1000px;
 }
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
+
+html, body {
+  height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
 body {
-  background: var(--paper);
-  color: var(--ink);
+  background: linear-gradient(to right, #e0f7fa, #e1f5fe);
+  color: black;
   font: var(--font);
+  min-height: 100vh;
 }
-a {
+
+header {
+  text-align: center;
+  padding: var(--space) 0;
+}
+
+header hr {
+  border: none;
+  border-top: 1.5px solid black; 
+  width: 55%;
+}
+
+header p {
+  margin-bottom: 0.2rem; 
+}
+
+h1, h2 {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: #333;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  font-weight: 600;
+}
+
+h1:hover {
+  color: purple; 
+  transition: color 0.3s ease;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+main {
+  max-width: var(--container);
+  margin: 0 auto calc(var(--space) * 4) auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space);
+  flex: 1;
+  padding-bottom: 40px;
+}
+
+main > *:first-child {
+  grid-column: span 2;
   padding: var(--space);
-  border: var(--line);
+}
+
+main > article:first-child h2,
+main > article:first-child p {
+  font-size: 0.95rem;
+}
+
+a {
+  padding: 6px 12px;
+  font-size: 0.85rem;
+  background-color: #007acc;
+  color: white;
+  text-decoration: none;
+  border-radius: 4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: var(--space);
   max-width: fit-content;
+  transition: background-color 0.2s ease;
+}
+
+a::after {
+  content: '▶';
+  font-size: 1rem;
+  margin-left: 2px;
 }
+
+a:hover {
+  background-color: #005f99;
+}
+
 img,
 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 {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
+
+article {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 
+  border-radius: 8px;
+  padding-bottom: var(--space);
+  text-align: left;
+  padding: var(--space);
+  display: grid;
+  grid-template-columns: var(--space) 1fr var(--space);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px); 
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+article > * {
+  grid-column: 2 / 3;
+}
+
+article > img {
+  grid-column: span 3;
+  max-height: 300px;
 }
+
 footer {
   position: fixed;
   bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.9); 
   text-align: center;
+  padding: 1.5px 2px; 
+  border-top: 1px solid #ccc;
+  font-size: 0.80rem;
+  font-weight: 400;
+  z-index: 1000;
 }
-/* ====== 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;
+
+@media (max-width: 600px) {
+  img {
+    max-height: 200px;
   }
-}
-/* ====== 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;
+
+  main {
+    grid-template-columns: 1fr;
+    padding: 0 var(--space);
+    padding-bottom: 0;
+  }
+
+  main > *:first-child {
+    grid-column: auto;
   }
-  > img {
-    grid-column: span 3;
+
+  footer {
+    font-size: 0.80rem;
+    position: static;
   }
 }