ITP_Jan_25 | Aden_Jones | Form controls | Week 2

Form-Controls/index.html

@@ -12,12 +12,7 @@
       <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>
+      <form></form>
     </main>
     <footer>
       <!-- change to your name-->

Wireframe/index.html

@@ -10,24 +10,59 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A Wireframe is a skeletal three-dimensional model in which only lines
+        and vertices are represented
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+        <img
+          src="digital-technology-background-blue-pixel-dots-pattern-342080040.webp"
+          alt=""
+        />
+        <h2>What is the purpose of a wireframe?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          Wireframe's are a visual guide to what a product should look like.
+          Their main goal is to create an app or site that delivers a cohesive
+          and well-designed experience. They are also a great way to ensure that
+          every element in a UI has a purpose.
         </p>
-        <a href="">Read more</a>
+        <a
+          href="https://adamfard.com/blog/wireframes#:~:text=Wireframes%20are%20a%20visual%20guide,a%20UI%20has%20a%20purpose."
+          >Read more</a
+        >
+      </article>
+      <article>
+        <img src="istockphoto-1141254399-612x612.jpg" alt="" />
+        <h2>What is the purpose of a README file?</h2>
+        <p>
+          The main purpose of a README file in a software project is to serve as
+          an introduction to the project. It explains the purpose of the project
+          and provides instructions on how to use the software.
+        </p>
+        <a
+          href="https://www.archbee.com/blog/readme-document-elements#:~:text=The%20main%20purpose%20of%20a,how%20to%20use%20the%20software."
+          >Read more</a
+        >
+      </article>
+      <article>
+        <img src="istockphoto-1394963357-612x612.jpg" alt="" />
+        <h2>What is a branch in Git?</h2>
+        <p>
+          A branch in Git is simply a lightweight movable pointer to one of
+          these commits. The default branch name in Git is master . As you start
+          making commits, you're given a master branch that points to the last
+          commit you made. Every time you commit, the master branch pointer
+          moves forward automatically.
+        </p>
+        <a
+          href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell#:~:text=A%20branch%20in%20Git%20is,branch%20pointer%20moves%20forward%20automatically."
+          >Read more</a
+        >
       </article>
     </main>
     <footer>
-      <p>
-        This is the default, provided code and no changes have been made yet.
-      </p>
+      <p>This Project is an example of how a Wireframe should look like.</p>
     </footer>
   </body>
 </html>

Wireframe/style.css

@@ -17,10 +17,10 @@ As well as useful links to learn more */
  https://scrimba.com/learn-css-variables-c026
 ====== Design Palette ====== */
 :root {
-  --paper: oklch(7 0 0);
+  --paper: linear-gradient(rgb(203, 71, 255), rgba(0, 0, 255, 0.76));
   --ink: color-mix(in oklab, var(--color) 5%, black);
   --font: 100%/1.5 system-ui;
-  --space: clamp(6px, 6px + 2vw, 15px);
+  --space: clamp(6px, 6px + 2vw, 12px);
   --line: 1px solid;
   --container: 1280px;
 }
@@ -31,10 +31,16 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+header{
+  text-align: center;
+}
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
+  text-decoration: none;
+  font-weight: bold;
+  color: white;
 }
 img,
 svg {
@@ -50,7 +56,7 @@ main {
   margin: 0 auto calc(var(--space) * 4) auto;
 }
 footer {
-  position: fixed;
+  border-top: 2px solid black;
   bottom: 0;
   text-align: center;
 }