diff --git a/Wireframe/images/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.avif b/Wireframe/images/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.avif new file mode 100644 index 000000000..56f2a0840 Binary files /dev/null and b/Wireframe/images/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.avif differ diff --git a/Wireframe/images/placeholder.svg b/Wireframe/images/placeholder.svg new file mode 100644 index 000000000..ac36a0abc --- /dev/null +++ b/Wireframe/images/placeholder.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/Wireframe/images/pr-retargeting-diagram1.webp b/Wireframe/images/pr-retargeting-diagram1.webp new file mode 100644 index 000000000..9f50a9357 Binary files /dev/null and b/Wireframe/images/pr-retargeting-diagram1.webp 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.png b/Wireframe/images/wireframe.png new file mode 100644 index 000000000..731f01503 Binary files /dev/null and b/Wireframe/images/wireframe.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..14f4b9db5 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,86 @@ - - + + Wireframe - + + +
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. +

Wireframe

+

+ A wireframe is a simple visual guide that shows the structure of a webpage + before it is built. It helps plan layout and design.

+
- -

Title

+ Illustration showing README documentation links +

About Readme File

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + README files introduce a project, explain how to install it, and help + others understand how to use or contribute to it.

- Read more + + Read more + +
+ +
+ Yellow wireframe layout illustration for webpage planning +

About Wireframe

+

+ A wireframe is a simple visual guide that shows the structure of a + webpage before it is built. It helps plan layout and design. +

+ + Read more + +
+ +
+ Diagram showing Git branches and pull requests +

About the branch

+

+ A branch in Git is a separate line of development that lets you work on + new features without changing the main codebase. +

+ + Read more +
+ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..4000b9a07 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -17,6 +17,7 @@ As well as useful links to learn more */ https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ :root { + -color:#000; --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; @@ -27,33 +28,58 @@ 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); + display: flex; + flex-direction: column; + min-height: 100vh; } a { padding: var(--space); border: var(--line); max-width: fit-content; + text-decoration: none; + color: inherit; } img, svg { width: 100%; object-fit: cover; } +header{ + text-align: center; + color: rgb(18, 87, 114); + background-color: beige; + font-size: larger; + padding: 2rem; +} /* ====== Site Layout ====== Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ main { - max-width: var(--container); + max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space); + padding-bottom: 4rem; +} +main > *:first-child{ +grid-column: span 2; } footer { - position: fixed; - bottom: 0; + position: fixed; + bottom: 0; + left: 0; + width: 100%; + background-color: beige; text-align: center; -} + padding: 1rem; + z-index: 1000; + } + .main-title{ + font-family: cursive; + font-style: italic + } /* ====== 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,19 +87,6 @@ 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; - gap: var(--space); - > *: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. -Keeping things orderly and separate is the key to good, simple CSS. -*/ article { border: var(--line); padding-bottom: var(--space); @@ -81,9 +94,15 @@ article { display: grid; grid-template-columns: var(--space) 1fr var(--space); > * { +/* ====== 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. +*/ + grid-column: 2/3; } > img { - grid-column: span 3; + grid-column: span 3 } }