diff --git a/Wireframe/Capture.PNG b/Wireframe/Capture.PNG
new file mode 100644
index 000000000..d720599b0
Binary files /dev/null and b/Wireframe/Capture.PNG differ
diff --git a/Wireframe/branch-and-history.png b/Wireframe/branch-and-history.png
new file mode 100644
index 000000000..71bd27c08
Binary files /dev/null and b/Wireframe/branch-and-history.png differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..f8beb7370 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,25 +8,43 @@
-
Wireframe
+
Wireframes, README files and Git Branches
- This is the default, provided code and no changes have been made yet.
+ This is a webpage with articles explaining some coding terms.
-
-
Title
+
+
WIREFRAMES
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
- voluptates. Quisquam, voluptates.
+ Product designers and UX (user experience) professionals draw up wireframes to communicate how they plan to arrange and prioritize features, and how they intend for users to interact with its product or website.
+ It can help ensure the entire cross-functional team is on the same page in terms of strategic goals before beginning development work.
+ A README is a file in the root folder of a repository, which displays under the files and folders in the root repo.
+ This means a README is often the first item a visitor will see when visiting your repository in Github. README files typically include information on: what the project does; why the project is useful; how users can get started with the project; where users can get help with your project; and who maintains and contributes to the project.
+
+ Git Branches allow us to work on different versions of our code simultaneously.
+ They allow us to create separate contexts where we can try new things or even work on multiple ideas in parallel without risking the codebase.
+ If we make changes on one branch, they do not impact the other branches until we merge or integrate the changes.
+ Read more
+
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..d123680f5 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -18,7 +18,7 @@ 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(0, 30, 129));
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
@@ -27,14 +27,15 @@ As well as useful links to learn more */
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {
- background: var(--paper);
- color: var(--ink);
+ background: #0000FF;
+ color: #FFFFFF;
font: var(--font);
}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
+ color: #FFFFFF;
}
img,
svg {
@@ -50,7 +51,7 @@ main {
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
- position: fixed;
+ position: static;
bottom: 0;
text-align: center;
}
@@ -77,7 +78,7 @@ Keeping things orderly and separate is the key to good, simple CSS.
article {
border: var(--line);
padding-bottom: var(--space);
- text-align: left;
+ text-align: justify;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
> * {