diff --git a/Wireframe/Capture.PNG b/Wireframe/Capture.PNG new file mode 100644 index 000000000..d720599b0 Binary files /dev/null and b/Wireframe/Capture.PNG differ diff --git a/Wireframe/branch-and-history.png b/Wireframe/branch-and-history.png new file mode 100644 index 000000000..71bd27c08 Binary files /dev/null and b/Wireframe/branch-and-history.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..f8beb7370 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,25 +8,43 @@
-

Wireframe

+

Wireframes, README files and Git Branches

- This is the default, provided code and no changes have been made yet. + This is a webpage with articles explaining some coding terms.

- -

Title

+ +

WIREFRAMES

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + Product designers and UX (user experience) professionals draw up wireframes to communicate how they plan to arrange and prioritize features, and how they intend for users to interact with its product or website. + It can help ensure the entire cross-functional team is on the same page in terms of strategic goals before beginning development work.

Read more
+
+ +

README files

+

+ A README is a file in the root folder of a repository, which displays under the files and folders in the root repo. + This means a README is often the first item a visitor will see when visiting your repository in Github. README files typically include information on: what the project does; why the project is useful; how users can get started with the project; where users can get help with your project; and who maintains and contributes to the project. +

+ Read more +
+
+ +

Git Branches

+

+ Git Branches allow us to work on different versions of our code simultaneously. + They allow us to create separate contexts where we can try new things or even work on multiple ideas in parallel without risking the codebase. + If we make changes on one branch, they do not impact the other branches until we merge or integrate the changes.

+ Read more +
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..d123680f5 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,7 +18,7 @@ As well as useful links to learn more */ ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); + --ink: color-mix(in oklab, var(--color) 5%, rgb(0, 30, 129)); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; @@ -27,14 +27,15 @@ As well as useful links to learn more */ /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { - background: var(--paper); - color: var(--ink); + background: #0000FF; + color: #FFFFFF; font: var(--font); } a { padding: var(--space); border: var(--line); max-width: fit-content; + color: #FFFFFF; } img, svg { @@ -50,7 +51,7 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; + position: static; bottom: 0; text-align: center; } @@ -77,7 +78,7 @@ Keeping things orderly and separate is the key to good, simple CSS. article { border: var(--line); padding-bottom: var(--space); - text-align: left; + text-align: justify; display: grid; grid-template-columns: var(--space) 1fr var(--space); > * {