diff --git a/Wireframe/branch-in-git.jpg b/Wireframe/branch-in-git.jpg new file mode 100644 index 000000000..727abf5e2 Binary files /dev/null and b/Wireframe/branch-in-git.jpg differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..e160fdb94 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,82 @@ - - - Wireframe - + + + Wireframe. +
-

Wireframe

+

Wireframe Web Project

- This is the default, provided code and no changes have been made yet. + Learn about key tools every developer uses: README files, wireframes, + and Git branches.

- -

Title

+
+ Screenshot of a README file example showing project documentation +

What is the purpose of a README file?

+

+ A README file introduces a project, explaining what it does, how + to install it, and how to use it. It helps others understand your + project quickly. +

+ Read more
+
+
+
+ +
+ Example of a website wireframe showing layout structure +
+

What is the purpose of a wireframe?

+

+ A wireframe is a visual guide that outlines a webpages structure. + Designers and developers use it to plan layouts before adding + content or styling. +

+ Read more +
+
+
+ +
+ Diagram showing Git branches and their relationships +
+

What is a branch in Git? + +

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A Git branch allows developers to work on new features or fixes + separately from the main code. This keeps the main project stable + while updates are tested.

- Read more -
+ Read more + +
+ +
+ diff --git a/Wireframe/readme.jpg b/Wireframe/readme.jpg new file mode 100644 index 000000000..efa95aced Binary files /dev/null and b/Wireframe/readme.jpg differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..49e8e62c3 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -45,14 +45,23 @@ svg { Setting the overall rules for page regions https://www.w3.org/WAI/tutorials/page-structure/regions/ */ +header{ + text-align: center ; +} main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding-bottom: 3em; } footer { + background-color: #333; + color: white; + text-align: center; + padding: 1em; position: fixed; bottom: 0; - text-align: center; + width: 100%; + } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -74,16 +83,49 @@ 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 { +article { border: var(--line); padding-bottom: var(--space); - text-align: left; + text-align: center; display: grid; grid-template-columns: var(--space) 1fr var(--space); > * { grid-column: 2/3; } > img { - grid-column: span 3; + grid-column: 2/3; + } + padding-top: 1em; +} +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: 2/3; } } +article > div { + display: grid; + grid-template-columns: 1fr ; + align-items: center; + gap: var(--space); + margin-top: var(--space); +} +.uniform-size { + width: 300px; + height: 150px; + object-fit: cover; +} +.parent { + text-align: ; /* aligns contents to the right */ +} +.parent .child { + display: inline-block; /* allows the child to be sized and aligned */ + text-align: bottom; /* aligns text inside the child to the left */ +} \ No newline at end of file diff --git a/Wireframe/wireframed1.jpg b/Wireframe/wireframed1.jpg new file mode 100644 index 000000000..c550793dd Binary files /dev/null and b/Wireframe/wireframed1.jpg differ