Git Branch
diff --git a/Wireframe/style.css b/Wireframe/style.css
index f3cf23487..cb61fb515 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -55,6 +55,15 @@ header h1,p {
margin: var(--space) 0;
}
+h2 {
+ text-align: center;
+ margin: var(--space) 0;
+}
+
+.second-line p{
+ text-align: left;
+}
+
footer {
position: fixed;
bottom: 0;
@@ -97,3 +106,10 @@ article {
grid-column: span 3;
}
}
+
+.second-line img {
+ height: 150px; /* or any height you prefer */
+ object-fit: contain; /* keeps the aspect ratio */
+ display: block;
+ margin: 0 auto; /* optional: centers the image */
+}
From e215723e19c98e22d5fcf794026a8fbd98ac8fc1 Mon Sep 17 00:00:00 2001
From: plaetor
Date: Sat, 31 May 2025 14:18:52 +0100
Subject: [PATCH 11/17] changed paragraph in footer
---
Wireframe/Untitled-1.html | 1 +
Wireframe/index.html | 2 +-
2 files changed, 2 insertions(+), 1 deletion(-)
create mode 100644 Wireframe/Untitled-1.html
diff --git a/Wireframe/Untitled-1.html b/Wireframe/Untitled-1.html
new file mode 100644
index 000000000..74e0f12e3
--- /dev/null
+++ b/Wireframe/Untitled-1.html
@@ -0,0 +1 @@
+!
\ No newline at end of file
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 8dbd535fb..2f008cb75 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -44,7 +44,7 @@ Git Branch
- This is the default, provided code and no changes have been made yet.
+ This page was created as a simple example of a wireframe and to explain some common coding terms. It is not intended to be a complete guide but rather a starting point for understanding these concepts.
From 5de20b077bb5ed6a04be7e2b59f03b9cb626faf1 Mon Sep 17 00:00:00 2001
From: plaetor
Date: Sat, 31 May 2025 22:53:46 +0100
Subject: [PATCH 12/17] applied prettier formatter to web document
---
Wireframe/Untitled-1.html | 1 -
Wireframe/index.html | 70 ++++++++++++++++++++++++++++++---------
2 files changed, 55 insertions(+), 16 deletions(-)
delete mode 100644 Wireframe/Untitled-1.html
diff --git a/Wireframe/Untitled-1.html b/Wireframe/Untitled-1.html
deleted file mode 100644
index 74e0f12e3..000000000
--- a/Wireframe/Untitled-1.html
+++ /dev/null
@@ -1 +0,0 @@
-!
\ No newline at end of file
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 2f008cb75..d91e89964 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -8,43 +8,83 @@
- Wireframe
+ Wireframe
- This wep page is a brief guide on some of the terms we use in coding. I will explain in my own words what the main terms mean and how they apply to our code.
+ This wep page is a brief guide on some of the terms we use in coding. I
+ will explain in my own words what the main terms mean and how they apply
+ to our code.
-
+
Purpose of a README File
- A README file is a document that provides information about a project. It typically includes details such as the project's purpose, how to install and use it, and any other relevant information that users or developers might need.
- The README file is often the first thing that users see when they visit a project's repository, so it's important to make it clear and informative.
+ A README file is a document that provides information about a
+ project.
+ It typically includes details such as the project's purpose, how to
+ install and use it, and any other relevant information that
+ users or
+ developers might need. The README file is often the first thing that
+ users see when they visit a project's repository, so it's
+ important to
+ make it clear and informative.
- More Info
+ More Info
-
+
Wireframe
- A wireframe is a visual representation of a web page or application. It serves as a blueprint for the design and layout of the page, showing where elements like text, images, and buttons will be placed.
- Wireframes are often created in the early stages of a project to help designers and developers plan the structure and functionality of the page before moving on to more detailed design work.
+ A wireframe is a visual representation of a web page or application.
+ It serves as a blueprint for the design and layout of the page,
+ showing where elements like text, images, and buttons will be placed.
+ Wireframes are often created in the early stages of a project to help
+ designers and developers plan the structure and functionality of the
+ page before moving on to more detailed design work.
- More Info
+ More Info
-
+
Git Branch
- A branch in Git is a separate line of development within a project. It allows developers to work on new features or bug fixes without affecting the main codebase.
- When a branch is created, it starts as a copy of the main branch (usually called "main" or "master"). Developers can make changes in their branch and then merge those changes back into the main branch when they're ready.
+ A branch in Git is a separate line of development within a project. It
+ allows developers to work on new features or bug fixes without
+ affecting the main codebase. When a branch is created, it starts as a
+ copy of the main branch (usually called "main" or "master").
+ Developers can make changes in their branch and then merge those
+ changes back into the main branch when they're ready.
- More Info
+ More Info
- This page was created as a simple example of a wireframe and to explain some common coding terms. It is not intended to be a complete guide but rather a starting point for understanding these concepts.
+ This page was created as a simple example of a wireframe and to explain
+ some common coding terms. It is not intended to be a complete guide but
+ rather a starting point for understanding these concepts.
From 5507c14ad3a3b26d3f538356cbba4683a151e542 Mon Sep 17 00:00:00 2001
From: plaetor
Date: Tue, 3 Jun 2025 00:40:09 +0100
Subject: [PATCH 13/17] centred footer
---
Wireframe/index.html | 2 +-
Wireframe/style.css | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index d91e89964..81d59b86f 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -83,7 +83,7 @@ Git Branch
diff --git a/Wireframe/style.css b/Wireframe/style.css
index cb61fb515..0ccc1f2a8 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -68,7 +68,7 @@ footer {
position: fixed;
bottom: 0;
text-align: center;
- left: 35%;
+ left: 25%;
}
footer p {
text-align: center;
From 260c70a40374f599d1b2fb39d9922f3652d6a2e3 Mon Sep 17 00:00:00 2001
From: plaetor
Date: Tue, 3 Jun 2025 22:25:06 +0100
Subject: [PATCH 14/17] left aligned the paragraphs, used prettier formatter on
the file
---
Wireframe/index.html | 13 +++++--------
Wireframe/style.css | 8 +++++---
2 files changed, 10 insertions(+), 11 deletions(-)
diff --git a/Wireframe/index.html b/Wireframe/index.html
index 81d59b86f..cf916626c 100644
--- a/Wireframe/index.html
+++ b/Wireframe/index.html
@@ -10,7 +10,7 @@
Wireframe
- This wep page is a brief guide on some of the terms we use in coding. I
+ This web page is a brief guide on some of the terms we use in coding. I
will explain in my own words what the main terms mean and how they apply
to our code.
@@ -23,14 +23,11 @@ Wireframe
/>
Purpose of a README File
- A README file is a document that provides information about a
- project.
+ A README file is a document that provides information about a project.
It typically includes details such as the project's purpose, how to
- install and use it, and any other relevant information that
- users or
+ install and use it, and any other relevant information that users or
developers might need. The README file is often the first thing that
- users see when they visit a project's repository, so it's
- important to
+ users see when they visit a project's repository, so it's important to
make it clear and informative.
Git Branch
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 0ccc1f2a8..51b719f66 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -55,14 +55,16 @@ header h1,p {
margin: var(--space) 0;
}
+article p{
+ text-align: left;
+}
+
h2 {
text-align: center;
margin: var(--space) 0;
}
-.second-line p{
- text-align: left;
-}
+
footer {
position: fixed;
From 10a645964f7c7c26eaa89d00c15ad2e0e9c9c0e3 Mon Sep 17 00:00:00 2001
From: plaetor
Date: Tue, 3 Jun 2025 22:30:27 +0100
Subject: [PATCH 15/17] fixed alignment of paragraph in footer
---
Wireframe/style.css | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 51b719f66..055ec9dc7 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -64,13 +64,11 @@ h2 {
margin: var(--space) 0;
}
-
-
footer {
position: fixed;
bottom: 0;
text-align: center;
- left: 25%;
+ left: 2%;
}
footer p {
text-align: center;
From 11a8753d6732a868889d8b292695a138db2e9f4b Mon Sep 17 00:00:00 2001
From: plaetor
Date: Wed, 8 Oct 2025 15:27:40 +0100
Subject: [PATCH 16/17] made the footer text stick to the bottom of the
viewport
---
Wireframe/style.css | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index 055ec9dc7..cb2148fb2 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,6 +30,9 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
}
a {
padding: var(--space);
@@ -48,6 +51,7 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
+ flex: 1;
}
header h1,p {
@@ -65,10 +69,11 @@ h2 {
}
footer {
- position: fixed;
+ position: static;
bottom: 0;
text-align: center;
- left: 2%;
+ left: 0;
+ width:100%;
}
footer p {
text-align: center;
From a147383ed69d00c89526aa42a7192976aa1a1926 Mon Sep 17 00:00:00 2001
From: plaetor
Date: Thu, 9 Oct 2025 15:17:22 +0100
Subject: [PATCH 17/17] added white background for contrast
---
Wireframe/style.css | 10 +++-------
1 file changed, 3 insertions(+), 7 deletions(-)
diff --git a/Wireframe/style.css b/Wireframe/style.css
index cb2148fb2..d69b35e08 100644
--- a/Wireframe/style.css
+++ b/Wireframe/style.css
@@ -30,9 +30,6 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
- display: flex;
- flex-direction: column;
- min-height: 100vh;
}
a {
padding: var(--space);
@@ -51,7 +48,6 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
- flex: 1;
}
header h1,p {
@@ -69,11 +65,11 @@ h2 {
}
footer {
- position: static;
+ position: fixed;
bottom: 0;
text-align: center;
- left: 0;
- width:100%;
+ left: 2%;
+ background: var(--paper); /* to add contrast */
}
footer p {
text-align: center;