diff --git a/Wireframe/gitbranch.png b/Wireframe/gitbranch.png new file mode 100644 index 000000000..23f93ad89 Binary files /dev/null and b/Wireframe/gitbranch.png differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..1ca10c4b2 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,55 @@ - - - - Wireframe - - - -
-

Wireframe

+ + + + + Wireframe + + + + +
+

A Wireframe web page

+ +

+ This is a web page that shows the importance and function of the Wireframe,README file,and a branch of git. +

+
+
+
+ +

README FILE

- This is the default, provided code and no changes have been made yet. + A README file explains what a project is, how it works, and how to use it. +

-
-
-
- -

Title

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. -

- Read more -
-
- - - + A wireframe is a visual blueprint of a webpage or application.

+ + Read more + + +
+ +

Git branch

+

+ A Git branch is a separate version of the codebase. +

+ Read more +
+ + + + + \ No newline at end of file diff --git a/Wireframe/readme.png b/Wireframe/readme.png new file mode 100644 index 000000000..b90792f2d Binary files /dev/null and b/Wireframe/readme.png differ diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..6a52203d5 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -17,8 +17,8 @@ As well as useful links to learn more */ https://scrimba.com/learn-css-variables-c026 ====== Design Palette ====== */ :root { - --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); + --paper:rgb(94, 228, 41); + --ink: color-mix(in oklab, var(--color)5%,black); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; @@ -28,7 +28,7 @@ As well as useful links to learn more */ General rules for basic HTML elements in any context */ body { background: var(--paper); - color: var(--ink); + color: var(rgb(216, 192, 192)); font: var(--font); } a { @@ -48,11 +48,22 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + margin-bottom: calc(var(--space)*8); + padding-bottom: auto; + } footer { - position: fixed; + bottom: 0; text-align: center; + padding: var(--space); + background: whitesmoke; + border-top: var(--line); + position: fixed; + width: 100%; + margin: auto; + + } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. diff --git a/Wireframe/wireframe2.png b/Wireframe/wireframe2.png new file mode 100644 index 000000000..ba0795a94 Binary files /dev/null and b/Wireframe/wireframe2.png differ