diff --git a/Wireframe/README.md b/Wireframe/README.md index 0ae0216d1..2a6b63b4b 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -14,11 +14,11 @@ There are some provided HTML and CSS files you can use to get started. You can u -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including a title, summary, and a link -- [ ] Check a webpage against a wireframe layout -- [ ] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) -- [ ] Use version control by committing often and pushing regularly to GitHub +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including a title, summary, and a link +- [x] Check a webpage against a wireframe layout +- [x] Test web code using [Lighthouse](https://programming.codeyourfuture.io/guides/testing/lighthouse) +- [x] Use version control by committing often and pushing regularly to GitHub ## Acceptance Criteria diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..381db1a26 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -3,31 +3,61 @@ - Wireframe + Wireframe to Webcode Assignment-Sprint 1
-

Wireframe

+

Wireframe Webcode Assignment

- This is the default, provided code and no changes have been made yet. + A brief summary of the three most important constituents of Github.

- -

Title

+ Welcome mat, Headline -What is a ReadMe +

What is the Purpose of a Readme File

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + A readme file serves as a guide for users and developers, providing + essential information about a project, including its purpose, + installation instructions, usage guidelines, and contribution + protocols. It helps ensure that everyone involved understands how to + effectively use and contribute to the project.

- Read more + Read more +
+
+ Wireframe example. Headline- What is the Purpose of a Wireframe +

What is the Purpose of a Wireframe

+

+ A wireframe is a visual guide that represents the skeletal framework + of a website or application. Its purpose is to outline the layout, + structure, and functionality of a page before the actual design and + development process begins. Wireframes help stakeholders visualize + the user interface, plan content placement, and ensure that the user + experience is intuitive and effective. +

+ Read more +
+
+ Git logo, Headline -What is a branch in Git +

What is a branch in Git

+

+ A branch in Git is a separate line of development that allows + multiple versions of a project to coexist. It enables developers to + work on new features, bug fixes, or experiments without affecting the + main codebase. Branches facilitate collaboration, as team members can + work independently and later merge their changes back into the main + branch when ready. +

+ Read more
- + \ No newline at end of file diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..cb1b83993 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -20,7 +20,7 @@ As well as useful links to learn more */ --paper: oklch(7 0 0); --ink: color-mix(in oklab, var(--color) 5%, black); --font: 100%/1.5 system-ui; - --space: clamp(6px, 6px + 2vw, 15px); + --space: clamp(6px, 6px + 2px, 15px); --line: 1px solid; --container: 1280px; } @@ -31,6 +31,12 @@ body { color: var(--ink); font: var(--font); } + +header{ + text-align: center; + padding: calc(var(--space) * 2) var(--space); +} + a { padding: var(--space); border: var(--line); @@ -48,11 +54,17 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; + padding: var(--space); + } footer { - position: fixed; - bottom: 0; + text-align: center; + width: 95%; + background-color: var(--paper); + padding: var(--space); + color: var(--ink); + } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element.