Skip to content

Cape Town | 26-ITP-MAY | LIYEMA MFENGWANA | Sprint 2 | WIREFRAME #1370

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
LiyemaMfengwana wants to merge 1 commit into
base: main
Choose a base branch
from
+263 −97
Open

Cape Town | 26-ITP-MAY | LIYEMA MFENGWANA | Sprint 2 | WIREFRAME #1370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
144 changes: 115 additions & 29 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,119 @@
<!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.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.

<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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Inter:wght@400;600&display=swap"
rel="stylesheet">
<meta name="description" content=" Learn about README files, wireframes, and Git branches.">

</head>

<body>
<header class="page-hero">
<h1 class="page-hero">Wireframe</h1>
<p class="page-subtitle">
Learn about README files, wireframes, and Git branches.
</p>
</header>
<main class="container">
<!-- Featured card (full width) -->
<article class="card card--featured">
<div class="card__media">
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3"
alt="Person reading project documentation">
</div>
<div class="card__body">
<h2 class="card__title">What is the purpose of a README file?</h2>
<p class="card__summary">
A README introduces a project: what it is, why it exists, and how to use, install, run, and contribute to it.
It orients new users and contributors, sets expectations (requirements, license, roadmap), and centralizes
quick-start commands and links. In short, it’s the project’s front door and owner’s manual.
</p>
<a href="">Read more</a>
<a class="btn" href="#readme-details">Read More</a>
</div>
</article>


<!-- Two-column row -->
<div class="grid">
<article class="card">
<div class="card__media">
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3"
alt="Person reading project documentation">
</div>
<div class="card__body">
<h2 class="card__title">What is the purpose of a wireframe?</h2>
<p class="card__summary">
A wireframe is a low‑fidelity layout of a page. It maps structure, hierarchy, and placement of elements
(headers, media, text, buttons) without visual polish. Teams use wireframes to align on content priority,
user flow, and functionality early—reducing rework before design and code.
</p>
<a class="btn" href="#wireframe-details">Read More</a>
</div>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</footer>
</body>
</html>

<article class="card">
<div class="card__media">
<img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c"
alt="Developer working with Git and code">
</div>
<div class="card__body">
<h2 class="card__title">What is a branch in Git?</h2>
<p class="card__summary">
Comment on lines +62 to +69
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan May 30, 2026

Choose a reason for hiding this comment

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

Please note that in practice adding elements that are not included in the wireframe may not be advisable, as it can lead to deviations from the intended design.

No change needed.

A Git branch is an independent line of development. It lets you make changes, experiment, and review work
without affecting the main history. When ready, merge the branch back (often via pull request) to integrate
tested, reviewed changes into the primary codebase.
</p>
<a class="btn" href="#git-branch-details">Read More</a>
</div>
</article>
</div>

<!-- “read more” anchors -->
<section class="details" id="readme-details" aria-label="README details">
<h3>README essentials</h3>
<ul>
<li>Project overview and goals</li>
<li>Installation and quick start</li>
<li>Usage examples and configuration</li>
<li>Contributing guidelines and license</li>
<li>Links to docs, issues, and support</li>
</ul>
</section>

<section class="details" id="wireframe-details" aria-label="Wireframe details">
<h3>Why wireframe first</h3>
<ul>
<li>Clarifies content priority and layout</li>
<li>Enables fast feedback before visuals</li>
<li>De-risks scope and uncovers edge cases</li>
<li>Acts as a blueprint for designers/devs</li>
</ul>
</section>

<section class="details" id="git-branch-details" aria-label="Git branch details">
<h3>Branch workflow highlights</h3>
<ul>
<li>Create: git checkout -b feature/name</li>
<li>Commit work locally and push the branch</li>
<li>Open a pull request for review and CI</li>
<li>Merge, then delete the branch when done</li>
</ul>
</section>

</main>
<footer class="site-footer">
<p>
Liyema Mfengwana sprint 2 wireframe backlog.
</p>
</footer>
</body>

</html>
216 changes: 148 additions & 68 deletions Wireframe/style.css
View file
Open in desktop
Copy link
Copy Markdown
Contributor

@cjyuan cjyuan May 30, 2026

Choose a reason for hiding this comment

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

  1. It appears that some CSS selectors in this file do not match any elements in the HTML. As a best practice, unused code should be removed to keep the codebase clean and maintainable.

  2. Some of the code is not consistent formatted.

    As a best practice, consider following this guide to enable VS Code's
    "Format on Save" option or to use its "Format Document" command to ensure your code is always consistently formatted.

Original file line number Diff line number Diff line change
Expand Up @@ -16,74 +16,154 @@ As well as useful links to learn more */
https://web.dev/articles/min-max-clamp
https://scrimba.com/learn-css-variables-c026
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
--container: 1280px;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
body {
background: var(--paper);
color: var(--ink);
font: var(--font);
}
a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
}
img,
svg {
width: 100%;
object-fit: cover;
:root{
--ink:#111;
--line:#222;
--muted:#6a6a6a;
--bg:#fafafa;
--card:#ffffff;
--accent:#111;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color:var(--ink);
background:var(--bg);
line-height:1.55;
}

.container{
max-width: 920px;
margin: 0 auto;
padding: 0 16px 48px;
}

/* Header matches the sketchy title style */
.page-hero{
text-align:center;
padding: 28px 16px 8px;
}
.page-title{
font-family: "Kalam", cursive;
font-size: 42px;
margin: 12px 0 4px;
letter-spacing: 1px;
text-transform: uppercase;
}
.page-subtitle{
font-family: "Kalam", cursive;
color:var(--muted);
font-size: 14px;
margin:0;
letter-spacing: .5px;
}

/* Cards */
.card{
background:var(--card);
border:2px solid var(--line);
border-radius:2px;
margin: 18px 0;
overflow:hidden;
}
.card--featured{
/* visually wider like the top box in the wireframe */
}
.card__media{
position:relative;
height: 240px;
border-bottom:2px solid var(--line);
}
.card--featured .card__media{ height: 280px; }

.fake-img{
background:#fff;
}
.fake-img .diag{
position:absolute;
top:0;left:0;right:0;bottom:0;
pointer-events:none;
}
.fake-img .diag.left{
background: linear-gradient( to bottom right, transparent 49%, var(--line) 50%, transparent 51% );
opacity:.7;
}
.fake-img .diag.right{
background: linear-gradient( to top right, transparent 49%, var(--line) 50%, transparent 51% );
opacity:.7;
}
/* ====== Site Layout ======
Setting the overall rules for page regions
https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Inspect this in Devtools and click the "grid" button in the Elements view
Play with the options that come up.
https://developer.chrome.com/docs/devtools/css/grid
https://gridbyexample.com/learn/
*/
main {
display: grid;

.card__body{
padding: 16px 20px 20px;
}
.card__title{
font-family:"Kalam", cursive;
font-size: 20px;
margin: 0 0 6px;
}
.card__summary{
margin: 0 0 12px;
color:#333;
font-size: 14px;
}

.btn{
display:inline-block;
border:2px solid var(--line);
padding:6px 12px;
font-size:13px;
color:var(--accent);
text-decoration:none;
border-radius:3px;
background:#f7f7f7;
}

/* Two-column grid for the lower row */
.grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
> *:first-child {
grid-column: span 2;
}
}
/* ====== Article Layout ======
Setting the rules for how elements are placed in the article.
Now laying out just the INSIDE of the repeated card/article design.
Keeping things orderly and separate is the key to good, simple CSS.
*/
article {
border: var(--line);
padding-bottom: var(--space);
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
> * {
grid-column: 2/3;
}
> img {
grid-column: span 3;
}
gap: 22px;
margin-top: 22px;
}

.details{
max-width: 920px;
margin: 10px auto 0;
padding: 0 2px;
}
.details h3{
font-size: 16px;
margin: 22px 0 8px;
font-weight:600;
}
.details ul{
margin: 0 0 8px 18px;
}

/* Footer */
.site-footer{
border-top:2px solid var(--line);
margin-top: 36px;
padding: 18px 12px;
text-align:center;
font-family:"Kalam", cursive;
font-size:12px;
color:#222;
}

/* Responsiveness */
@media (max-width: 780px){
.grid{ grid-template-columns: 1fr; }
.card__media{ height: 200px; }
.card--featured .card__media{ height: 220px; }
}


.card__media img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
Loading