diff --git a/Wireframe/images/How-To-Create-a-Git-Branch.png b/Wireframe/images/How-To-Create-a-Git-Branch.png new file mode 100644 index 000000000..c29eaa2b5 Binary files /dev/null and b/Wireframe/images/How-To-Create-a-Git-Branch.png differ diff --git a/Wireframe/images/low-to-final.png b/Wireframe/images/low-to-final.png new file mode 100644 index 000000000..98c6d67cc Binary files /dev/null and b/Wireframe/images/low-to-final.png differ diff --git a/Wireframe/images/readme.png b/Wireframe/images/readme.png new file mode 100644 index 000000000..ee5f0f7b5 Binary files /dev/null and b/Wireframe/images/readme.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..4c7a5c133 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,60 @@ - - - - Wireframe - - - -
-

Wireframe

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

Wireframe

+

+ The purpose of this project is to take a wireframe and express it in web code. +

+
+
+
+ an image depicting a GitHub logo addressing how to write a readme +

What is the purpose of a README file?

- This is the default, provided code and no changes have been made yet. + A README file gives readers a quick, clear understanding of a project. + It explains what the project does, why it exists, and how to use it. + In most cases, it includes setup steps, usage examples, and guidance for anyone who wants to contribute. + It’s essentially the project’s introduction and user manual in one place.

-
-
-
- -

Title

-

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

- Read more -
-
- - - + Read more + +
+ an image of git branch and its commit history +

What is a branch in Git?

+

+ A branch in Git is an independent line of development that lets you work on new features + or fixes without affecting the main codebase. It creates a safe space to experiment, collaborate, + and make changes, which can later be merged back into the main project when ready. +

+ Read more +
+ + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..6028fccbe 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -24,36 +24,84 @@ As well as useful links to learn more */ --line: 1px solid; --container: 1280px; } + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { - background: var(--paper); + --body-background: oklch(7 0 0); + --body-space: clamp(16px, 16px + 8vw, 60px); + background: var(--body-backgroung); color: var(--ink); font: var(--font); + padding: var(--body-space); + +} + +a { + --text-color: white; } + a { + color: var(--text-color); padding: var(--space); - border: var(--line); max-width: fit-content; + text-decoration: none; + border-radius: 10px; + background-color: #cf2e2e; + font-weight: bold; } + img, svg { width: 100%; object-fit: cover; } + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ +header { + text-align: center; + color: #cf2e2e; + + /* cadetblue */ +} + +h1 { + text-transform: uppercase; +} + +p { + --paragraph-font: 100%/2 Arial, Helvetica, sans-serif; + color: #6c6c89; + font: var(--paragraph-font); +} + main { - max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + } + footer { position: fixed; bottom: 0; + left: 0; text-align: center; + border-top: var(--line); + width: 100%; + background: oklch(0.07 0 0); + padding: 1rem; } + +footer { + + >*:first-child { + color: azure; + font-weight: bold; + } +} + /* ====== 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,10 +113,12 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { + + >*:first-child { grid-column: span 2; } } + /* ====== Article Layout ====== Setting the rules for how elements are placed in the article. Now laying out just the INSIDE of the repeated card/article design. @@ -80,10 +130,12 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + + >* { grid-column: 2/3; } - > img { + + >img { grid-column: span 3; } -} +} \ No newline at end of file