HackYourFutureBelgium · EL1VAS · Oct 3, 2025 · Oct 3, 2025 · Oct 3, 2025 · Oct 3, 2025
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -14,14 +14,56 @@ <h1>Product Pick</h1>
     <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-->
+        <!-- What is the customer's name? I must collect this data, and validate it. But what is a valid name? I must decide something.-->
+        <fieldset>
+          <legent>Confirm your identity</legent>
+
+          <div>
+            <label for="name">Name:</label>
+              <input type="text" id="name" name="name" required minlength="2">
+          </div>
+          <!--I require a valid email.-->
+          <div>
+            <label for="email">Email:</label>
+              <input type="email" id="email" name="email" required>
+          </div>
+        </fieldset>
+        <!--What colour should this t-shirt be? I must give 3 options. How will I make sure they don't pick other colours?-->
+        <fieldset>
+          <legent>Choose your shirt color</legent>
+          <div>
+            <label for="color-blue">Blue</label>
+            <input type="radio" id="color-blue" name="color" value="blue" required>
+          <div>
+          <div>
+            <label for="color-green">Green</label>
+            <input type="radio" id="color-green" name="color" value="green">
+          </div>
+          <div>
+            <label for="color-black">Black</label>
+            <input type="radio" id="color-black" name="color" value="black">
+          </div>
+        </fieldset>
+        <!--What size does the customer want? I must give the following 6 options: XS, S, M, L, XL, XXL-->
+        <fieldset>
+          <legent>Choose your size</legent>
+          <div>
+           <label for="T-shirt size">T-shirt Size</label>
+            <select id="T-shirt size" name="size" required>Select a size
+             <option>XS</option>
+             <option>S</option>
+             <option>M</option>
+             <option>L</option>
+             <option>XL</option>
+             <option>XXL</option>
+            </select>
+          </div>
+        </fieldset>
       </form>
     </main>
     <footer>
       <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
+      <h2>By Elena Vasileia</h2>
     </footer>
   </body>
 </html>
diff --git a/Wireframe/Readme.svg b/Wireframe/Readme.svg
diff --git a/Wireframe/Wireframe.svg b/Wireframe/Wireframe.svg
diff --git a/Wireframe/book_open.svg b/Wireframe/book_open.svg
diff --git a/Wireframe/git b/Wireframe/git
diff --git a/Wireframe/git_branch_icon.svg b/Wireframe/git_branch_icon.svg
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -5,28 +5,49 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
     <link rel="stylesheet" href="style.css" />
+
   </head>
   <body>
     <header>
-      <h1>Wireframe</h1>
+      <h1>Basics in Web Development</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        Understanding the essentials
       </p>
     </header>
+
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img src="Readme.svg" alt="Illustration of Readme icon" />
+        <h2>The README file</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file introduces a project, explains its purpose, and provides instructions for installation and usage. It helps others understand what the project does, how to set it up, and where to find additional resources.
         </p>
-        <a href="">Read more</a>
+        <a href="https://www.makeareadme.com/">Read more for README files</a>
       </article>
+
+      <article>
+        <img src="Wireframe.svg" alt="Illustration of Wireframe" />
+        <h2>The Wireframe</h2>
+        <p>
+          A wireframe is a visual guide that represents the structure and layout of a webpage or app. It helps designers and developers plan placement of elements and user flow before adding detailed content and styling.
+        </p>
+        <a href="https://www.productplan.com/glossary/wireframe/">Read more for Wireframe</a>
+      </article>
+
+      <article>
+        <img src="git_branch_icon.svg" alt="Illustration of git branch icon" />
+        <h2>A branch in Git</h2>
+        <p>
+          A branch in Git is an independent line of development, allowing you to work on new features or changes without affecting the main codebase. This enables collaboration and makes it easy to test, review, and merge updates.
+        </p>
+        <a href="https://www.atlassian.com/git/tutorials/using-branches">Find out more for Branches in Git</a>
+      </article>
+
+
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        File made by El1VAS on October 2025
       </p>
     </footer>
   </body>

diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -17,20 +17,39 @@ As well as useful links to learn more */
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
 :root {
-  --paper: oklch(7 0 0);
+  --paper: rgba(224, 230, 191, 0.801);
   --ink: color-mix(in oklab, var(--color) 5%, black);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
+  --line: 10px groove #012f5d;
   --container: 1280px;
 }
 /* ====== Base Elements ======
  General rules for basic HTML elements in any context */
+header {
+  text-align: center;
+  padding: var(--space);
+}
+
+header h1 {
+  font-size: 4rem;
+}
+
+header p {
+  font-size: 2.5rem;
+}
+
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
 }
+
+h2{
+ text-align: center;
+ font-size: 2.5rem;
+}
+
 a {
   padding: var(--space);
   border: var(--line);
@@ -52,7 +71,7 @@ main {
 footer {
   position: fixed;
   bottom: 0;
-  text-align: center;
+  text-align: right;
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -86,4 +105,4 @@ article {
   > img {
     grid-column: span 3;
   }
-}
+}