Skip to content

London | 26-ITP-May | Chinwe Chukwuma | Sprint 2 | Wireframe #1411

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

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

London | 26-ITP-May | Chinwe Chukwuma | Sprint 2 | Wireframe #1411

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
4206a32
Added wireframe title
ChinweP Jun 3, 2026
f2277c0
Added page title and description
ChinweP Jun 3, 2026
02587f9
Added full-width README article with image, title, summary and link
ChinweP Jun 3, 2026
b7aec1c
Added two bottom articles with images and summaries
ChinweP Jun 3, 2026
f7c71a9
Added css to place bottom articles side by side
ChinweP Jun 3, 2026
faf93fe
Added images from the placeholder.svg folder
ChinweP Jun 4, 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
48 changes: 37 additions & 11 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,57 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<title>Understanding README, Wireframe and Git Branch</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Understanding README Files, Wireframes and Git Branches</h1>
<p>
This is the default, provided code and no changes have been made yet.
</p>
A simple guide explaining three important web development concepts.</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<!--Top article (full-width)-->
<article class="top-article" id="readme-article">
<img src="placeholder.svg" alt="Illustration of a README file" />
<h2>What is the purpose of a README file?</h2>
<p>
A README file explains what a project is about, how to use it, and any important information someone needs before working with the project code.
</p>
<a href="https://www.makeareadme.com/" target="_blank">Read more</a>
</article>

<!--Bottom two articles side -by-side-->

<section class="bottom-articles">

<article id="wireframe-article">
<img src="placeholder.svg" alt="Example of a webpage wireframe"/>
<h2>What is the purpose of a wireframe?</h2>
<p>
A wireframe is a simple layout plan that shows where content will go on a webpage before you start designing or coding.
</p>

<a href="https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe/" target="_blank">Read more</a>
</article>

<article id="branch-article">
<img src="placeholder.svg" alt="Diagram showing Git branches"/>
<h2>What is a branch in Git?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A Git baranch lets developers work on new features without affecting the main project. When finished, the branch can be merged back in.
</p>
<a href="">Read more</a>
<a href="https://www.atlassian.com/git/tutorials/using-branches" target="_blank">Read more</a>
</article>

</section>

</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
Footers usually contain contact links and other information about the site overall
</p>

</footer>
</body>
</html>
23 changes: 23 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,3 +87,26 @@ article {
grid-column: span 3;
}
}

.bottom-articles {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
}

header{
text-align: center;
}

footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}




Loading