From 095f4635385d6144f6dd66482740c20fe9d3eff4 Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Thu, 19 Sep 2024 16:56:10 +0200 Subject: [PATCH 1/6] Adding html file --- wireframes.html | 83 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 wireframes.html diff --git a/wireframes.html b/wireframes.html new file mode 100644 index 00000000..1fc782b9 --- /dev/null +++ b/wireframes.html @@ -0,0 +1,83 @@ + + + + + + Understanding Git + + + + +
+

Read about Git

+

+ Learn the essentials of Git, why developers need it, and what branches + are. +

+
+ + +
+ +
+

What is Git?

+

+ Git is a distributed version control system that allows multiple + developers to collaborate on a project without overwriting each + other's changes. +

+
+

+ Git tracks changes in the source code, enabling you to revert to + earlier versions and manage different versions of the code. It's a + powerful tool for both solo developers and teams. +

+
+ +
+ + +
+

Why do developers need Git?

+

+ Git helps developers keep track of changes in code, enabling efficient + collaboration and minimizing conflicts. +

+
+

+ With Git, developers can work on different features or fixes + simultaneously, merge their changes, and avoid overwriting each + other's work. This makes Git essential for any team project. +

+
+ +
+ + +
+

What is a branch in Git?

+

+ A branch in Git is a separate version of your project where developers + can work on new features without affecting the main codebase. +

+
+

+ Branches allow developers to experiment, fix bugs, or build + features, then merge those changes back into the main project when + they’re ready. This makes Git an invaluable tool for version control + and collaboration. +

+
+ +
+
+ + + + + + + + From 240dc56ba9709383be25617f83be159ee375494e Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Thu, 19 Sep 2024 16:57:19 +0200 Subject: [PATCH 2/6] adding css file --- wireframe.css | 135 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 wireframe.css diff --git a/wireframe.css b/wireframe.css new file mode 100644 index 00000000..556a209a --- /dev/null +++ b/wireframe.css @@ -0,0 +1,135 @@ +/* General Styling */ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + margin: 0; + padding: 0; + color: #333; + background-color: #f9f9f9; + display: grid; + grid-template-rows: auto 1fr auto; + height: 100vh; +} + +a { + color: #3498db; + text-decoration: none; +} + +a:hover { + color: #2980b9; +} + +/* Header Styling */ +header { + background-color: #2c3e50; + color: #ecf0f1; + padding: 20px; + text-align: center; +} + +header h1 { + margin: 0; + font-size: 2.5rem; +} + +header p { + font-size: 1.2rem; + margin-top: 10px; +} + +/* Articles Section */ +.articles { + display: grid; + grid-template-rows: 1fr 1fr; + grid-template-columns: 1fr 1fr; + grid-gap: 20px; + padding: 20px; + height: calc(100vh - 200px); /* Adjust for header and footer */ +} + +.first-article { + grid-column: 1 / -1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #f39c12; + color: #fff; + padding: 20px; + border-radius: 5px; +} + +.second-article, +.third-article { + display: flex; + flex-direction: column; + justify-content: center; + padding: 15px; + background-color: #fff; + border: 1px solid #ddd; + border-radius: 5px; +} + +.second-article { + grid-column: 1 / 2; +} + +.third-article { + grid-column: 2 / 3; +} + +article h2 { + margin-top: 0; + color: #34495e; +} + +article p { + margin: 10px 0; +} + +article a { + color: #e74c3c; +} + +.more-text { + display: none; +} + +.read-more-btn { + background-color: #3498db; + color: white; + border: none; + padding: 10px; + cursor: pointer; + margin-top: 10px; + border-radius: 5px; +} + +.read-more-btn:hover { + background-color: #2980b9; +} + +/* Footer Styling */ +footer { + background-color: #2c3e50; + color: #ecf0f1; + text-align: center; + padding: 10px 0; + position: fixed; + width: 100%; + bottom: 0; +} + +/* Responsive Design */ +@media (max-width: 768px) { + .articles { + grid-template-columns: 1fr; + grid-template-rows: auto; + } + + .second-article, + .third-article { + grid-column: 1; + } +} From 08438743a53d2eb98278e5b558c4c3333691c6ac Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Thu, 19 Sep 2024 16:59:35 +0200 Subject: [PATCH 3/6] adding js file --- wireframe.js | 15 +++++++++++++++ wireframe.ts | 15 +++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 wireframe.js create mode 100644 wireframe.ts diff --git a/wireframe.js b/wireframe.js new file mode 100644 index 00000000..34eefaad --- /dev/null +++ b/wireframe.js @@ -0,0 +1,15 @@ +// JavaScript for 'Read more' functionality +const readMoreButtons = document.querySelectorAll(".read-more-btn"); + +readMoreButtons.forEach((button) => { + button.addEventListener("click", () => { + const moreText = button.previousElementSibling; + if (moreText.style.display === "block") { + moreText.style.display = "none"; + button.textContent = "Read more"; + } else { + moreText.style.display = "block"; + button.textContent = "Read less"; + } + }); +}); diff --git a/wireframe.ts b/wireframe.ts new file mode 100644 index 00000000..34eefaad --- /dev/null +++ b/wireframe.ts @@ -0,0 +1,15 @@ +// JavaScript for 'Read more' functionality +const readMoreButtons = document.querySelectorAll(".read-more-btn"); + +readMoreButtons.forEach((button) => { + button.addEventListener("click", () => { + const moreText = button.previousElementSibling; + if (moreText.style.display === "block") { + moreText.style.display = "none"; + button.textContent = "Read more"; + } else { + moreText.style.display = "block"; + button.textContent = "Read less"; + } + }); +}); From 8e31bb3ad4c78e9f566dc527087db065f64b1060 Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Thu, 19 Sep 2024 17:08:05 +0200 Subject: [PATCH 4/6] corrected error --- wireframes.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wireframes.html b/wireframes.html index 1fc782b9..ec0afda4 100644 --- a/wireframes.html +++ b/wireframes.html @@ -78,6 +78,6 @@

What is a branch in Git?

- + From b25a8ebb42c18286f907a7014c30880f0de45282 Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Thu, 19 Sep 2024 17:11:04 +0200 Subject: [PATCH 5/6] ts file deleted --- wireframe.ts | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 wireframe.ts diff --git a/wireframe.ts b/wireframe.ts deleted file mode 100644 index 34eefaad..00000000 --- a/wireframe.ts +++ /dev/null @@ -1,15 +0,0 @@ -// JavaScript for 'Read more' functionality -const readMoreButtons = document.querySelectorAll(".read-more-btn"); - -readMoreButtons.forEach((button) => { - button.addEventListener("click", () => { - const moreText = button.previousElementSibling; - if (moreText.style.display === "block") { - moreText.style.display = "none"; - button.textContent = "Read more"; - } else { - moreText.style.display = "block"; - button.textContent = "Read less"; - } - }); -}); From 42731bc2b8cbf5f34e665f0e298bfe669a41a379 Mon Sep 17 00:00:00 2001 From: kostiantynkovalchuk Date: Thu, 19 Sep 2024 17:16:42 +0200 Subject: [PATCH 6/6] changed file name --- wireframes.html => wireframe.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename wireframes.html => wireframe.html (100%) diff --git a/wireframes.html b/wireframe.html similarity index 100% rename from wireframes.html rename to wireframe.html