CodeYourFuture · R7Yos · May 10, 2025 · May 10, 2025 · May 10, 2025 · cjyuan
diff --git a/Wireframe/README.FILE.png b/Wireframe/README.FILE.png
diff --git a/Wireframe/README.md b/Wireframe/README.md
@@ -14,22 +14,22 @@ There are some provided HTML and CSS files you can use to get started. You can u
 
 <!--{{<objectives>}}>-->
 
-- [ ] Use semantic HTML tags to structure the webpage
-- [ ] Create three articles, each including a title, summary, and a link
-- [ ] Check a webpage against a wireframe layout
-- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
-- [ ] Use version control by committing often and pushing regularly to GitHub
+- [x] Use semantic HTML tags to structure the webpage
+- [x] Create three articles, each including a title, summary, and a link
+- [x] Check a webpage against a wireframe layout
+- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse)
+- [x] Use version control by committing often and pushing regularly to GitHub
 <!--{{</objectives>}}>-->
 
 ## Acceptance Criteria
 
-- [ ] Semantic HTML tags are used to structure the webpage.
-- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
-- [ ] The page header includes a title and description.
-- [ ] The articles section has three unique articles, each including a title, summary, and a link.
-- [ ] The page footer is fixed to the bottom of the viewport.
-- [ ] The webpage is styled using a linked .css file.
-- [ ] The webpage is properly committed and pushed to a branch on GitHub.
+- [x] Semantic HTML tags are used to structure the webpage.
+- [x] The page scores 100 for Accessibility in the Lighthouse audit.
+- [x] The page header includes a title and description.
+- [x] The articles section has three unique articles, each including a title, summary, and a link.
+- [x] The page footer is fixed to the bottom of the viewport.
+- [x] The webpage is styled using a linked .css file.
+- [x] The webpage is properly committed and pushed to a branch on GitHub.
 
 ## Resources
 

diff --git a/Wireframe/branch.png b/Wireframe/branch.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,111 @@
 <!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>
-      <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>
+
+<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>
+  </header>
+
+  <nav>
+    <a href="#readme">README.FILE</a>
+    <a href="#wireframe">Wireframe</a>
+    <a href="#branch">Branch in Git</a>
+  </nav>
+  <div class="hero">
+    <h2>Welcome to the Wireframe Page</h2>
+    <p>Explore the purpose of a wireframe and its significance in web design.</p>
+
+  <main>
+
+    <article id="readme">
+      <img src="README.FILE.png" alt="README File Image">
+      <div class="content">
+        <h2>README.FILE</h2>
+        <h3>What is the purpose of a README file?</h3>
+        <p>The purpose of a README file is to introduce and explain a project.</p>
+        <ul>
+          <li>Project overview – what it does and why it exists</li>
+          <li>Installation instructions – how to set it up and run it</li>
+          <li>Usage guide – examples of how to use it</li>
+          <li>Contribution guidelines – how others can contribute</li>
+          <li>License and credits – legal info and acknowledgments</li>
+        </ul>
+
+        <!-- Read more functionality using <details> and <summary> -->
+        <details>
+          <summary>Read more</summary>
+          <p>In short, a README acts as the front page of a project, helping others quickly understand and interact with it.</p>
+        </details>
+      </div>
+    </article>
+
+    <!-- Flex container to place Branch and Wireframe articles next to each other -->
+    <div class="flex-container">
+
+      <article id="wireframe">
+        <img src="wf.png" alt="Wireframe Image">
+        <div class="content">
+          <h2>Wireframe</h2>
+          <h3>What is the purpose of a wireframe?</h3>
+          <p>The purpose of a wireframe is to serve as a blueprint for a website or application’s layout and structure. It’s a visual guide that outlines the placement of key elements like headers, navigation, content sections, buttons, and images without focusing on design details like color or typography.</p>
+          <ul>
+            <li>Clarifies layout and functionality</li>
+            <li>Facilitates communication among team members</li>
+            <li>Helps identify potential usability issues early</li>
+            <li>Saves time and resources in the design process</li>
+          </ul>
+
+          <!-- Read more functionality using <details> and <summary> -->
+          <details>
+            <summary>Read more</summary>
+            <p>Wireframes help teams focus on how something works before deciding how it looks.</p>
+          </details>
+        </div>
       </article>
-    </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
-  </body>
+
+      <article id="branch">
+        <img src="branch.png" alt="Branch in Git Image">
+        <div class="content">
+          <h2>Branch in Git</h2>
+          <h3>What is a branch in Git?</h3>
+          <p>A branch in Git is a pointer to a specific line of development in your project. It allows you to work on features, fixes, or experiments in isolation from the main codebase.</p>
+          <ul>
+            <li>Branches enable parallel development.</li>
+            <li>They help keep the main codebase stable.</li>
+            <li>Branches can be merged back into the main branch once changes are complete and tested.</li>
+          </ul>
+
+          <!-- Read more functionality using <details> and <summary> -->
+          <details>
+            <summary>Read more</summary>
+            <p>In essence, branches are a powerful feature of Git that facilitate collaborative and organized software development.</p>
+          </details>
+        </div>
+      </article>
+
+    </div>
+
+  </main>
+
+  <footer>
+    <p>&copy; 2025 designed by Yousef. All rights reserved.</p>
+    <p>
+      <a href="#">Privacy Policy</a> |
+      <a href="#">Terms of Service</a> |
+      <a href="#">Contact Us</a>
+    </p>
+  </footer>
+
+</body>
+
 </html>
+
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -24,66 +24,141 @@ As well as useful links to learn more */
   --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);
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f4f4f4;
+  color: #111;
+
 }
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+
+header {
+  background-color: #0056b3;
+  /* darker blue */
+  color: #fff;
+  padding: 20px;
+  text-align: center;
 }
-img,
-svg {
-  width: 100%;
-  object-fit: cover;
+
+nav {
+  display: flex;
+  justify-content: center;
+  /* centers items horizontally */
+  gap: 1.5rem;
+  /* spacing between links */
+  background-color: #444;
+  /* optional dark background */
+  padding: 1rem;
 }
-/* ====== 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;
+
+nav a {
+  color: #fff;
+  text-decoration: none;
+  font-weight: bold;
+  padding: 3px 10px;
+  border-radius: 5px;
+  transition: background-color 0.3s, color 0.3s;
+  font-size: 1.2rem;
+  }
+
+nav a:hover {
+  background-color: #ddd;
+  color: black;
 }
-footer {
-  position: fixed;
-  bottom: 0;
+.hero {
   text-align: center;
+  font-size: 20px ;
 }
-/* ====== 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;
-  }
+  padding: 20px;
+}
+
+/* Flex container for wireframe and branch articles */
+.flex-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  flex-wrap: wrap;
 }
-/* ====== 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 Styles */
 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;
-  }
+  width: 100%;
+  max-width: 600px;
+  margin: 20px auto;
+  border-radius: 8px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Image at the top of the article */
+article img {
+  width: 100%;
+  height: 250px;
+  /* Fixed height for the image */
+  object-fit: cover;
+  /* Ensure the image covers the width and height of the article */
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  border: #333 1px solid;
+}
+
+article .content {
+  padding: 20px;
+  background-color: #fff;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+article h2 {
+  margin: 0;
+  font-size: 24px;
+}
+
+article h4 {
+  font-size: 16px;
+  font-style: italic;
+}
+
+article p {
+  font-size: 14px;
+}
+
+article ul {
+  padding-left: 20px;
 }
+
+/* Details and Summary Styles */
+details {
+  background-color: #f9f9f9;
+  padding: 10px;
+  border-radius: 6px;
+  margin-top: 10px;
+}
+
+summary {
+  font-weight: bold;
+  cursor: pointer;
+  color: #007BFF;
+  text-decoration: underline;
+}
+
+/* Styling for footer */
+footer {
+  background-color: #333;
+  color: white;
+  padding: 10px;
+  text-align: center;
+}
+
+footer a {
+  color: white;
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
diff --git a/Wireframe/wf.png b/Wireframe/wf.png
diff --git a/Wireframe/wireframe.png b/Wireframe/wireframe.png