diff --git a/Wireframe/GitBranchimage.avif b/Wireframe/GitBranchimage.avif new file mode 100644 index 000000000..a6fbe2585 Binary files /dev/null and b/Wireframe/GitBranchimage.avif differ 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/READMEimage.avif b/Wireframe/READMEimage.avif new file mode 100644 index 000000000..918a7c8e8 Binary files /dev/null and b/Wireframe/READMEimage.avif differ diff --git a/Wireframe/Wireframeimage.avif b/Wireframe/Wireframeimage.avif new file mode 100644 index 000000000..df087bb4b Binary files /dev/null and b/Wireframe/Wireframeimage.avif differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..26109c6b4 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -1,5 +1,5 @@ - - + + @@ -10,24 +10,48 @@

Wireframe

- This is the default, provided code and no changes have been made yet. + This website contains information about README files, wireframes and Git + branches.

-
- -

Title

+
+ README Glasses +

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 the primary introduction and quick start guide + to a project.

- Read more + Read more +
+ +
+ Wireframe Plans +

What is the purpose of a Wireframe?

+

+ A Wireframe is the blueprint for a website or app, it outline the + layout and structure before the building process. +

+ Read more +
+ +
+ Someone's been commiting often +

What is a branch in Git?

+

+ It is a seperate workspace where you can make changes and test new + ideas without affecting the main project. +

+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..eea868b16 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -26,10 +26,18 @@ As well as useful links to learn more */ } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ + header { + text-align: center; +} + body { background: var(--paper); color: var(--ink); font: var(--font); + background: rgba(160, 227, 134, 0.252); + padding: 0; + margin: 0; + } a { padding: var(--space); @@ -53,7 +61,11 @@ footer { position: fixed; bottom: 0; text-align: center; + background: white; + display: block; + width: 100%; } + /* ====== 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 +99,9 @@ article { grid-column: span 3; } } + +.articles { + background: #1bf91b29; + +} +