diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..7db7c6c94 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,26 +8,64 @@
-

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

+ GitHub README for Scientist, a Ruby library for refactoring critical paths, showing the 'How do I science?' section with explanation of testing refactored code under load +

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..9f33056a6 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -27,20 +27,38 @@ As well as useful links to learn more */ /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { - background: var(--paper); + background-color: rgb(235, 219, 194); color: var(--ink); font: var(--font); + margin-bottom: 9rem; } + +header { + margin-bottom: 5rem; +} + +h1 { + margin-bottom: 5rem; + text-align: center; +} + a { + background-color: #4A90E2; + 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%; object-fit: cover; } + /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ @@ -50,9 +68,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 +100,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; }