diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..1cdac774a 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -10,23 +10,41 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + A simple way to explain how a website will look and work before adding all the fancy details.

-

Title

+

README

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + README is a guidebook for a project. Imagine you get a new toy, and it comes with a small booklet that explains what the toy is, how to use it, and how to take care of it. + A README file does the same for a project, it tells people what the project is about, how to use it, and any important details they need to know.

- Read more + Read more +
+
+ +

Wireframe

+

+ A Wireframe is like a blueprint for a website. Imagine you're drawing a plan for a house before building it. You sketch where the rooms, doors, and windows will go, but you don't add colors, + furniture, or decorations yet.
A Wireframe does the same for a website, it shows where pictures, buttons, and texts will go, all the while doesn't worry about making it look pretty yet. +

+ Read more +
+
+ +

Git

+

+ Git is like a magic notebook for your project. It's similar to when you're drawing a picture, and every time you make a change, the notebook saves a copy of your work. If you make a mistake, you can go back to an earlier + version and fix it.
Git does the same for your code, it keeps track of all the changes you make so you can go back if something goes wrong. +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..f90065220 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -26,7 +26,15 @@ As well as useful links to learn more */ } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ +html, body { + height: 100%; + margin: 0; + +} body { + display: flex; + flex-direction: column; + min-height:100vh; background: var(--paper); color: var(--ink); font: var(--font); @@ -46,14 +54,21 @@ Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ main { + flex: 1; max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } + footer { + background: #f5f5f5; + text-align: center; + padding: 10px; + border-top: 1px solid #ccc; 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 @@ -61,6 +76,8 @@ Play with the options that come up. https://developer.chrome.com/docs/devtools/css/grid https://gridbyexample.com/learn/ */ + + main { display: grid; grid-template-columns: 1fr 1fr; @@ -69,11 +86,13 @@ main { 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. Keeping things orderly and separate is the key to good, simple CSS. */ + article { border: var(--line); padding-bottom: var(--space); @@ -87,3 +106,7 @@ article { grid-column: span 3; } } + +header { + text-align: center; +}