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; + } +} diff --git a/wireframe.html b/wireframe.html new file mode 100644 index 00000000..ec0afda4 --- /dev/null +++ b/wireframe.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. +

+
+ +
+
+ + + + + + + + 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"; + } + }); +});