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/Readme.png b/Wireframe/Readme.png
new file mode 100644
index 000000000..16aeb1a7a
Binary files /dev/null and b/Wireframe/Readme.png differ
diff --git a/Wireframe/Wireframe1.png b/Wireframe/Wireframe1.png
new file mode 100644
index 000000000..d7fe9e6f6
Binary files /dev/null and b/Wireframe/Wireframe1.png differ
diff --git a/Wireframe/git-branch.png b/Wireframe/git-branch.png
new file mode 100644
index 000000000..e536ff1bc
Binary files /dev/null and b/Wireframe/git-branch.png differ
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 0e014e535..b8cb1aa32 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -3,30 +3,54 @@
- Wireframe
+ Software development UNI
-
Wireframe
+
Code Hub
- This is the default, provided code and no changes have been made yet.
+ Learn to code with hands-on projects and expert guidance. Join our community of developers
-
-
Title
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
- voluptates. Quisquam, voluptates.
+
+
What is a README file?
+
+ A README is the front door of any software project — the first document a visitor reads when they encounter your code.
+ Typically named README.md and written in Markdown, it lives at the root of a repository and renders automatically on platforms like GitHub. Its core purpose is to answer three questions immediately: what does this project do, how do I get it running, and how do I use it? A well-crafted README...
+
+ A wireframe is a skeletal blueprint of a digital interface — a low-fidelity sketch that maps out layout and structure before any visual design begins.
+
+
+ Think of it as the floor plan of a building: it shows where the rooms are, how they connect, and how large each space is — but says nothing about paint colours or furniture. In UI/UX design, wireframes...
+
+ A branch in Git is an independent line of development — a lightweight pointer that lets you work on changes in isolation without affecting the main codebase.
+
+
+ Imagine a river that splits into a side channel. Work can proceed along the side channel independently; later, the two streams can be merged back together. In Git, this is exactly what a branch does: it diverges from a point in the commit history so
+
+ Read more
diff --git a/Wireframe/style.css b/Wireframe/style.css
index be835b6c7..bbaf7fa5b 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -1,8 +1,3 @@
-/* Here are some starter styles
-You can edit these or replace them entirely
-It's showing you a common way to organise CSS
-And includes solutions to common problems
-As well as useful links to learn more */
/* ====== Design Palette ======
This is our "design palette".
@@ -31,6 +26,10 @@ body {
color: var(--ink);
font: var(--font);
}
+header {
+ text-align: center;
+ padding: var(--space);
+}
a {
padding: var(--space);
border: var(--line);
@@ -86,4 +85,20 @@ article {
> img {
grid-column: span 3;
}
+
+ .intro {
+ font-size: 1em;
+ font-weight: bold;
+ }
+
+ .content {
+ font-size: 0.9em;
+ opacity: 0.8;
+ }
}
+footer {
+ padding-bottom: var(--space);
+ position: relative;
+ bottom: 0;
+ width: 100%;
+}
\ No newline at end of file