diff --git a/Wireframe/README.md b/Wireframe/README.md index aa85ec80b..fbccb4936 100644 --- a/Wireframe/README.md +++ b/Wireframe/README.md @@ -4,12 +4,12 @@ -- [ ] Use semantic HTML tags to structure the webpage -- [ ] Create three articles, each including an image, 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 -- [ ] Develop the habit of writing clean, well-structured, and error-free code +- [x] Use semantic HTML tags to structure the webpage +- [x] Create three articles, each including an image, 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 +- [x] Develop the habit of writing clean, well-structured, and error-free code ## Task @@ -27,13 +27,13 @@ There are some provided HTML and CSS files you can use to get started. You can u ## Acceptance Criteria -- [ ] Semantic HTML tags are used to structure the webpage. -- [ ] The page scores 100 for Accessibility in the Lighthouse audit. -- [ ] The webpage is styled using a linked .css file. -- [ ] The webpage is properly committed and pushed to a branch on GitHub. -- [ ] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. -- [ ] The page footer is fixed to the bottom of the viewport. -- [ ] The page layout closely match the wireframe. +- [x] Semantic HTML tags are used to structure the webpage. +- [x] The page scores 100 for Accessibility in the Lighthouse audit. +- [x] The webpage is styled using a linked .css file. +- [x] The webpage is properly committed and pushed to a branch on GitHub. +- [x] The articles section contains three distinct articles, each with its own unique image, title, summary, and link. +- [x] The page footer is fixed to the bottom of the viewport. +- [x] The page layout closely match the wireframe. ### Developers must adhere to professional standards. @@ -42,10 +42,10 @@ There are some provided HTML and CSS files you can use to get started. You can u These practices reflect the level of quality expected in professional work. They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [ ] My code is consistently formatted -- [ ] My page content is free of typos and grammatical mistakes -- [ ] I commit often and push regularly to GitHub +- [x] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [x] My code is consistently formatted +- [x] My page content is free of typos and grammatical mistakes +- [x] I commit often and push regularly to GitHub ## Resources diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..e1a0d35c2 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,33 +1,75 @@ - + + Wireframe
-

Wireframe

-

- This is the default, provided code and no changes have been made yet. -

+

Wireframe Task

-
- -

Title

+
+ README file example +

README file

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + ReadME file is a plain text document that is used as a user manual or + official document for a project. This file is useful because it helps + communicate important information to those using or collaborating on + the project.

- Read more + Make a Readme +
+
+ Website wireframe example +

Wireframe

+

+ A wireframe is a minimal skeletal blueprint of a website or app + interface. It is important in order to plan a project in advance. +

+ What are Wireframes? +
+
+ Git branch workflow diagram +

Git Branch

+

+ In Git, a branch is an identical copy of a project's code which is + then used to make changes on without having any effect on the main + original project. +

+ What is a Git Branch?
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..e4c150cd4 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -18,12 +18,22 @@ 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: color-mix(in oklab, var(--color) 5%, rgb(19, 19, 31)); --font: 100%/1.5 system-ui; --space: clamp(6px, 6px + 2vw, 15px); --line: 1px solid; --container: 1280px; } +h1 { + display: flex; + justify-content: center; +} +#git-branch-image { + height: 107%; +} +#git-branch-article h2 { + margin-top: 55px; +} /* ====== Base Elements ====== General rules for basic HTML elements in any context */ body { @@ -50,8 +60,6 @@ main { margin: 0 auto calc(var(--space) * 4) auto; } footer { - position: fixed; - bottom: 0; text-align: center; } /* ====== Articles Grid Layout ====