Skip to content

Cape Town | May-ITP-2026 | Enice Mutanda| Sprint 2 | Wireframe #1449

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
Enice-Codes wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Cape Town | May-ITP-2026 | Enice Mutanda| Sprint 2 | Wireframe #1449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fdee2d7
added images to css
Enice-Codes Jun 12, 2026
3f8d368
fixed header css
Enice-Codes Jun 12, 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/Cafe Wireframe .jpg
View file
Open in desktop

@cjyuan cjyuan Jun 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Is this image still needed?

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/Classroom.jpg
View file
Open in desktop

@cjyuan cjyuan Jun 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

It's a better practice, in the context of webpages or web applications, to use only lowercase letters in file names.

For more info, do use AI to find out why (when you have time).

No change needed for this exercise.

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/bird.jpg
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.
49 changes: 39 additions & 10 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,62 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
</head>

<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
A wireframe is a simple visual blueprint or sketch of a webpage or
application.
</p>
</header>

<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="monkey.jpg" alt="Image of an upside down monkey" />
<h2>What is a README File?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A README file provides information about a project, including its
purpose, installation instructions, and how to use it.
</p>
<a href="">Read more</a>
<a href="https://en.wikipedia.org/wiki/README"
>Learn more about README files</a
>
</article>

<article>
<img src="bird.jpg" alt="An image of a black bird" />
<h2>What is a Wireframe?</h2>
<p>
A wireframe is a visual guide that helps designers and developers plan
the structure and layout of a webpage before building it.
</p>
<a href="https://www.productplan.com/glossary/wireframe/"
>Learn more about wireframes</a
>
</article>

<article>
<img src="Classroom.jpg" alt="an image of a glass building" />
<h2>What is a Git Branch?</h2>
<p>
A Git branch allows developers to work on new features or fixes
separately from the main project without affecting existing code.
</p>
<a
href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
>Learn more about Git branches</a
>
</article>
</main>

<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>Enice Mutanda 2026 CYF</p>
</footer>
</body>
</html>
Binary file added Wireframe/monkey.jpg
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.
16 changes: 16 additions & 0 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
margin: 0;
padding: 20px;
padding-bottom: 80px; /* to make room for the fixed footer */
}
a {
padding: var(--space);
Expand All @@ -49,10 +52,23 @@ main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}
header {
text-align: center;
margin-bottom: calc(var(--space) * 2);
}

header p {
max-width: 600px;
margin: 0 auto;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
padding: 1rem;
background-color: #f4f4f4;
border-top: 1px solid #ccc;
width: 100%;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down
Loading