diff --git a/Wireframe/README.md b/Wireframe/README.md
index f7b59df8c..8134a757a 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 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
diff --git a/Wireframe/book.jpg b/Wireframe/book.jpg
new file mode 100644
index 000000000..9e314740d
Binary files /dev/null and b/Wireframe/book.jpg differ
diff --git a/Wireframe/github-cat.png b/Wireframe/github-cat.png
new file mode 100644
index 000000000..267a20327
Binary files /dev/null and b/Wireframe/github-cat.png differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..667861fb2 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -1,33 +1,60 @@
-
-
- Wireframe
-
+
+
+ Wireframe, Readme file and Github branches explained
+
+
-
Wireframe
+
Wireframe, Readme file and Github branches explained
- This is the default, provided code and no changes have been made yet.
+ This is the header, meant to give an overview of what can be found on the page. It could be a whole lot prettier,
+ but this page was built on the principle that production beats perfection.
+
-
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
- voluptates. Quisquam, voluptates.
-
+ This article should be on the left side of the page and discuss the usefulness of a Readme file.
+ Readme files are designed to help a page designer figure out
+ what needs to be done and how they are expected to go about it.
+
+ Github branches are elements of a project on Github. Everyone working on a project should make a new branch
+ for any small or big change alike. They help keeping track of changes, specifically when working
+ on a project with several people.
+
+ Read more
+
+
+
+
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..66fbdfb56 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -17,8 +17,8 @@ As well as useful links to learn more */
https://scrimba.com/learn-css-variables-c026
====== Design Palette ====== */
:root {
- --paper: oklch(7 0 0);
- --ink: color-mix(in oklab, var(--color) 5%, black);
+ --paper: oklch(70% 0 0);
+ --ink: black;
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
@@ -45,15 +45,10 @@ svg {
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
-main {
- max-width: var(--container);
- margin: 0 auto calc(var(--space) * 4) auto;
-}
-footer {
- position: fixed;
- bottom: 0;
- text-align: center;
+header {
+ 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
@@ -61,13 +56,29 @@ Play with the options that come up.
https://developer.chrome.com/docs/devtools/css/grid
https://gridbyexample.com/learn/
*/
+
main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
- > *:first-child {
- grid-column: span 2;
- }
+ max-width: var(--container);
+ margin: 0 auto calc(var(--space) * 4) auto;
+ padding-bottom: 80px; /* same as footer height */
+}
+
+footer {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 80px;
+ text-align: center;
+ background-color: #04aa6d;
+}
+
+/* First article spans full width */
+main > article:first-child {
+ grid-column: span 2;
}
/* ====== Article Layout ======
Setting the rules for how elements are placed in the article.
@@ -80,10 +91,12 @@ article {
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
- > * {
- grid-column: 2/3;
- }
- > img {
- grid-column: span 3;
- }
+}
+
+article > * {
+ grid-column: 2 / 3;
+}
+
+article > img {
+ grid-column: span 3;
}
-