Skip to content

London | 26-ITP-January | Zadri Abdule | Sprint 1| Wireframe #815

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
Zadri415 wants to merge 25 commits into from
Closed

London | 26-ITP-January | Zadri Abdule | Sprint 1| Wireframe #815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
014d290
Add page title and description to header
Zadri415 May 22, 2025
8f34547
Add README article with image, title, summary, and link
Zadri415 May 22, 2025
e064199
Add wireframe article with image, title, summary, and link
Zadri415 May 22, 2025
df7d18d
Add article on Git branches with image, summary, and link
Zadri415 May 22, 2025
4178b1f
Add footer section to the webpage
Zadri415 May 22, 2025
d67d190
style: Add body margin and padding for clean layout
Zadri415 May 23, 2025
1746f17
style: Tweak article image styles for better layout and responsiveness
Zadri415 May 24, 2025
4415e8b
style: Add layout and border styling to header
Zadri415 May 24, 2025
801b703
style: Refine header typography for title and subtitle
Zadri415 May 24, 2025
cafa893
Add universal box-sizing rule to CSS
Zadri415 May 24, 2025
57c0984
Style links: remove underline, inherit color, add smooth transition
Zadri415 May 24, 2025
481dd13
Add two-column grid layout with spacing
Zadri415 May 24, 2025
ced0c2f
Add customer class to README image for layout fix
Zadri415 May 24, 2025
fe0b86d
Update styles after reverting to placeholder image
Zadri415 May 25, 2025
67d72c9
Remove README image
Zadri415 May 25, 2025
8746c7d
Revert article image styling to original
Zadri415 May 25, 2025
3b239c7
Add top border to footer
Zadri415 May 25, 2025
a58ebc4
Remove global box-sizing rule
Zadri415 May 25, 2025
d418f7f
Update footer text to 'Project Essentials. All rights reserved'
Zadri415 May 25, 2025
af73c21
Remove font-size from header h1
Zadri415 May 25, 2025
0efd589
Remove font-size from header p
Zadri415 May 25, 2025
2239019
Refine content for README, wireframe, and Git branch article sections
Zadri415 May 25, 2025
b7dcace
Update index.html
Zadri415 Jun 1, 2025
d542636
Merge branch 'CodeYourFuture:main' into feature/wireframe
Zadri415 Sep 18, 2025
fe9a39f
Update wirframe: add article images with alt text and fix footer styling
Zadri415 Sep 29, 2025
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
1 change: 1 addition & 0 deletions Module-Onboarding
Open in desktop
Submodule Module-Onboarding added at 72fe02
39 changes: 29 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,44 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<h1>Project Essentials Explained</h1>
<p>Discover the roles of README files, wireframes, and Git branches in software development.</p>
</header>

<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20240702120959/Readme1.png" alt="Github README editor with 'README' in green outline."/>
<h2>What is a README file?</h2>
<p>
A README file is an essential component of many software projects, especially those hosted on platforms like GitHub.
</p>
<a href="https://www.geeksforgeeks.org/what-is-readme-md-file/#what-is-a-readmemd-file">Read more</a>
</article>

<article>
<img src="https://cdn.sanity.io/images/599r6htc/regionalized/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.png?q=75&fit=max&auto=format&dpr=2" alt="what is a wireframe cover photo"/>
<h2>What is a Wireframe?</h2>
<p>
A wireframe is a visual blueprint of a website or application's layout, focusing on structure and functionality without the distraction of design elements.
</p>
<a href="https://balsamiq.com/learn/articles/what-are-wireframes">Read more</a>
</article>

<article>
<img src="https://i0.wp.com/digitalvarys.com/wp-content/uploads/2019/06/image-6.png?fit=640%2C257&ssl=1" alt="" />
<h2>What is a Branch in Git?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
In Git, a branch is an independent line of development that allows you to work on new features or fixes without affecting the main codebase.
</p>
<a href="">Read more</a>
<a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
</article>

</main>


<footer>
<p>
This is the default, provided code and no changes have been made yet.
&copy; 2025 Project Essentials. All rights reserved.
Copy link

@LonMcGregor LonMcGregor Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At times the footer text overlaps with the page content which is difficult to read - can you think of how to fix this while keeping the footer at the bottom of the viewport?

</p>
</footer>
</body>
Expand Down
54 changes: 51 additions & 3 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,54 @@ As well as useful links to learn more */
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */



body {
background: var(--paper);
color: var(--ink);
font: var(--font);

}



header {
max-width: var(--container);
margin: var(--space)auto;
padding: var(--space);
text-align: centre;
border-bottom: var(--line);
}

header h1 {
margin: 0;

text-align: center;
}

header p {
opacity: 0.8;
text-align: center;
}

a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
align-items: center;
gap: .5rem;
display: inline-flex;
text-decoration: none;
border-color: currentColor;;
border-radius: .5rem;
transition: transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
}

a:hover {
background-color: color-mix(in oklab, var(--paper)90%, white);
transform: scale(1.02);
}

img,
svg {
width: 100%;
Expand All @@ -48,11 +86,17 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
}
footer {
position: fixed;
bottom: 0;
text-align: center;
inset-inline: 0;
bottom: 0;
position: fixed;
background-color: rgb(148, 228, 228);

}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down Expand Up @@ -83,7 +127,11 @@ article {
> * {
grid-column: 2/3;
}

> img {
grid-column: span 3;

}


}
Loading