CodeYourFuture · Alrzini2025 · Jan 24, 2026 · Jan 24, 2026 · Jan 31, 2026 · Feb 4, 2026
diff --git a/Wireframe/Git.png b/Wireframe/Git.png
diff --git a/Wireframe/ReadMe.jpg b/Wireframe/ReadMe.jpg
diff --git a/Wireframe/Wireframe1.png b/Wireframe/Wireframe1.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,102 @@
 <!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>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>CYF sprint 1</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <div class="container">
     <header>
-      <h1>Wireframe</h1>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <h1>My First Program</h1>
+      <p class="subtitle">What is the purpose of a README file?</p>
     </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>
+      <!-- Large Featured Article -->
+      <article class="article-card">
+        <div class="image-placeholder">
+          <img src="ReadMe.jpg" alt="Read ME" class="image">
+        </div>
+        <div class="article-content">
+          <h2 class="article-title">What is the purpose of a README file?</h2>
+          <p class="article-summary">The purpose of a README file is to explain what a project is and how to use it.
+            Furthermore, it helps anyone who
+            read the project understand the project quickly.</p>
+          <a href="readme-detail.html" class="read-more-link">READ LESS</a>
+        </div>
       </article>
+
+      <!-- Two Column Grid -->
+      <div class="articles-grid">
+        <article class="article-card">
+          <div class="image-placeholder">
+            <img src="Wireframe1.png" alt="Read ME" class="image">
+          </div>
+          <div class="article-content">
+            <h2 class="article-title">What is the purpose of a wireframe?</h2>
+            <p class="article-summary">A wireframe is used to plan the basic structure and layout of a webpage or
+              application before design and development begin. It focuses on functionality and
+              content placement rather than colours or styling, helping to visualise how users
+              will interact with the page. Wireframes improve communication between designers
+              and developers, support better user experience planning, and save time by
+              identifying issues early
+              while also guiding the structure of the HTML used in development.</p>
+            <a href="wireframe-detail.html" class="read-more-link">READ LESS</a>
+          </div>
+        </article>
+
+        <article class="article-card">
+          <div class="image-placeholder">
+            <img src="Git.png" alt="Read ME" class="image">
+          </div>
+          <div class="article-content">
+            <h2 class="article-title">What is a branch in Git? </h2>
+            <p class="article-summary">A branch enables developers to implement changes, test new ideas,
+              and commit work independently. After completion and review, the branch is merged into
+              the main branch, commonly referred to as main or master. This process facilitates team
+              collaboration, version management, and maintains the stability of the main
+              codebase during ongoing development.</p>
+            <a href="git-detail.html" class="read-more-link">READ LESS</a>
+          </div>
+        </article>
+      </div>
     </main>
+
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p> <a href="https://www.w3schools.com/html/">This is link to W3shool</a> </p>
     </footer>
-  </body>
-</html>
+  </div>
+
+  <script>
+    // Get all read more links
+    const readMoreLinks = document.querySelectorAll('.read-more-link');
+
+    // Add click event listener to each link
+    readMoreLinks.forEach(link => {
+      link.addEventListener('click', function (event) {
+        // Prevent the default link behavior (navigation)
+        event.preventDefault();
+
+        // Find the article summary within the same article card
+        const articleContent = this.parentElement;
+        const summary = articleContent.querySelector('.article-summary');
+
+        // Toggle the 'hidden' class to display/hide the summary
+        summary.classList.toggle('hidden');
+
+        // Change link text based on whether summary is hidden
+        if (summary.classList.contains('hidden')) {
+          this.textContent = 'READ MORE';
+        } else {
+          this.textContent = 'READ LESS';
+        }
+      });
+    });
+  </script>
+</body>
+
+</html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -16,74 +16,155 @@ As well as useful links to learn more */
  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;
-}
-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;
-}
-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;
-  }
-}
+       *{
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Comic Sans MS', cursive, sans-serif;
+            background-color: #f0f0f0;
+            padding: 20px;
+            padding-bottom: 80px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+
+        h1 {
+            font-size: 2.5em;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+
+        .subtitle {
+            font-size: 0.9em;
+            font-style: italic;
+        }
+
+        .article-card {
+            background-color: white;
+            border: 2px solid black;
+            margin-bottom: 30px;
+            overflow: hidden;
+        }
+
+        .image-placeholder {
+            width: 100%;
+            height: 200px;
+            background-color: #e0e0e0;
+            border-bottom: 2px solid black;
+            position: relative;
+        }
+
+        .image-placeholder: {
+            content: '';
+            position: absolute;
+            background-color: black;
+            width: 1px;
+        }
+
+        .image-placeholder::before {
+            top: 0;
+            left: 0;
+            right: 100%;
+            bottom: 100%;
+            width: 141%;
+            height: 1px;
+            transform-origin: left top;
+            transform: rotate(14deg);
+        }
+
+        .image-placeholder::after {
+            top: 0;
+            right: 0;
+            width: 141%;
+            height: 1px;
+            transform-origin: right top;
+            transform: rotate(-14deg);
+        }
+
+
+         .image{
+		  top: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+
+		 }
+        .article-content {
+            padding: 20px;
+        }
+
+        .article-title {
+            font-size: 1.3em;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+           .article-summary.hidden {
+            max-height: 0px;
+            opacity: 0;
+            overflow: hidden;
+            margin-bottom: 0px;
+        }
+        .article-summary {
+            font-size: 0.95em;
+            font-style: italic;
+            margin-bottom: 15px;
+            max-height: 500px;  /* Changed from 0 */ 
+            overflow: visible;   /* Changed from hidden */
+            opacity: 1;          /* Changed from 0 */ 
+            transition: max-height 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
+        }
+
+        .read-more-link {
+           display: inline-block;
+           padding: 8px 20px;
+           border: 2px solid black;
+           background-color: white;
+           font-family: 'Comic Sans MS', cursive, sans-serif;
+           font-weight: bold;
+           cursor: pointer;
+           text-decoration: none;
+           color: black;
+           transition: background-color 0.2s ease;
+        }
+
+        .read-more-link:hover {
+            background-color: #f0f0f0;
+        }
+
+        .articles-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 30px;
+            margin-bottom: 40px;
+        }
+
+        footer {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            font-size: 0.85em;
+            font-style: italic;
+            padding: 20px 0;
+            border-top: 1px solid #ccc;
+            background-color: #f0f0f0;
+            z-index: 1000;
+        }
+
+        @media (max-width: 768px) {
+            .articles-grid {
+                grid-template-columns: 1fr;
+            }
+        }