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 f7b59df8c..77f9f3399 100644
--- a/Wireframe/README.md
+++ b/Wireframe/README.md
@@ -14,22 +14,22 @@ 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 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
+- [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
## Acceptance Criteria
-- [ ] Semantic HTML tags are used to structure the webpage.
-- [ ] The page scores 100 for Accessibility in the Lighthouse audit.
-- [ ] The page header includes a title and description.
-- [ ] The articles section has three unique articles, each including an image, title, summary, and a link.
-- [ ] The page footer is fixed to the bottom of the viewport.
-- [ ] The webpage is styled using a linked .css file.
-- [ ] The webpage is properly committed and pushed to a branch on GitHub.
+- [x] Semantic HTML tags are used to structure the webpage.
+- [x] The page scores 100 for Accessibility in the Lighthouse audit.
+- [x] The page header includes a title and description.
+- [x] The articles section has three unique articles, each including an image, title, summary, and a link.
+- [x] The page footer is fixed to the bottom of the viewport.
+- [x] The webpage is styled using a linked .css file.
+- [x] The webpage is properly committed and pushed to a branch on 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..0d91188ea 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,4 +1,4 @@
-
+
@@ -6,28 +6,53 @@
Wireframe
+
+
-
Wireframe
+
Wireframe, README files & Git Branches
- This is the default, provided code and no changes have been made yet.
+ This website will include brief explanations regarding these three topics, to give you a simple idea of how they are used.
+
-
-
Title
+
+
The Purpose Of A README File
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
- voluptates. Quisquam, voluptates.
+ A README file is a summary of your project.
+ It can include information, instructions and the purpose of the project.
+ A branch allows you to experiment with new features, styles and ideas separate from the "main" codebase.
+ This allows you to try different features without risking changes to the main branch.
+
+ Read more
+
+
+
+
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..ef7d4ef8e 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -18,14 +18,25 @@ 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%, rgba(0, 0, 0, 0.856));
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
- --line: 1px solid;
+ --line: 2px solid;
--container: 1280px;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
+
+header {
+
+ text-align: center;
+ width: 100;
+ color: rgb(0, 0, 0);
+ background-color: rgba(221, 240, 249, 0.645);
+ padding: 5px;
+
+}
+
body {
background: var(--paper);
color: var(--ink);
@@ -49,11 +60,8 @@ main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}
-footer {
- position: fixed;
- bottom: 0;
- text-align: center;
-}
+
+
/* ====== 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
@@ -75,6 +83,7 @@ Now laying out just the INSIDE of the repeated card/article design.
Keeping things orderly and separate is the key to good, simple CSS.
*/
article {
+
border: var(--line);
padding-bottom: var(--space);
text-align: left;
@@ -87,3 +96,21 @@ article {
grid-column: span 3;
}
}
+
+footer {
+
+ text-align: center;
+ width: 100;
+ color: rgb(0, 0, 0);
+ background-color: rgba(255, 255, 255, 0);
+ padding: 5px;
+
+
+
+}
+
+article {
+
+ background-color: rgba(221, 240, 249, 0.645);
+
+}
\ No newline at end of file
- 
+ 
+ 
+