CodeYourFuture · sripathman · Feb 1, 2025 · Feb 4, 2025 · Feb 8, 2025 · Feb 8, 2025
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -3,25 +3,53 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
+    <title>T-Shirt Order Form</title>
     <meta name="description" content="" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
     <header>
-      <h1>Product Pick</h1>
+      <h1>T-Shirt Order</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>
+        <fieldset>
+            <legend>Customer Details</legend>
+
+            <label for="name">Name:</label><br>
+            <input type="text" id="name" name="name" minlength="2" required><br><br>
+
+            <label for="email">Email:</label><br>
+            <input type="email" id="email" name="email" required><br><br>
+        </fieldset>
+
+        <fieldset>
+            <legend>T-Shirt Options</legend>
+
+            <label for="colour">Colour:</label><br>
+            <select id="colour" name="colour" required>
+                <option value="red">Red</option>
+                <option value="blue">Blue</option>
+                <option value="green">Green</option>
+            </select><br><br>
+
+            <label for="size">Size:</label><br>
+            <select id="size" name="size" required>
+                <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>
+        </fieldset>
+
+        <button type="submit">Submit Order</button>
+    </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Sripathmanathan</h2>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/index.html b/Wireframe/index.html
diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg
diff --git a/Wireframe/style.css b/Wireframe/style.css
diff --git a/Wireframe/README.md → wireframe/README.md b/Wireframe/README.md → wireframe/README.md
diff --git a/wireframe/git2.png b/wireframe/git2.png
diff --git a/wireframe/github.jpg b/wireframe/github.jpg
diff --git a/wireframe/index.html b/wireframe/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Understanding READMEs, Wireframes, and Git Branches</title>
+    <meta name="description" content="Learn about the purpose of README files, wireframes, and Git branches in software development.">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>Key Concepts in Software Development</h1>
+        <p>Exploring the importance of documentation, planning, and version control.</p>
+        </header>
+
+    <main>
+        <section id ="main-article">
+
+            <article>
+                <img  id="main-img" src="github.jpg" alt="">
+                <h2>What is the purpose of a wireframe?</h2>
+
+                <p>A wireframe is a visual representation of a webpage or application's layout.  It's a low-fidelity design, focusing on the structure and arrangement of elements rather than visual details like colors or fonts.  Wireframes help in planning the user interface and user experience before moving to more detailed design stages.</p>
+                <a href="https://www.productplan.com/glossary/wireframe/" target="_blank">Learn More</a>
+        </article>
+        </section>h
+        <section id="articles">
+            <article>
+                <img id = "art-img"src="readme.avif" alt="">
+                <h2>What is the purpose of a README file?</h2>
+                <p>A README file is a crucial document typically included in the root directory of a software project.  It serves as an introduction to the project, providing essential information for developers and users.  Think of it as the project's welcome guide.</p>
+                <a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes" target="_blank">Learn More</a>
+            </article>
+
+
+
+            <article>
+                <img id = "art-img" src="git2.png" alt="">
+                <h2>What is a branch in Git?</h2>
+                <p>In Git, a branch is a separate line of development.  It allows developers to work on new features or bug fixes without affecting the main codebase (often called the "main" or "master" branch).  This isolation is crucial for maintaining stability and enabling parallel development. Once the changes are tested and approved, the branch can be merged back into the main branch.</p>
+                <a href="https://www.geeksforgeeks.org/introduction-to-git-branch/" target="_blank">Learn More</a>
+            </article>
+        </section>
+    </main>
+
+    <footer>
+        <p>&copy; 2025 Sripathmanathan</p>
+    </footer>
+</body>
+</html>
diff --git a/wireframe/readme.avif b/wireframe/readme.avif
diff --git a/wireframe/redame.png b/wireframe/redame.png
diff --git a/wireframe/style.css b/wireframe/style.css
@@ -0,0 +1,71 @@
+body {
+  font-family: sans-serif;
+  margin: 0; /* Remove default margins */
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; 
+}
+
+header {
+  background-color: #f0f0f0;
+  padding: 20px;
+  text-align: center;
+
+}
+
+main {
+  padding: 20px;
+  flex: 1; /* Allow main content to expand */
+}
+
+#main-img{
+  width: 100%;
+  height: 300px;
+}
+#art-img{
+  width: 200px;
+}
+
+
+article {
+  border: 1px solid #ccc;
+  padding: 20px;
+  border-radius: 5px;
+  background-color: #f8f8f8;
+}
+
+article h2 {
+  margin-top: 0;
+}
+
+article a {
+  display: inline-block;
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: white;
+  text-decoration: none;
+  border-radius: 5px;
+}
+
+footer {
+  background-color: #333;
+  color: white;
+  text-align: center;
+  padding: 10px;
+  position: relative; /* Needed for sticky footer */
+  bottom: 0; /* Stick to bottom */
+  width: 100%; /* Full width */
+}
+
+
+#articles {
+  display: grid;
+  grid-template-columns: 1fr; /* Single column by default (mobile) */
+  gap: 20px;
+}
+
+@media (min-width: 768px) { /* Example breakpoint for larger screens */
+  #articles {
+      grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
+  }
+}
diff --git a/wireframe/webdev.avif b/wireframe/webdev.avif
diff --git a/Wireframe/wireframe.png → wireframe/wireframe.png b/Wireframe/wireframe.png → wireframe/wireframe.png