Cape Town |2026-ITP- Jan| Jacob Tubajiki Menda | Sprint 1 | Wireframe

Wireframe/css/style.css

@@ -0,0 +1,229 @@
+body {
+    margin: 0;
+    padding: 0;
+    display: inline;
+    font-size: 15px;
+    width: 500%;
+    font-family: "Manrope";
+}
+#wire-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.readme {
+display: flex;
+flex-direction: column;
+align-items: center;
+padding: 20px;
+background: #f7f7f5;
+border: 1px solid black;
+box-sizing: border-box;
+width: 100%;
+
+
+
+}
+.img1 {
+    width: 800px;
+    margin: 5px auto 20px auto;
+}
+h2 {
+    font-size: 24px;
+}
+p{
+    font-size: 15px;
+}
+.btn {
+    display:inline-block;
+    border-radius:4px;
+    background-color: rgb(53, 230, 53);
+
+    text-align: center;
+    font-size: 20px;
+    font-weight: 600;
+    padding: 10px;
+    margin-right: 690px;
+
+}
+a {
+    text-decoration: none;
+    color: white;
+}
+.btn:hover{
+    padding-right: 25px;
+    transition: 0.5;
+}
+.question1 {
+    margin-left: -218px;
+    margin-bottom: 1px;
+}
+/* section-structure*/
+#structure-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    padding: 20px;
+    width: 50%;
+    margin: 10px auto 50px;
+     border: 2px solid black;
+     background: #f7f7f5;
+     align-items: start;
+
+}
+.git-structure {
+    display: block;
+    margin-top: 0;
+    border: 1px solid black;
+
+}
+.img-structure {
+    display: block;
+    width: 100%;
+    height: 250px;
+    object-fit: cover;
+
+
+
+}
+.branch-float{
+    margin-left: 15px;
+    margin-right: 30px;
+}
+h3 {
+    font-size: 15px;
+    display: flex;
+    justify-content: left;
+    text-align: left;
+}
+.paragraph {
+    float: none;
+    font-size: 12px;
+    width: 100%;
+    text-align: left;
+}
+.btn-2 {
+    display: inline-block;
+    border-radius: 4px;
+    background: rgb(53, 230, 53);
+
+    color: rgb(10, 10, 11);
+    text-align: center;
+    font-size: 22px;
+    font-weight: 600px;
+    padding: 10px;
+    cursor: pointer;
+    text-align: left;
+    margin-bottom: 10px;
+
+}
+.git-structure-2 {
+    display: block;
+    margin:0;
+    border: 1px solid black;
+
+    }
+.img-structure-frame { 
+    display: block;
+    width: 100%;
+    height: 250px;
+    object-fit: cover;
+
+}
+.frame {
+    margin: 16px;
+}
+.footer {
+    display: flex;
+    justify-content: center;
+    font-style: italic;
+    background-color: rgb(53, 230, 53);
+    color: white;
+}
+/* section responsive*/
+@media (max-width: 768px) {
+    header #wire-header,
+    header h1,
+    header p {
+        float: none;
+        text-align: center;
+        width: 100%;
+}
+.readme {
+    float: none;
+    text-align: center;
+}
+.img1{
+    width: 100%;
+}
+.question1{
+    padding-left: 20px;
+    float: none;
+    text-align: center;
+    width: 100%;
+}
+.question1 h2{
+    float: none;
+    text-align: center;
+    width: 100%;
+    margin-left: 60px;
+    font-size: 24%;
+}
+.question1 p {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    float: none;
+    padding-left: 100px;
+}
+.btn{
+    display: block;
+    text-align: center;
+    margin-right: 10px;
+}
+/*article section*/
+#structure-section {
+    float: none;
+    text-align: center;
+    width: 100%;
+    display: block;
+}
+#structure-section .git-structure{
+    float: none;
+    text-align: center;
+    width: 100%;
+    display: block;
+}
+#structure-section .img-structure{
+    width: 100%;
+    margin-right: 80px;
+}
+.branch-float{
+    float: none;
+    text-align: center;
+    width: 100%;
+}
+#structure-section .branch-float h3{
+    float: none;
+    text-align: center;
+    width: 100%;
+}
+#structure-section .branch-float p{
+    margin-right: 10px;
+    width: 100%;
+}
+#structure-section .git-structure-2{
+    float: none;
+    text-align: center;
+    width: 100%;
+    display: block;
+}
+.footer{
+    float: none;
+    text-align: center;
+    margin-left: 60px;
+}
+}
+
+

Wireframe/index.html

@@ -4,30 +4,65 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wireframe</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="css/style.css" />
   </head>
   <body>
-    <header>
+    <header id="wire-header">
       <h1>Wireframe</h1>
       <p>
-        This is the default, provided code and no changes have been made yet.
+        A wireframe is a basic, skeletal blueprint of a website.
       </p>
     </header>
     <main>
-      <article>
-        <img src="placeholder.svg" alt="" />
-        <h2>Title</h2>
+      <article class="readme">
+        <img class="img1"src="img/Readme.png" alt="readme" />
+       <div class="question1"> 
+        <h2> What is the purpose of a README file ?</h2>
         <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
-          voluptates. Quisquam, voluptates.
+          The readme file is used to explain what is uploaded and how we can install or use it.<br /> It even allows the uploader to add images and videos to help the reader navigate through the project.
         </p>
-        <a href="">Read more</a>
+        </div>
+        <button class="btn">
+        <a href="https://www.mygreatlearning.com/blog/readme-file/">Read more</a>
+        </cbutton>
+      </article>
+      <article id="structure-section">
+        <div class="git-structure">
+          <img class="img-structure" src="img/structure.png" alt="What is the purpose of a wireframe?">
+
+        <div class="branch-float">
+          <h3>
+            What is the purpose of a wireframe?
+          </h3>
+          <p class="paragraph">
+            Wireframes give you clarity about how your project will look, it help you in visualizing the layout and functionality.
+          </p>
+          <button class="btn-2">
+            <a href="https://www.geeksforgeeks.org/websites-apps/purpose-of-wireframing-in-web-design-process/">Read more</a>
+          </button>
+        </div>
+        </div>
+        <div class="git-structure-2">
+          <img class="img-structure-frame" src="img/frame.png" alt="What is a branch in Git">
+          <div class="frame">
+            <h3>
+             What is a branch in Git?
+            </h3>
+            <p>
+              a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project.
+            </p>
+            <button class="btn-2">
+              <a href="https://www.w3schools.com/git/git_branch.asp"> Read More </a>
+            </button>
+          </div>
+        </div>
       </article>
     </main>
-    <footer>
+    <footer class="footer">
       <p>
-        This is the default, provided code and no changes have been made yet.
+        copy write 2026 - mail by Jacob Menda.
       </p>
+
     </footer>
   </body>
-</html>
+</html>