diff --git a/Wireframe/branch.html b/Wireframe/branch.html new file mode 100644 index 000000000..c968fc52c --- /dev/null +++ b/Wireframe/branch.html @@ -0,0 +1,17 @@ + + + + + + Wireframe cyf first sprint building a web page using Wireframe provided + + + +

What is a branch in Git?

+

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.

+

Back

+ + + \ No newline at end of file diff --git a/Wireframe/education-concept-with-book.jpg b/Wireframe/education-concept-with-book.jpg new file mode 100644 index 000000000..55aa98880 Binary files /dev/null and b/Wireframe/education-concept-with-book.jpg differ diff --git a/Wireframe/leaf-branch-vase-with-shadow.jpg b/Wireframe/leaf-branch-vase-with-shadow.jpg new file mode 100644 index 000000000..1dd001d94 Binary files /dev/null and b/Wireframe/leaf-branch-vase-with-shadow.jpg differ 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 new file mode 100644 index 000000000..e2e4941f0 Binary files /dev/null and b/Wireframe/low-angle-shot-barbed-wire-fence-clear-blue-sky.jpg differ diff --git a/Wireframe/martinStyle.css b/Wireframe/martinStyle.css new file mode 100644 index 000000000..7373eb266 --- /dev/null +++ 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 new file mode 100644 index 000000000..451b3f931 --- /dev/null +++ b/Wireframe/martinWireFrame.html @@ -0,0 +1,46 @@ + + + + + + Wireframe cyf first sprint building a web page using Wireframe provided + + + +
+

Wireframe cyf first sprint

+

As part of the first sprint, we are building a web page using the provided wireframe.

+

Read Me | Wire Frame | Branch

+
+ +
+ a red book +

Read Me

+

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.

+
+ +
+ +
+
+ a barbed wire fence +

Wire Frame

+

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.

+ +
+
+
+
+ a tree branch +

Branch

+

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.

+ +
+
+ + + + + diff --git a/Wireframe/readMePage.html b/Wireframe/readMePage.html new file mode 100644 index 000000000..7815eb03a --- /dev/null +++ b/Wireframe/readMePage.html @@ -0,0 +1,16 @@ + + + + + + Wireframe cyf first sprint building a web page using Wireframe provided + + + +

What is the purpose of a README file?

+

A README file is used to give the user an overview of the installation process and usage instructions.

+

Back

+ + + \ No newline at end of file diff --git a/Wireframe/wireFrame.html b/Wireframe/wireFrame.html new file mode 100644 index 000000000..80e27db0a --- /dev/null +++ b/Wireframe/wireFrame.html @@ -0,0 +1,16 @@ + + + + + + Wireframe cyf first sprint building a web page using Wireframe provided + + + +

What is the purpose of a wireframe?

+

A wireframe is used as a tool to guide the design process of an app, program or wedsite

+

Back

+ + + \ No newline at end of file