diff --git a/Wireframe/Instruction.svg b/Wireframe/Instruction.svg new file mode 100644 index 000000000..ac36a0abc --- /dev/null +++ b/Wireframe/Instruction.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..7944aa431 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,69 @@ - - - - Wireframe - - - -
-

Wireframe

+ + + + + Wireframe + + + + +
+
+

WIREFRAME

+
+

+ This is the webpage for understanding : +

+

+
+ +
+
+ Instruction Book\ +

Purpose of Readme file

- This is the default, provided code and no changes have been made yet. + A readme file is a document which contains essential information about a program. + It includes instructions, additional help and details regarding updates.

-
-
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more -
-
- - - + Read more + + + + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..ce3b4742b 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -38,7 +38,7 @@ a { } img, svg { - width: 100%; + /* width: 100%; */ object-fit: cover; } /* ====== Site Layout ====== @@ -53,6 +53,8 @@ footer { position: fixed; bottom: 0; text-align: center; + width: 100%; + background-color: #f1cece; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -86,4 +88,24 @@ article { > img { grid-column: span 3; } + .Wireframe { + float: left; + width: 50%; + padding: 15px; + } +} + +.side-by-side { + display: flex; + flex-direction: row; } + +.article { + width: 50%; +} + +.center-header { + display: flex; + width: 100%; + justify-content: center; +} \ No newline at end of file diff --git a/Wireframe/wireframe.png b/Wireframe/wireframe.png deleted file mode 100644 index 731f01503..000000000 Binary files a/Wireframe/wireframe.png and /dev/null differ