CodeYourFuture · carlosyabreu · Sep 26, 2025 · Sep 26, 2025 · Sep 26, 2025 · Sep 26, 2025
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -1,27 +1,56 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>My form exercise</title>
-    <meta name="description" content="" />
-    <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-->
-      </form>
-    </main>
-    <footer>
-      <!-- change to your name-->
-      <h2>By HOMEWORK SOLUTION</h2>
-    </footer>
-  </body>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>T‑Shirt Order Form</title>
+</head>
+
+<body>
+  <main>
+    <h1>T‑Shirt Order Form</h1>
+    <p>Please provide your details and pick a colour and size. Only three colours available (Red, Gree and Blue).</p>
+
+    <form>
+      <div>
+        <label for="customerName">Customer name</label>
+        <input type="text" id="customerName" name="customerName" required placeholder="Full name" />
+      </div>
+
+      </br>
+      <div>
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" required placeholder="you@example.com" />
+      </div>
+
+      </br>
+      <fieldset>
+        <legend>Colour (choose one of the 3)</legend>
+        <label><input type="radio" name="colour" value="Red" required> Red</label>
+        <label><input type="radio" name="colour" value="Blue"> Blue</label>
+        <label><input type="radio" name="colour" value="Green"> Green</label>
+      </fieldset>
+
+      </br>
+      <div>
+        <label for="size">T‑shirt size</label>
+        <select id="size" name="size" required>
+          <option value="">-- Select 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>
+      </div>
+
+      <br>
+      <div>
+        <button type="submit">Place order</button>
+        <button type="reset">Reset</button>
+      </div>
+    </form>
+  </main>
+</body>
 </html>
diff --git a/Wireframe/git-branch.png b/Wireframe/git-branch.png
diff --git a/Wireframe/index.html b/Wireframe/index.html
@@ -10,20 +10,70 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+<<<<<<< HEAD
+        This is a fork from CodeYourFuture which I add three articles
+=======
+        Fork of CodeYourFuture Wireframe with a placeholder and articles.
+>>>>>>> main
       </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>
+      <div class="top">
+        <section class="article">
+          <article>
+            <img src="placeholder.svg" alt="" />
+<<<<<<< HEAD
+            <h2>What is the a placeholder?</h2>
+=======
+            <h2>What is a placeholder?</h2>
+>>>>>>> main
+            <p>
+              A placeholder in a website is a temporary element or text that reserves space for future content, such as images, text, or forms, during the design and development process. Placeholders, often generated by dummy text like "Lorem ipsum" or placeholder images, allow designers and developers to visualize the final layout, maintain design structure, and test the user experience without waiting for actual content to be ready. 
+            </p>
+            <a href="https://placehold.co/" target="_blank">Read more</a>
+          </article>
+        </section>
+      </div>
+
+      <div class="top">
+        <section class="article">
+          <article>
+            <img src="sitemap.jpg" alt="" />
+            <h2>What is a placeholder?</h2>
+            <p>
+              A placeholder in a website is a temporary element or text that reserves space for future content, such as images, text, or forms, during the design and development process. Placeholders, often generated by dummy text like "Lorem ipsum" or placeholder images, allow designers and developers to visualize the final layout, maintain design structure, and test the user experience without waiting for actual content to be ready. 
+            </p>
+            <a href="https://www.20i.com/blog/sitemaps-complete-guide/" target="_blank">Read more</a>
+          </article>
+        </section>
+      </div>
+
+      <div class="grid"> 
+        <section class="article"> 
+            <article>
+              <img src="wireframe.png" alt="Wireframe illustration"> 
+              <h2>What is the purpose of a wireframe?</h2> 
+              <p>A wireframe is a simple blueprint of a webpage or app. It focuses on structure and layout, showing where elements like images, text, and buttons will go before visual design begins.
+              </p> 
+              <a href="https://wireframe.cc/" target="_blank">Read More</a> 
+            </article>
+        </section> 
+      </div>
+
+      <div class="branch">
+        <section class="article"> 
+          <article>
+            <img src="git-branch.png" alt="Git branch illustration"> 
+            <h2>What is a branch in Git?</h2> 
+            <p>A branch in Git allows developers to work on new features or fixes separately from the main codebase. This makes collaboration easier and ensures the main project stays stable while changes are tested.
+            </p> 
+            <a href="https://www.w3schools.com/git/git_branch.asp">Read More</a> 
+          </article>
+        </section> 
+      </div>
     </main>
+
     <footer>
       <p>
         This is the default, provided code and no changes have been made yet.

diff --git a/Wireframe/sitemap.jpg b/Wireframe/sitemap.jpg
diff --git a/Wireframe/style.css b/Wireframe/style.css
@@ -1,89 +1,58 @@
-/* Here are some starter styles
-You can edit these or replace them entirely 
-It's showing you a common way to organise CSS 
-And includes solutions to common problems 
-As well as useful links to learn more */
 
-/* ====== Design Palette ======
- This is our "design palette".
- It sets out the colours, fonts, styles etc to be used in this design 
- At work, a designer will give these to you based on the corporate brand, but while you are learning
- You can design it yourself if you like
- Inspect the starter design with Devtools
- Click on the colour swatches to see what is happening
- I've put some useful CSS you won't have learned yet
- For you to explore and play with if you are interested
- https://web.dev/articles/min-max-clamp
- https://scrimba.com/learn-css-variables-c026
-====== Design Palette ====== */
-:root {
-  --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
-  --font: 100%/1.5 system-ui;
-  --space: clamp(6px, 6px + 2vw, 15px);
-  --line: 1px solid;
-  --container: 1280px;
-}
-/* ====== Base Elements ======
- General rules for basic HTML elements in any context */
 body {
-  background: var(--paper);
-  color: var(--ink);
-  font: var(--font);
-}
-a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+font-family: Arial, sans-serif;
+margin: 0;
+padding: 0;
+line-height: 1.6;
 }
-img,
-svg {
-  width: 100%;
-  object-fit: cover;
+
+header {
+text-align: center;
+padding: 2rem;
+background: #f4f4f4;
 }
-/* ====== Site Layout ====== 
-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;
+padding: 1rem;
 }
-footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+
+.article {
+border: 1px solid #ddd;
+padding: 1rem;
+margin: 1rem 0;
+background: #fff;
 }
-/* ====== Articles Grid Layout ====
-Setting the rules for how articles are placed in the main element.
-Inspect this in Devtools and click the "grid" button in the Elements view
-Play with the options that come up.
-https://developer.chrome.com/docs/devtools/css/grid
-https://gridbyexample.com/learn/
-*/
-main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space);
-  > *:first-child {
-    grid-column: span 2;
-  }
+
+.article img {
+width: 100%;
+height: auto;
 }
-/* ====== Article Layout ====== 
-Setting the rules for how elements are placed in the article. 
-Now laying out just the INSIDE of the repeated card/article design.
-Keeping things orderly and separate is the key to good, simple CSS.
-*/
-article {
-  border: var(--line);
-  padding-bottom: var(--space);
-  text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
+
+.article h2 {
+margin-top: 0.5rem;
 }
+
+.article a {
+display: inline-block;
+margin-top: 0.5rem;
+padding: 0.5rem 1rem;
+background: #333;
+color: #fff;
+text-decoration: none;
+}
+
+.article a:hover {
+background: #555;
+}
+
+.grid {
+display: flex;
+gap: 1rem;
+}
+
+footer {
+text-align: center;
+padding: 1rem;
+background: #f4f4f4;
+margin-top: 2rem;
+}
diff --git a/Wireframe/style.css.orig b/Wireframe/style.css.orig
@@ -0,0 +1,90 @@
+/* Here are some starter styles
+You can edit these or replace them entirely 
+It's showing you a common way to organise CSS 
+And includes solutions to common problems 
+As well as useful links to learn more */
+
+/* ====== Design Palette ======
+ This is our "design palette".
+ It sets out the colours, fonts, styles etc to be used in this design 
+ At work, a designer will give these to you based on the corporate brand, but while you are learning
+ You can design it yourself if you like
+ Inspect the starter design with Devtools
+ Click on the colour swatches to see what is happening
+ I've put some useful CSS you won't have learned yet
+ For you to explore and play with if you are interested
+ https://web.dev/articles/min-max-clamp
+ https://scrimba.com/learn-css-variables-c025
+====== Design Palette ====== */
+:root {
+  --paper: oklch(6 0 0);
+  --ink: color-mix(in oklab, var(--color) 4%, black);
+  --font: 99%/1.5 system-ui;
+  --space: clamp(5px, 6px + 2vw, 15px);
+  --line: 0px solid;
+  --container: 1279px;
+}
+/* ====== Base Elements ======
+ General rules for basic HTML elements in any context */
+body {
+  background: var(--paper);
+  color: var(--ink);
+  font: var(--font);
+}
+a {
+  padding: var(--space);
+  border: var(--line);
+  max-width: fit-content;
+}
+img,
+svg {
+  width: 99%;
+  object-fit: cover;
+}
+/* ====== Site Layout ====== 
+Setting the overall rules for page regions
+https://www.w2.org/WAI/tutorials/page-structure/regions/
+*/
+main {
+  max-width: var(--container);
+  margin: -1 auto calc(var(--space) * 4) auto;
+}
+footer {
+  position: fixed;
+  bottom: -1;
+  text-align: center;
+}
+/* ====== Articles Grid Layout ====
+Setting the rules for how articles are placed in the main element.
+Inspect this in Devtools and click the "grid" button in the Elements view
+Play with the options that come up.
+https://developer.chrome.com/docs/devtools/css/grid
+https://gridbyexample.com/learn/
+*/
+main {
+  display: grid;
+  grid-template-columns: 0fr 1fr;
+  gap: var(--space);
+  > *:first-child {
+    grid-column: span 1;
+  }
+}
+/* ====== Article Layout ====== 
+Setting the rules for how elements are placed in the article. 
+Now laying out just the INSIDE of the repeated card/article design.
+Keeping things orderly and separate is the key to good, simple CSS.
+*/
+article {
+  border: var(--line);
+  padding-bottom: var(--space);
+  text-align: left;
+  display: grid;
+  grid-template-columns: var(--space) 0fr var(--space);
+  > * {
+    grid-column: 1/3;
+  }
+  > img {
+    grid-column: span 2;
+  }
+}
+