CodeYourFuture · mjm-git185 · Jan 12, 2026 · Jan 13, 2026 · Jan 13, 2026 · Jan 14, 2026
diff --git a/Wireframe/branch.html b/Wireframe/branch.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wireframe cyf first sprint building a web page using Wireframe provided</title>
+    <link rel="stylesheet" href="martinStyle.css" />
+    </head>
+    <body>
+    <h1>What is a branch in Git?</h1>
+    <p>A git branch is a line of development that allows you to work on different versions of a project simultaneously as a team.
+      it also allows you to go back to previos iterations if needed.</p>
+    <h3><a href="martinWireFrame.html">Back</a></h3>
+  </body>
+  <footer class="footer">
+  </footer>
+</html>
diff --git a/Wireframe/education-concept-with-book.jpg b/Wireframe/education-concept-with-book.jpg
diff --git a/Wireframe/leaf-branch-vase-with-shadow.jpg b/Wireframe/leaf-branch-vase-with-shadow.jpg
diff --git a/Wireframe/low-angle-shot-barbed-wire-fence-clear-blue-sky.jpg b/Wireframe/low-angle-shot-barbed-wire-fence-clear-blue-sky.jpg
diff --git a/Wireframe/martinStyle.css b/Wireframe/martinStyle.css
@@ -0,0 +1,36 @@
+body{
+
+    width: vw1;
+    height: vh1;
+    background-color:rgb(31, 231, 164);
+    font-family: 'Martin Mono', monospace;
+    text-align: center;
+    img {max-width: 50%; }
+
+}
+
+
+.readMe{
+    margin: 50px;
+    padding: 50px;
+
+}
+.colum{
+    float: left;
+    width: 50%;
+    padding: 10px;
+
+}
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+
+}
+
+footer{
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+    background-color: rgb(245, 250, 248);}
diff --git a/Wireframe/martinWireFrame.html b/Wireframe/martinWireFrame.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wireframe cyf first sprint building a web page using Wireframe provided</title>
+    <link rel="stylesheet" href="martinStyle.css" />
+    </head>
+<body>
+<header>    
+    <h1>Wireframe cyf first sprint</h1>
+    <p> As part of the first sprint, we are building a web page using the provided wireframe. </p>
+    <p class="links"> <a href="readMePage.html">Read Me</a> | <a href="wireFrame.html">Wire Frame</a> | <a href="branch.html">Branch</a> </p>
+</header>
+
+<article class ="readMe">
+    <img src="education-concept-with-book.jpg" alt="a red book "  height ="200px"/>
+    <h2><a href="readMePage.html">Read Me</a></h2>
+    <p> This is my first sprint project for the Code Your Future web development course. The objective of this sprint is to create a web page based on a provided wireframe design. The project involves using HTML and CSS to replicate the layout and styling of the wireframe as closely as possible. This exercise will help me improve my front-end development skills and gain practical experience in building web pages from design mockups. </p>
+</article>
+
+<div class="row">
+
+    <div class="colum"> 
+        <article class = "wireFrame">
+    <img src="low-angle-shot-barbed-wire-fence-clear-blue-sky.jpg" height ="200px"alt="a barbed wire fence " />
+    <h2><a href="wireFrame.html">Wire Frame</a></h2>
+    <p> The wireframe provided for this sprint is a simple layout with a header, main content area, and footer. The main content area contains an article with an image, title, description, and a link to read more. The footer contains a simple paragraph. </p>
+
+        </article>
+    </div>
+    <div class="colum"></div>
+        <article class = "branch">
+    <img src="leaf-branch-vase-with-shadow.jpg" alt="a tree branch " height ="200px" />
+    <h2><a href="branch.html">Branch</a></h2>
+    <p> I have created a branch named "martin-wireframe" for this project. This branch contains all the code and files related to the wireframe project. I will be committing my changes to this branch as I work on the project. </p>
+
+        </article>
+    </div>
+</div>
+</body>
+<footer>
+    <p>Sprint 1</p>
+</footer>
+
+</html>
diff --git a/Wireframe/readMePage.html b/Wireframe/readMePage.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wireframe cyf first sprint building a web page using Wireframe provided</title>
+    <link rel="stylesheet" href="martinStyle.css" />
+    </head>
+    <body class="readMePage">
+       <h1>What is the purpose of a README file?</h1>
+    <p>A README file is used to give the user an overview of the installation process and usage instructions.</p>
+    <h3><a href="martinWireFrame.html">Back</a></h3>
+  </body>
+  <footer class="footer">
+  </footer>
+</html>
diff --git a/Wireframe/wireFrame.html b/Wireframe/wireFrame.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wireframe cyf first sprint building a web page using Wireframe provided</title>
+    <link rel="stylesheet" href="martinStyle.css" />
+    </head>
+  <body>
+    <h1>What is the purpose of a wireframe?</h1>
+    <p>A wireframe is used as a tool to guide the design process of an app, program or wedsite</p>
+    <h3><a href="martinWireFrame.html">Back</a></h3>
+  </body>
+  <footer class="footer">
+  </footer>
+</html>