diff --git a/Wireframe/img/Gitbranch1.jpg b/Wireframe/img/Gitbranch1.jpg new file mode 100644 index 000000000..58f35068b Binary files /dev/null and b/Wireframe/img/Gitbranch1.jpg differ diff --git a/Wireframe/img/Wireframe1.png b/Wireframe/img/Wireframe1.png new file mode 100644 index 000000000..189e96ce0 Binary files /dev/null and b/Wireframe/img/Wireframe1.png differ diff --git a/Wireframe/img/readmeimg.png b/Wireframe/img/readmeimg.png new file mode 100644 index 000000000..16aeb1a7a Binary files /dev/null and b/Wireframe/img/readmeimg.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..b2fd96e22 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,25 +8,41 @@
-

Wireframe

+

Web Development & Planning

+

Here are some useful steps & information to help you get started with web development.

+
+
+
+ wireframe +

Wireframe

- This is the default, provided code and no changes have been made yet. + What is the purpose of a wireframe? Think of "Wireframe" as the Architectural blueprint of a website or App. + A visual guide that outlines the structure, layout and placement of elements on a website.

- -
-
+
+ README File +

README File

+

+ What is the purpose of a README file? It serves as the introductory guide and instruction manual for a project, + explaining what the software does, how to install and run it, and how others can contribute to it. +

+ Read more +
+
+ Git Branch +

Branch in Git

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + What is a branch in Git? A branch in Git is a separate line of development that allows you to isolate your work, + experiment with new features, fix bugs or make changes without affecting the main codebase.

- Read more - -
+ Read more + + diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..3cc58dcd1 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -22,25 +22,31 @@ As well as useful links to learn more */ --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; - --container: 1280px; + --container: 900px; } + /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { background: var(--paper); color: var(--ink); font: var(--font); + margin: 0 auto; + text-align: center; } + a { padding: var(--space); border: var(--line); max-width: fit-content; } + 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/ @@ -48,12 +54,22 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding-bottom: 2rem; + width: 70%; + text-align: center; } + footer { position: fixed; bottom: 0; text-align: center; + margin: 0 auto; + padding: 0.5rem 0; + background-color: white; + width: 100%; + border-top: var(--line); } + /* ====== 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,25 +81,35 @@ main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space); - > *:first-child { + + >*:first-child { grid-column: span 2; } } + +header { + text-align: center; +} + +article { + border: var(--line); + padding: var(--space); + text-align: left; +} + /* ====== 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 { +section { 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; - } } + +img { + width: 100%; + grid-column: span 3; +} \ No newline at end of file