changed images

Author: Enice-Codes

Form-Controls/results.html

@@ -0,0 +1,23 @@
+
+form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    font-family: 'Times New Roman', Times, serif;
+    
+}
+label {
+    text-transform:uppercase,
+}
+.form-group {
+
+    display: grid,
+}
+ 
+input {
+    background-color: lightgray;
+    color: black;
+    border: none;
+    padding: 1ex 2ex,
+}
+

Form-Controls/style.css

@@ -10,23 +10,51 @@
     <header>
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A wireframe is a basic, two-dimensional blueprint or outline of
+         a website or app interface
       </p>
     </header>
     <main>
       <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+       
+        <img src="images/image1.jpg" alt="" />
+        <h2>What is the purpose of a README file?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          A README file is a document that provides information about a project,
+          including its purpose, how to use it, and any other relevant details.
+         It serves as a guide for users and developers who want to understand
+          the project and contribute to it.
+          
         </p>
         <a href="">Read more</a>
+ </article> 
+  
+    <article>
+      <img src="placeholder.svg" alt="" />
+      <h2>What is the purpose of a wireframe?</h2>
+      <p>
+        A wireframe is a visual representation of a website or app's layout and
+        structure. It serves as a blueprint for the design and development
+        process, allowing designers and developers to plan the user interface
+        and user experience before creating the final product.</p>
+        <a href="">Read more</a>
+    </article>
+
+      <article>
+<img src="placeholder.svg" alt="" />
+<h2>What is a branch?</h2>
+<p>
+  A branch in version control is a separate line of development. 
+  It allows you to work on different features or experiments without affecting the main codebase.
+</p>
+<a href="">Read more</a>  
+      
       </article>
+    
     </main>
     <footer>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        CYF Module Onboarding - Wireframe Exercise  2026
       </p>
     </footer>
   </body>

Wireframe/images/134005704773672948 - Copy.jpg

@@ -30,16 +30,33 @@ body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
+    
 }
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+#picture1{
+
+ 
+
+}
+
+ .grid-container{
+ 
+ }
+
+ 
+
 img,
 svg {
   width: 100%;
   object-fit: cover;
+    
+}
+.picture {
+  
 }
 /* ====== Site Layout ====== 
 Setting the overall rules for page regions
@@ -48,11 +65,13 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+
 }
+
 footer {
-  position: fixed;
-  bottom: 0;
-  text-align: center;
+  display: flex;
+  justify-content: center;  
+  align-items: center;
 }
 /* ====== 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;
   }
-}
+}