diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..d9929beb0 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,51 @@ - - - - Wireframe - - - -
-

Wireframe

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

Wireframe

+

+ This is a brief web page for sprint 1 developed by Gloria. +

+
+
+
+ README documentation +

Article One: What is the purpose of a README file?

+

The README file provides a quick overview and essential instructions.

+ Read more +
+
+ Wireframe example +

Article Two: What is the purpose of a wireframe?

+

The wireframe acts as a skeleton of a website or application interface.

+ Read more +
+
+ Git branching concept +

Article Three: What is a branch in Git?

- This is the default, provided code and no changes have been made yet. + A branch is a separate version of a repository used to isolate changes.

-
-
-
- -

Title

-

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

- Read more -
-
- - - + Read more + + + + + + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..5039b1c56 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,18 +18,24 @@ As well as useful links to learn more */ ====== Design Palette ====== */ :root { --paper: oklch(7 0 0); - --ink: color-mix(in oklab, var(--color) 5%, black); + --ink: rgb(0, 0, 0); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; - --container: 1280px; + --container: 1024px; } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ +header { + text-align: center; + padding: calc(var(--space) * 2); +} + body { background: var(--paper); color: var(--ink); font: var(--font); + padding-bottom: 70px; } a { padding: var(--space); @@ -47,13 +53,22 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ */ main { max-width: var(--container); - margin: 0 auto calc(var(--space) * 4) auto; + margin: 0 auto calc(var(--space) * 10) auto; } footer { position: fixed; bottom: 0; + width: 100%; text-align: center; + + height: 60px; + line-height: 60px; + + background: white; + border-top: 1px solid black; + box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1); } + /* ====== 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 @@ -87,3 +102,8 @@ article { grid-column: span 3; } } + +article img { + height: 200px; +} +