Skip to content

Sheffield | 26-ITP-Jan | Mahammad Osman | Sprint 1 | Wireframe #1046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Darkidd77 wants to merge 5 commits into from
Closed

Sheffield | 26-ITP-Jan | Mahammad Osman | Sprint 1 | Wireframe #1046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3aad5d9
Update index.html and style.css for GitHub Learning project
Darkidd77 Jan 24, 2026
81ee296
Add CSS reset and new images for GitHub wireframe
Darkidd77 Feb 7, 2026
3b741ec
Refine image alt text and enhance CSS styles for layout and responsiv…
Darkidd77 Feb 7, 2026
775e6d8
Remove obsolete image and update image references in HTML Fixed the v…
Darkidd77 Feb 7, 2026
f591f1d
Refactor HTML structure removing unnecessary section tags to fix the…
Darkidd77 Feb 8, 2026
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
Binary file added Wireframe/assets/images/GitHubLogo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/assets/images/GithubBranching.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Wireframe/assets/images/GithubCommitsStaging.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 24 additions & 7 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,42 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Github Learning</h1>
<p>
This is the default, provided code and no changes have been made yet.
Learning resources and tutorials for GitHub.
</p>
</header>
<main>
<article >
<img src="assets/images/GitHubLogo.png" alt="GitHub logo" />
<h2>What is GitHub?</h2>
<p>
GitHub is a code hosting platform for version control and collaboration.
It lets you and others work together on projects from anywhere.
</p>
<a href="">Read more</a>
</article>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="assets/images/GithubBranching.png" alt="Github Branching" />
<h2>Branching</h2>
<p>
Branching allows you to create separate lines of development within a repository.
</p>
<a href="">Read more</a>
</article>
<article>
<img src="assets/images/GithubCommitsStaging.png" alt="GitHub commits and staging diagram"/>
<h2>Commits</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A commit is a snapshot of your repository at a specific point in time.
</p>
<a href="">Read more</a>
</article>

</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
© 2026 Github Learning
</p>
</footer>
</body>
Expand Down
23 changes: 22 additions & 1 deletion Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,30 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
margin: 0;
margin-bottom: 100px;
padding: 0;
min-height: 100vh;
}
header {
text-align: center;
padding: calc(var(--space) * 2) 0;
}

a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
}
img,
svg {
height: 300px;
width: 100%;
object-fit: contain;
}

article:first-child img {
height: 300px;
object-fit: cover;
}
/* ====== Site Layout ======
Expand All @@ -48,11 +63,17 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
padding: 0 calc(var(--space) * 2);
}
footer {
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
background: var(--paper);
padding: var(--space);
border-top: var(--line);

}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down Expand Up @@ -86,4 +107,4 @@ article {
> img {
grid-column: span 3;
}
}
}