diff --git a/Wireframe/branch.svg b/Wireframe/branch.svg new file mode 100644 index 000000000..2ccaf7d20 --- /dev/null +++ b/Wireframe/branch.svg @@ -0,0 +1,11 @@ + + + + Layer 1 + + + + + BRANCH? + + \ No newline at end of file diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..3b370f1a2 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,70 @@ - - - - Wireframe - - - -
-

Wireframe

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

+
    +
  • + What is the purpose of a README file? +
    • +
  • + What is the purpose of a wireframe? +
    • +
  • + What is a branch in Git? +
    • +
+ This is the webpage to provide detail explanation for the above questions +

+
+
+
+ +

What is the purpose of a README file?

- This is the default, provided code and no changes have been made yet. + A README file is the foundational documentation for a software, dataset, or coding project. It serves as a + project's "front door," designed to help users quickly understand what the project does, how to install and use + it, and how to contribute

-
-
-
- -

Title

-

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

- Read more -
-
- - - + Read more + + +
+ +

What is a branch in Git?

+

+ A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in Git + is master . +

+ Read more +
+ + + + + \ No newline at end of file diff --git a/Wireframe/readme.svg b/Wireframe/readme.svg new file mode 100644 index 000000000..868317bf7 --- /dev/null +++ b/Wireframe/readme.svg @@ -0,0 +1,18 @@ + + + + Layer 1 + + + + + BRANCH? + + + + + + + README? + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..16846431c 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -24,6 +24,7 @@ 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 { @@ -31,16 +32,19 @@ body { color: var(--ink); font: var(--font); } + a { padding: var(--space); border: var(--line); max-width: fit-content; } + 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/ @@ -49,11 +53,13 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + footer { position: fixed; bottom: 0; text-align: center; } + /* ====== 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 +71,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 +88,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 diff --git a/Wireframe/wireframe.svg b/Wireframe/wireframe.svg new file mode 100644 index 000000000..abe5ed549 --- /dev/null +++ b/Wireframe/wireframe.svg @@ -0,0 +1,18 @@ + + + + Layer 1 + + + + + BRANCH? + + + + + + + WIREFRAME? + + \ No newline at end of file