CodeYourFuture · obstie · May 17, 2025 · May 17, 2025 · May 17, 2025 · May 17, 2025
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -8,20 +8,94 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
+
     <header>
       <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-->
+       <section class="form-container">
+
+          <fieldset class="fieldset-one">
+              <div class="input-container">
+                  <label for="name">First Name</label>
+                  <input type="text" id="name" name="FirstName" minlength="2" maxlength="15" placeholder="Enter First Name" required>
+              </div>
+              <div class="input-container">
+                  <label for="surname">Surname</label>
+                  <input type="text" id="surname" name="Surname" minlength="2" maxlength="15" placeholder="Enter Surname" required>
+              </div>
+              <div class="input-container">
+                  <label for="email">Email</label>
+                  <input type="email" id="email" name="Email" placeholder="Enter Your Email" required>
+              </div>
+          </fieldset>
+
+          <fieldset class="fieldset-two">
+              <legend>Please select color</legend>
+              <select class="selector" name="color" id="color" aria-label="Color selection" required>
+                  <option value="" disabled selected>Click to select color</option>
+                  <option class="red" value="red">Red</option>
+                  <option class="green" value="green">Green</option>
+                  <option class="blue" value="blue">Blue</option>
+              </select>
+          </fieldset>
+
+        <fieldset class="fieldset-three">
+            <legend>Pick Size</legend>
+            <div class="size-container">
+                <div>
+                    <input type="radio" id="xs" name="size" value="xs" required>
+                    <label for="xs">XS</label>
+                </div>
+                <div>
+                    <input type="radio" name="size" id="s" value="s" required>
+                    <label for="s">S</label>
+                </div>
+                <div>
+                    <input type="radio" name="size" id="m" value="m" required>
+                    <label for="m">M</label>
+                </div>
+                <div>
+                    <input type="radio" name="size" id="l" value="l" required>
+                    <label for="l">L</label>
+                </div>
+                <div>
+                    <input type="radio" name="size" id="xl" value="xl" required>
+                    <label for="xl">XL</label>
+                </div>
+                <div>
+                    <input type="radio" name="size" id="xxl" value="xxl" required>
+                    <label for="xxl">XXL</label>
+                </div>
+              </div>
+        </fieldset>
+        <fieldset>
+                <div class="amount-container">
+                    <label for="amount">Amount</label>
+                    <input type="number" id="amount" name="amount" min="1" max="10" required>
+                </div>
+
+                <div class="input-container">
+                    <label for="date">Delivery date</label>
+                    <input type="date" id="date" name="date" min="2025-01-03" max="2025-02-01" required>
+                </div>
+
+                <button type="submit">Order</button>
+                <button type="reset">Reset</button>
+        </fieldset>
+      </section>
+
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Obert Tilimandzi</h2>
     </footer>
   </body>
 </html>
+
+
+
+
+
diff --git a/Wireframe/git.jpg b/Wireframe/git.jpg
diff --git a/Wireframe/hero.jpg b/Wireframe/hero.jpg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -1,33 +1,65 @@
 <!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" />
+    <title>Understanding README, Wireframes, and Git Branches</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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>
+      <nav>
+          <h1>README Files Wireframes and Git Branches</h1>
+          <h2>Learn about the essential tools</h2>
+      </nav>
     </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>
-      </article>
+      <section class="article-section ">
+        <article class="hero-article">
+          <div class="hero-container">
+            <img class="hero-img" src="hero.jpg" alt="Person using a laptop">
+            <div class="hero-content">
+              <h2>What is a README File?</h2>
+              <h3>A README file is a documentation file that explains the purpose, usage, and other relevant information about a project.</h3>
+              <p>It provides essential context for anyone working with the code, helping them understand how to use it and what to expect from it.</p>
+              <a href="https://www.makeareadme.com/" class="button">Learn more</a>
+            </div>
+          </div>
+        </article>
+
+        <article class="article1">
+          <div class="text-container">
+            <img src="wireframe.jpg" alt="wireframe sketch on laptop screen">
+            <div class="article-content">
+                <h2>What is a Wireframe?</h2>
+                <p>A wireframe is a visual representation of the layout and structure of a web page or app. It helps define the elements on the page and their arrangement before any actual design or development begins.</p>
+                <p>Wireframes are typically used by designers and developers to plan the user interface (UI) and user experience (UX).</p>
+                <a href="https://www.smashingmagazine.com/2018/03/wireframing-guide-web-design/" class="button">Learn more</a>
+            </div>
+          </div>
+        </article>
+
+        <article class="article2">
+          <div class="text-container">
+            <img src="git.jpg" alt="Diagram of Git branching with example text">
+            <div class="article-content">
+                <h2> So what is a Git Branch?</h2>
+                <p>A Git branch allows developers to work on different versions of a project independently. It enables parallel development by creating a separate line of work, leaving the main version (usually the master or main branch) unaffected.</p>
+                <p>Branches are particularly useful for features, bug fixes, and experiments, allowing developers to work without interfering with the main codebase.</p>
+                <a href="https://git-scm.com/docs/git-branch" class="button">Learn more</a>
+            </div>
+          </div>
+        </article>
+
+      </section>
     </main>
-    <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+
+    <footer class="footer-container">
+     <p>Author: Obert Tilimandzi <p>
+     <a href="mailto:[email protected]">[email protected]</a>
     </footer>
   </body>
 </html>
+