diff --git a/Wireframe/images/download.png b/Wireframe/images/download.png new file mode 100644 index 000000000..12fcd351d Binary files /dev/null and b/Wireframe/images/download.png differ diff --git a/Wireframe/images/readme-links.webp b/Wireframe/images/readme-links.webp new file mode 100644 index 000000000..dbfc06d38 Binary files /dev/null and b/Wireframe/images/readme-links.webp differ diff --git a/Wireframe/images/wireframe-example-plain.png b/Wireframe/images/wireframe-example-plain.png new file mode 100644 index 000000000..ac4f48e35 Binary files /dev/null and b/Wireframe/images/wireframe-example-plain.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..8f009d8cc 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,4 +1,4 @@ - + @@ -8,26 +8,65 @@
-

Wireframe

+

Starting a project

- This is the default, provided code and no changes have been made yet. + The following page contains an introduction to a README file,a + WIREFRAME, and to GIT BRANCH.

- -

Title

+ Screenshot of a README for a repository. To the left of a section heading, a link icon is outlined in dark orange. +

What is a README file

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A README file can be added to the repository to tell other people why + the project is useful, what they can do with the project, and how they + can use it.

- Read more + Read more +
+
+ Wireframe mockup of a product page for a cushy fleece hoodie with image gallery, size selector, and add-to-cart button +

What is a WIREFRAME

+

+ A wireframe is the skeleton of your digital project. Think of it as + the foundation for your website, app, or dashboard. It focuses on + layout, and content placement—not on colors, fonts, or any visual + polish. +

+ Read more +
+
+ Diagram titled ‘GIT Branch and its Operations’ showing master and two feature branches with colored nodes and commits, plus a git logo +

What is a GIT BRANCH

+

+ Use a branch to isolate development work without affecting other + branches in the repository. Each repository has one default branch, + and can have multiple other branches. You can merge a branch into + another branch using a pull request. +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..de0ba1827 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -27,20 +27,51 @@ 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); font: var(--font); + margin-bottom: 9rem; } + +header { + margin-bottom: 5rem; +} + +h1 { + margin-bottom: 5rem; + text-align: center; +} + +article h2, +article p, +article a { + margin-left: 1rem; +} + +article h2 { + height: 4rem; + display: flex; + align-items: center; + margin-bottom: 1rem; +} + a { + background-color: #000004; + color: white; padding: var(--space); - border: var(--line); - max-width: fit-content; + border: none; + display: inline-block; + max-width: 7rem; + max-height: 2rem; + text-align: center; + text-decoration: none; } img, svg { width: 100%; + height: 280px; object-fit: cover; } + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -50,9 +81,13 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { + background-color: aquamarine; + text-align: center; position: fixed; + bottom: 0; - text-align: center; + left: 0; + right: 0; } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -78,12 +113,10 @@ article { border: var(--line); padding-bottom: var(--space); text-align: left; - display: grid; - grid-template-columns: var(--space) 1fr var(--space); - > * { - grid-column: 2/3; - } - > img { - grid-column: span 3; - } + display: flex; + flex-direction: column; +} + +article a { + margin-top: auto; }