CodeYourFuture · sedazam · May 10, 2025 · May 10, 2025 · May 10, 2025 · May 11, 2025
diff --git a/Form-Controls/README.md b/Form-Controls/README.md
@@ -30,18 +30,18 @@ Do not write a form action for this project.
 
 Let's write out our testable criteria. Check each one off as you complete it.
 
-- [ ] I have used HTML only.
+- [x] I have used HTML only.
 - [x] I have not used any CSS or JavaScript.
 
 ### HTML
 
-- [ ] My form is semantic html.
-- [ ] All inputs have associated labels.
-- [ ] My Lighthouse Accessibility score is 100.
-- [ ] I require a valid name. I have defined a valid name as a text string of two characters or more.
-- [ ] I require a valid email.
-- [ ] I require one colour from a defined set of 3 colours.
-- [ ] I require one size from a defined set of 6 sizes.
+- [x] My form is semantic html.
+- [x] All inputs have associated labels.
+- [x] My Lighthouse Accessibility score is 100.
+- [x] I require a valid name. I have defined a valid name as a text string of two characters or more.
+- [x] I require a valid email.
+- [x] I require one colour from a defined set of 3 colours.
+- [x] I require one size from a defined set of 6 sizes.
 
 ## Resources
 

diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -17,11 +17,48 @@ <h1>Product Pick</h1>
         <!-- 
           try writing out the requirements first as comments
         this will also help you fill in your PR message later-->
+
+        <!-- 1. Create a form with a text input for the customer name -->
+        <label for="customerName">Customer Name:</label>
+        <input type="text" id="customerName" name="customerName" required minlength="2"/>
+        <br /><br>
+
+        <!-- 2. Create customer email address -->
+        <label for="customerEmail">Customer Email:</label>
+        <input type="email" id="customerEmail" name="customerEmail" required />
+        <br><br>
+
+        <!-- 3. Create a select input for t-shirt colour  -->
+        <label for="tshirtColour">T-shirt Colour:</label>
+        <select id="tshirtColour" name="tshirtColour">
+          <option value="red">Red</option>
+          <option value="blue">Blue</option>
+          <option value="green">Green</option>
+          </select>
+        <br><br>
+
+        <!-- 4. Create a radio button for t-shirt size -->
+        <label>T-shirt Size:</label>
+        <input type="radio" id="Xsmall" name="tshirtSize" value="Xsmall" />
+        <label for="Xsmall">Xsmall</label>
+        <input type="radio" id="small" name="tshirtSize" value="small" />
+        <label for="small">small</label>
+        <input type="radio" id="medium" name="tshirtSize" value="medium" />
+        <label for="medium">medium</label>
+        <input type="radio" id="large" name="tshirtSize" value="large" />
+        <label for="large">large</label>
+        <input type="radio" id="Xlarge" name="tshirtSize" value="Xlarge" />
+        <label for="Xlarge">Xlarge</label>
+        <input type="radio" id="XXlarge" name="tshirtSize" value="XXlarge" />
+        <label for="XXlarge">XXlarge</label>
+        <br><br>
+
+
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Seddiq Azam</h2>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -8,26 +8,54 @@
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Wireframe in a nutshell</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>
-      </article>
-    </main>
+     In this page you will understand the key concepts those are essential for project development.     
+     </p>
+    </header></body>
+
+
+    <body>
+      <main class="container">
+        <div class="column" style="background-color:#fee6db;">
+
+        <article>
+          <img src="placeholder.svg" alt="A simple wireframe illustration featuring a light gray rectangle as the background, a red translucent circle representing the sun near the top right, and two triangular mountain shapes in dark gray and slate gray overlapping at the bottom. The scene conveys a calm and minimalistic design." />
+          <h2>Wireframe</h2>
+          <p>
+           a wireframe is a visual guide that represents the skeletal framework of a website or application, focusing on layout and functionality rather than design elements. It serves as a blueprint for developers and designers to understand the structure and flow of the project.
+          </p>
+          <a href="https://www.productplan.com/glossary/wireframe/">Read more</a>
+        </article></div>
+
+      <div class="column" style="background-color:#d6f6fe;">
+        <article>
+          <img src="placeholder.svg" alt="A simple wireframe illustration featuring a light gray rectangle as the background, a red translucent circle representing the sun near the top right, and two triangular mountain shapes in dark gray and slate gray overlapping at the bottom. The scene conveys a calm and minimalistic design." />
+          <h2>Readme File</h2>
+          <p>
+            A README file contains information about what a project is, how to set it up, and how to use it, helping others quickly grasp the purpose and structure of your work. A README file is a text document, typically named README.txt or README.md.
+          </p>
+          <a href="https://www.makeareadme.com/">Read more</a>
+        </article>
+        </div>
+
+        <div class="column" style="background-color:#d6f6fe;;">
+          <article>
+            <img src="placeholder.svg" alt="A simple wireframe illustration featuring a light gray rectangle as the background, a red translucent circle representing the sun near the top right, and two triangular mountain shapes in dark gray and slate gray overlapping at the bottom. The scene conveys a calm and minimalistic design." />
+            <h2>Branch in Git</h2>
+            <p>
+              A branch in Git is a separate line of development that allows multiple developers to work on different features or fixes simultaneously without interfering with each other's work. It enables parallel development and helps maintain a clean and organized codebase.
+            </p>
+            <a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read more</a>
+          </article>
+
+    </body>
+  </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A page by Seddiq Azam. All copyrights reserved 2025.
       </p>
     </footer>
   </body>
+
 </html>
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -16,6 +16,12 @@ As well as useful links to learn more */
  https://web.dev/articles/min-max-clamp
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
+h1 {
+   text-align: center;
+  background-color: rgb(224, 254, 254);
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+
+}
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
@@ -36,7 +42,7 @@ a {
   border: var(--line);
   max-width: fit-content;
 }
-img,
+img, 
 svg {
   width: 100%;
   object-fit: cover;
@@ -46,6 +52,7 @@ 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;
 }