diff --git a/Wireframe/branch-image.jpg b/Wireframe/branch-image.jpg new file mode 100644 index 000000000..52cfb9985 Binary files /dev/null and b/Wireframe/branch-image.jpg differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..7ec6d29ba 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,64 @@ - - - - Wireframe - - - -
-

Wireframe

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

Wireframe

+

+ This page will show you the purpose of README file, the purpose of + Wireframe and what is branch in Git. It will include images and links to read more about each topic. +

+ +
+
+
+ an image showing an example of a README file +

+ 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 + +
+ an image showing a diagram of a Git branch +

What is a Branch in Git?

+

+ A branch in Git is a lightweight movable pointer to a commit. + It allows you to diverge from the mainline of development and work on features, experiments, or bug fixes + without affecting the main codebase. +

+ Read + more +
+ + + + + \ No newline at end of file diff --git a/Wireframe/placeholder.jpg b/Wireframe/placeholder.jpg new file mode 100644 index 000000000..00a1aba8c Binary files /dev/null and b/Wireframe/placeholder.jpg differ diff --git a/Wireframe/placeholder.svg b/Wireframe/placeholder.svg deleted file mode 100644 index ac36a0abc..000000000 --- a/Wireframe/placeholder.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..426b617d4 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -24,23 +24,28 @@ 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 { + +General rules for basic HTML elements in any context */ body { background: var(--paper); color: var(--ink); font: var(--font); } + a { padding: var(--space); border: var(--line); max-width: fit-content; + max-height: fit-content; } + img, svg { width: 100%; + height: 250px; object-fit: cover; + } + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -49,11 +54,18 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + footer { + background-color: black; + color: white; + font-size: 10px; position: fixed; bottom: 0; text-align: center; + box-sizing: border-box; + width: 100%; } + /* ====== 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 +77,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 +94,18 @@ article { text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space); - > * { + + >* { grid-column: 2/3; } - > img { + + >img { grid-column: span 3; + } } + +header { + text-align: center; + padding: var(--space); +} diff --git a/Wireframe/wireframe.jpg b/Wireframe/wireframe.jpg new file mode 100644 index 000000000..82bf93a9c Binary files /dev/null and b/Wireframe/wireframe.jpg differ 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