CodeYourFuture · Mahtem · Sep 17, 2025 · Sep 17, 2025 · Sep 17, 2025 · Sep 24, 2025
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -12,16 +12,44 @@
       <h1>Product Pick</h1>
     </header>
     <main>
-      <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
-      </form>
+<form>
+  <!-- Name with minimum 2 characters -->
+  <label for="name">Name:</label>
+  <input type="text" id="name" name="name" required minlength="2">
+
+  <!-- Email (must be a valid email) -->
+  <label for="email">Email:</label>
+  <input type="email" id="email" name="email" required>
+
+  <!-- Color selection (at least one must be chosen) -->
+  <fieldset>
+    <legend>Choose a colour:</legend>
+    <label><input type="radio" name="colour" value="red" required> Red</label>
+    <label><input type="radio" name="colour" value="blue"> Blue</label>
+    <label><input type="radio" name="colour" value="green"> Green</label>
+  </fieldset>
+
+  <!-- Size selection (must choose a size) -->
+  <label for="size">Choose a size:</label>
+  <select id="size" name="size" required>
+    <option value="">--Select a size--</option>
+    <option value="xs">XS</option>
+    <option value="s">S</option>
+    <option value="m">M</option>
+    <option value="l">L</option>
+    <option value="xl">XL</option>
+    <option value="xxl">XXL</option>
+  </select>
+
+  <!-- Submit button -->
+  <button type="submit">Submit</button>
+</form>
+
     </main>
     <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+
+      <h2>By COTTON SOLUTIONS, Ltd</h2>
     </footer>
   </body>
+
 </html>
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -3,31 +3,51 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Wireframe</title>
+    <title>Wireframe Project</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>
+      <p>This page explains important elements in designing Webpages.</p>
     </header>
-    <main>
+
+  <main>
+
+    <section class="main-article">
+      <img src="https://www.freecodecamp.org/news/content/images/size/w2000/2021/04/uide-to-writting-a-good-readme-file--1-.png" alt="Featured article">
+      <h2>What is the purpose of a README file?</h2>
+      <p>README Files are a common way to document the contents and structure of a folder or a dataset so that a researcher can locate the information they need.</p>
+      <a href="https://www.archbee.com/blog/readme-document-elements"><button>Read More</button></a>
+    </section>
+
+    <!-- following section is-column/grid-organized Articles -->
+
+    <section class="article-grid">
+
       <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://thumbs.balsamiq.com/t_blog_what-are-wireframes.png" alt="Article 1">
+        <h2>What is the purpose of a wireframe?</h2>
+        <p>The primary purpose of a wireframe is to serve as a blueprint for a digital product, such as a website or mobile app.</p>
+        <a href="https://www.experienceux.co.uk/faqs/what-is-wireframing/#:~:text=Wireframing%20is%20a%20way%20to,key%20business%20and%20project%20objectives."><button>Read More</button></a>
       </article>
-    </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
-    </footer>
-  </body>
-</html>
+
+      <article>
+        <img src="https://cpske.github.io/ISP/git/git-branches.png" alt="Article 2">
+        <h2>What is a branch in Git?</h2>
+        <p>A branch represents an independent line of development. Branches serve as an abstraction for the edit/stage/commit process. You can think of them as a way to request a brand new working directory, staging area, and project history.</p>
+        <a href="https://www.nobledesktop.com/learn/git/git-branches"><button>Read More</button></a>
+       </article>
+
+    </section>
+
+  </main>
+
+     <footer>
+        <p>For new codes and styles please Follow me on <a href="https://github.com/" target="_blank">GitHub</a>.</p>
+     </footer>
+
+
+</body>
+</html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -16,74 +16,108 @@ 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);
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  line-height: 1.6;
 }
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+
+/* Header section */
+header {
+  padding: 20px;
+  text-align: center;
+  background: #d6d8e7;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 2em;
+}
+
+header p {
+  font-size: 1em;
+  color: #555;
+}
+
+/* Main Article */
+.main-article {
+  max-width: 1200px;
+  margin: 20px auto;
+  text-align: left;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
 }
-img,
-svg {
+
+.main-article img {
   width: 100%;
-  object-fit: cover;
+  height: auto;
+  display: block;
+  border-radius: 5px;
+}
+
+.featured-article h2 {
+  margin-top: 10px;
+}
+
+/* Article Grid the remaining two articles organized in a column like structure*/
+.article-grid {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin: 20px;
+  flex-wrap: wrap; 
+}
+
+.article-grid article {
+  flex: 1 1 300px;
+  max-width: 590px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 10px;
+  text-align: left;
+  height: 640px;
 }
-/* ====== Site Layout ====== 
-Setting the overall rules for page regions
-https://www.w3.org/WAI/tutorials/page-structure/regions/
-*/
+
+.article-grid img {
+  width: 100%;
+  height: auto;
+  border-radius: 5px;
+}
+
+/* Buttons */
+button {
+  margin-top: 10px;
+  padding: 10px 20px;
+  background: #333;
+  color: #fff;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #555;
+}
+
+/* Add padding to the bottom of the main content */
 main {
-  max-width: var(--container);
-  margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: 60px; /* match or exceed footer height */
 }
+
+/* Footer */
 footer {
+  background: #d9d9e9;
+  padding: 15px;
+  font-size: 18px;
+  text-align: center;
+  color: #333;
+
+  /* Make footer fixed to the viewport */
+
   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;
-  }
+  left: 0;
+  width: 100%; 
 }