CodeYourFuture · mjm-git185 · Jan 12, 2026 · Jan 22, 2026
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -13,10 +13,36 @@ <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-->
+        <fieldset style="font-size: 24px;">
+          <label for="name" >Name *</label>
+          <br />
+          <input type="text" name="name" placeholder="Name" id="name" minlength="2" required />
+          <br />
+          <label for="email">E-mail *</label>
+          <br />
+          <input type="email" name="email" placeholder="you@email.org" id="email" required />
+          <br />
+          <label for="colour">Colour *</label>
+          <select name="colour" id="colour" style="font-size: 24px;" required>
+            <option value="">Select a colour</option>
+            <option value="Black">Black</option>
+            <option value="Obsidian">Obsidian</option>
+            <option value="Noir">Noir</option>
+          </select>
+          <br></br>
+          <label for="size">Size *</label>
+          <select name="size" id="size" style="font-size: 24px;" 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>
+          <br></br>
+          <button type="submit" style="font-size: 24px;">Submit</button>
+        </fieldset>
       </form>
     </main>
     <footer>

diff --git a/Wireframe/education-concept-with-book.jpg b/Wireframe/education-concept-with-book.jpg
diff --git a/Wireframe/leaf-branch-vase-with-shadow.jpg b/Wireframe/leaf-branch-vase-with-shadow.jpg
diff --git a/Wireframe/low-angle-shot-barbed-wire-fence-clear-blue-sky.jpg b/Wireframe/low-angle-shot-barbed-wire-fence-clear-blue-sky.jpg
diff --git a/Wireframe/martinStyle.css b/Wireframe/martinStyle.css
@@ -0,0 +1,8 @@
+:root {
+  --paper: oklch(7 0 0);
+  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --font: 100%/1.5 system-ui;
+  --spaceroot : clamp(6px, 6px + 2vw, 15px);
+  --line: 1px solid;
+  --container: 1280px;
+}
diff --git a/Wireframe/martinWireFrame.html b/Wireframe/martinWireFrame.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wireframe cyf first sprint building a web page using Wireframe provided</title>
+    <link rel="stylesheet" href="martinStyle.css" />
+    <h1>Wireframe cyf first sprint</h1>
+    <p> As part of the first sprint, we are building a web page using the provided wireframe. </p>
+</head>
+<body>
+<article id ="readMe">
+    <h2><a href="#">Read Me</a></h2>
+    <img src="education-concept-with-book.jpg" alt="a red book " />
+    <p> This is my first sprint project for the Code Your Future web development course. The objective of this sprint is to create a web page based on a provided wireframe design. The project involves using HTML and CSS to replicate the layout and styling of the wireframe as closely as possible. This exercise will help me improve my front-end development skills and gain practical experience in building web pages from design mockups. </p>
+</article>
+
+<article id = "wireFrame">
+    <img src="low-angle-shot-barbed-wire-fence-clear-blue-sky.jpg" alt="a barbed wire fence " />
+    <h2><a href="#">Wire Frame</a></h2>
+    <p> The wireframe provided for this sprint is a simple layout with a header, main content area, and footer. The main content area contains an article with an image, title, description, and a link to read more. The footer contains a simple paragraph. </p>
+
+</article>
+
+<article id = "branch">
+    <img src="branch.jpg" alt="a tree branch " />
+    <h2><a href="#">Branch</a></h2>
+    <p> I have created a branch named "martin-wireframe" for this project. This branch contains all the code and files related to the wireframe project. I will be committing my changes to this branch as I work on the project. </p>
+
+</article>
+</body>
+<footer>
+</footer>
+
+</html>