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/img1.jpg b/Wireframe/img1.jpg new file mode 100644 index 000000000..9670831b5 Binary files /dev/null and b/Wireframe/img1.jpg differ diff --git a/Wireframe/img2.jpg b/Wireframe/img2.jpg new file mode 100644 index 000000000..ec5f2b4f5 Binary files /dev/null and b/Wireframe/img2.jpg differ diff --git a/Wireframe/img3.jpg b/Wireframe/img3.jpg new file mode 100644 index 000000000..a7def81eb Binary files /dev/null and b/Wireframe/img3.jpg differ diff --git a/Wireframe/index.html b/Wireframe/index.html index 0e014e535..b47ba0405 100644 --- a/Wireframe/index.html +++ b/Wireframe/index.html @@ -8,25 +8,42 @@
-

Wireframe

+

TECH NEWS

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

+
- -

Title

+ +

What is the purpose of a README file?

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, - voluptates. Quisquam, voluptates. + We'll explore how a README acts as the primary introduction and guide to a project.

- Read more + Read more
+
+ +

What is the purpose of a Wireframe?

+

+ Learn how a wireframe acts as a blueprint to help map out the struture and functionality of a project. +

+ Read more +
+
+ +

What is a branch in Git?

+

+ You'll learn how a git branch is a parallel workspace that allows for changes and commits without affecting the main branch. +

+ Read more +
+

diff --git a/Wireframe/style.css b/Wireframe/style.css index be835b6c7..e08d95d9e 100644 --- a/Wireframe/style.css +++ b/Wireframe/style.css @@ -20,9 +20,9 @@ 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 + 2vw, 8px); --line: 1px solid; - --container: 1280px; + --container: min(75%, 1280px); } /* ====== Base Elements ====== General rules for basic HTML elements in any context */ @@ -35,9 +35,14 @@ a { padding: var(--space); border: var(--line); max-width: fit-content; + text-decoration: none; +} +h2 { + margin-bottom: 0; } img, svg { + height: 300px; width: 100%; object-fit: cover; } @@ -49,10 +54,17 @@ main { max-width: var(--container); margin: 0 auto calc(var(--space) * 4) auto; } +header { + text-align: center; +} footer { position: fixed; bottom: 0; - text-align: center; + width: 100%; + display: flex; + justify-content: center; + background-color: white; + border: var(--line); } /* ====== Articles Grid Layout ==== Setting the rules for how articles are placed in the main element. @@ -77,6 +89,7 @@ Keeping things orderly and separate is the key to good, simple CSS. article { border: var(--line); padding-bottom: var(--space); + margin: var(--space); text-align: left; display: grid; grid-template-columns: var(--space) 1fr var(--space);