Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

Feature/wireframe #195

Open
kostiantynkovalchuk wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Feature/wireframe #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
095f463
Adding html file
kostiantynkovalchuk Sep 19, 2024
240dc56
adding css file
kostiantynkovalchuk Sep 19, 2024
0843874
adding js file
kostiantynkovalchuk Sep 19, 2024
8e31bb3
corrected error
kostiantynkovalchuk Sep 19, 2024
b25a8eb
ts file deleted
kostiantynkovalchuk Sep 19, 2024
42731bc
changed file name
kostiantynkovalchuk Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 135 additions & 0 deletions wireframe.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
83 changes: 83 additions & 0 deletions wireframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Understanding Git</title>
<link rel="stylesheet" href="wireframe.css" />
</head>
<body>
<!-- Page Header -->
<header>
<h1>Read about Git</h1>
<p>
Learn the essentials of Git, why developers need it, and what branches
are.
</p>
</header>

<!-- Articles Section -->
<section class="articles">
<!-- First Article -->
<article class="first-article">
<h2>What is Git?</h2>
<p>
Git is a distributed version control system that allows multiple
developers to collaborate on a project without overwriting each
other's changes.
</p>
<div class="more-text">
<p>
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.
</p>
</div>
<button class="read-more-btn">Read more</button>
</article>

<!-- Second Article -->
<article class="second-article">
<h2>Why do developers need Git?</h2>
<p>
Git helps developers keep track of changes in code, enabling efficient
collaboration and minimizing conflicts.
</p>
<div class="more-text">
<p>
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.
</p>
</div>
<button class="read-more-btn">Read more</button>
</article>

<!-- Third Article -->
<article class="third-article">
<h2>What is a branch in Git?</h2>
<p>
A branch in Git is a separate version of your project where developers
can work on new features without affecting the main codebase.
</p>
<div class="more-text">
<p>
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.
</p>
</div>
<button class="read-more-btn">Read more</button>
</article>
</section>

<!-- Page Footer -->
<footer>
<p>© 2024 Git Learning. All rights reserved.</p>
</footer>

<!-- JavaScript for 'Read more' functionality -->
<script src="wireframe.js"></script>
</body>
</html>
15 changes: 15 additions & 0 deletions wireframe.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
}
});
});