diff --git a/Wireframe/README.html b/Wireframe/README.html new file mode 100644 index 000000000..67f9858c2 --- /dev/null +++ b/Wireframe/README.html @@ -0,0 +1,24 @@ + + + + + + + README Files + + +
+

README Files

+
+
+
+ +

What is the purpose of a README file?

+

+ A README file is used to give information so a user can ascertain key details of a program such as its function, how it works, how to set it up and general updates. +

+ Back +
+
+ + \ No newline at end of file diff --git a/Wireframe/branch.html b/Wireframe/branch.html new file mode 100644 index 000000000..f3b42836e --- /dev/null +++ b/Wireframe/branch.html @@ -0,0 +1,24 @@ + + + + + + + Git Branches + + +
+

Git Branches

+
+
+
+ +

What is a branch in Git?

+

+ A branch in Git is a seperate workspace used to experiment or make changes without affecting the main project. +

+ Back +
+
+ + \ No newline at end of file diff --git a/Wireframe/images/branch.png b/Wireframe/images/branch.png new file mode 100644 index 000000000..b4f9b5d57 Binary files /dev/null and b/Wireframe/images/branch.png differ diff --git a/Wireframe/images/readme.png b/Wireframe/images/readme.png new file mode 100644 index 000000000..c17a1fbfc Binary files /dev/null and b/Wireframe/images/readme.png differ diff --git a/Wireframe/images/wireframes.png b/Wireframe/images/wireframes.png new file mode 100644 index 000000000..ada490ae7 Binary files /dev/null and b/Wireframe/images/wireframes.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..7ac8be658 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -4,29 +4,46 @@ Wireframe - +
-

Wireframe

+

Web Development

- This is the default, provided code and no changes have been made yet. + A series of articles to help you on your journey of web development

- -

Title

+ +

Git Branches

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + In this article we will cover the purpose of a branch in git

- Read more + Read more +
+ +
+ +

Wireframes

+

This article will cover the importance of a Wireframe

+ Read more +
+ +
+ +

README files

+

We shall look at the purpose of a README file

+ Read more
+ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..04a02cd72 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -16,25 +16,39 @@ As well as useful links to learn more */ https://web.dev/articles/min-max-clamp https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ + +@import url("https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"); + :root { --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); - --font: 100%/1.5 system-ui; + --font: 100%/1.5 "Permanent Marker", bold; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; --container: 1280px; } + +h1, +header p +{ + text-align: center; +} + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ -body { +body{ background: var(--paper); color: var(--ink); font: var(--font); + text-transform: uppercase; } + a { padding: var(--space); border: var(--line); max-width: fit-content; + color: var(--color) + } img, svg { @@ -49,11 +63,13 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } -footer { - position: fixed; - bottom: 0; +footer, +footer hr { + margin-top: auto; text-align: center; + min-width: span 2 ; } + /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. Inspect this in Devtools and click the "grid" button in the Elements view @@ -65,7 +81,7 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { + > *:nth-child(1) { grid-column: span 2; } } @@ -87,3 +103,11 @@ article { grid-column: span 3; } } + +article h2{ + margin-bottom:0px; +} + +article p { + margin-top:4px; +} diff --git a/Wireframe/wireframe.html b/Wireframe/wireframe.html new file mode 100644 index 000000000..ff3bbc6ff --- /dev/null +++ b/Wireframe/wireframe.html @@ -0,0 +1,24 @@ + + + + + + + Wireframes + + +
+

Wireframes

+
+
+
+ +

What is the purpose of a Wireframe?

+

+ A wireframe is used as a structural blueprint that allows a developer to envision how a project will look. +

+ Back +
+
+ + \ No newline at end of file