Skip to content

Commit cbd2e26

Browse files
LiyemaMfengwanaLiyemaMfengwana
committed
complete wireframe-sprint2
1 parent ff7b9d0 commit cbd2e26

2 files changed

Lines changed: 263 additions & 97 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 115 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,119 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
15-
</header>
16-
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Wireframe</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
12+
<link href="https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Inter:wght@400;600&display=swap"
13+
rel="stylesheet">
14+
<meta name="description" content=" Learn about README files, wireframes, and Git branches.">
15+
16+
</head>
17+
18+
<body>
19+
<header class="page-hero">
20+
<h1 class="page-hero">Wireframe</h1>
21+
<p class="page-subtitle">
22+
Learn about README files, wireframes, and Git branches.
23+
</p>
24+
</header>
25+
<main class="container">
26+
<!-- Featured card (full width) -->
27+
<article class="card card--featured">
28+
<div class="card__media">
29+
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3"
30+
alt="Person reading project documentation">
31+
</div>
32+
<div class="card__body">
33+
<h2 class="card__title">What is the purpose of a README file?</h2>
34+
<p class="card__summary">
35+
A README introduces a project: what it is, why it exists, and how to use, install, run, and contribute to it.
36+
It orients new users and contributors, sets expectations (requirements, license, roadmap), and centralizes
37+
quick-start commands and links. In short, it’s the project’s front door and owner’s manual.
2338
</p>
24-
<a href="">Read more</a>
39+
<a class="btn" href="#readme-details">Read More</a>
40+
</div>
41+
</article>
42+
43+
44+
<!-- Two-column row -->
45+
<div class="grid">
46+
<article class="card">
47+
<div class="card__media">
48+
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3"
49+
alt="Person reading project documentation">
50+
</div>
51+
<div class="card__body">
52+
<h2 class="card__title">What is the purpose of a wireframe?</h2>
53+
<p class="card__summary">
54+
A wireframe is a low‑fidelity layout of a page. It maps structure, hierarchy, and placement of elements
55+
(headers, media, text, buttons) without visual polish. Teams use wireframes to align on content priority,
56+
user flow, and functionality early—reducing rework before design and code.
57+
</p>
58+
<a class="btn" href="#wireframe-details">Read More</a>
59+
</div>
2560
</article>
26-
</main>
27-
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
31-
</footer>
32-
</body>
33-
</html>
61+
62+
<article class="card">
63+
<div class="card__media">
64+
<img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c"
65+
alt="Developer working with Git and code">
66+
</div>
67+
<div class="card__body">
68+
<h2 class="card__title">What is a branch in Git?</h2>
69+
<p class="card__summary">
70+
A Git branch is an independent line of development. It lets you make changes, experiment, and review work
71+
without affecting the main history. When ready, merge the branch back (often via pull request) to integrate
72+
tested, reviewed changes into the primary codebase.
73+
</p>
74+
<a class="btn" href="#git-branch-details">Read More</a>
75+
</div>
76+
</article>
77+
</div>
78+
79+
<!-- “read more” anchors -->
80+
<section class="details" id="readme-details" aria-label="README details">
81+
<h3>README essentials</h3>
82+
<ul>
83+
<li>Project overview and goals</li>
84+
<li>Installation and quick start</li>
85+
<li>Usage examples and configuration</li>
86+
<li>Contributing guidelines and license</li>
87+
<li>Links to docs, issues, and support</li>
88+
</ul>
89+
</section>
90+
91+
<section class="details" id="wireframe-details" aria-label="Wireframe details">
92+
<h3>Why wireframe first</h3>
93+
<ul>
94+
<li>Clarifies content priority and layout</li>
95+
<li>Enables fast feedback before visuals</li>
96+
<li>De-risks scope and uncovers edge cases</li>
97+
<li>Acts as a blueprint for designers/devs</li>
98+
</ul>
99+
</section>
100+
101+
<section class="details" id="git-branch-details" aria-label="Git branch details">
102+
<h3>Branch workflow highlights</h3>
103+
<ul>
104+
<li>Create: git checkout -b feature/name</li>
105+
<li>Commit work locally and push the branch</li>
106+
<li>Open a pull request for review and CI</li>
107+
<li>Merge, then delete the branch when done</li>
108+
</ul>
109+
</section>
110+
111+
</main>
112+
<footer class="site-footer">
113+
<p>
114+
Liyema Mfengwana sprint 2 wireframe backlog.
115+
</p>
116+
</footer>
117+
</body>
118+
119+
</html>

‎Wireframe/style.css‎

Lines changed: 148 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -16,74 +16,154 @@ As well as useful links to learn more */
1616
https://web.dev/articles/min-max-clamp
1717
https://scrimba.com/learn-css-variables-c026
1818
====== Design Palette ====== */
19-
:root {
20-
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
22-
--font: 100%/1.5 system-ui;
23-
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25-
--container: 1280px;
26-
}
27-
/* ====== Base Elements ======
28-
General rules for basic HTML elements in any context */
29-
body {
30-
background: var(--paper);
31-
color: var(--ink);
32-
font: var(--font);
33-
}
34-
a {
35-
padding: var(--space);
36-
border: var(--line);
37-
max-width: fit-content;
38-
}
39-
img,
40-
svg {
41-
width: 100%;
42-
object-fit: cover;
19+
:root{
20+
--ink:#111;
21+
--line:#222;
22+
--muted:#6a6a6a;
23+
--bg:#fafafa;
24+
--card:#ffffff;
25+
--accent:#111;
26+
}
27+
28+
*{box-sizing:border-box}
29+
html,body{margin:0;padding:0}
30+
body{
31+
font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
32+
color:var(--ink);
33+
background:var(--bg);
34+
line-height:1.55;
35+
}
36+
37+
.container{
38+
max-width: 920px;
39+
margin: 0 auto;
40+
padding: 0 16px 48px;
41+
}
42+
43+
/* Header matches the sketchy title style */
44+
.page-hero{
45+
text-align:center;
46+
padding: 28px 16px 8px;
47+
}
48+
.page-title{
49+
font-family: "Kalam", cursive;
50+
font-size: 42px;
51+
margin: 12px 0 4px;
52+
letter-spacing: 1px;
53+
text-transform: uppercase;
54+
}
55+
.page-subtitle{
56+
font-family: "Kalam", cursive;
57+
color:var(--muted);
58+
font-size: 14px;
59+
margin:0;
60+
letter-spacing: .5px;
61+
}
62+
63+
/* Cards */
64+
.card{
65+
background:var(--card);
66+
border:2px solid var(--line);
67+
border-radius:2px;
68+
margin: 18px 0;
69+
overflow:hidden;
70+
}
71+
.card--featured{
72+
/* visually wider like the top box in the wireframe */
73+
}
74+
.card__media{
75+
position:relative;
76+
height: 240px;
77+
border-bottom:2px solid var(--line);
78+
}
79+
.card--featured .card__media{ height: 280px; }
80+
81+
.fake-img{
82+
background:#fff;
83+
}
84+
.fake-img .diag{
85+
position:absolute;
86+
top:0;left:0;right:0;bottom:0;
87+
pointer-events:none;
88+
}
89+
.fake-img .diag.left{
90+
background: linear-gradient( to bottom right, transparent 49%, var(--line) 50%, transparent 51% );
91+
opacity:.7;
92+
}
93+
.fake-img .diag.right{
94+
background: linear-gradient( to top right, transparent 49%, var(--line) 50%, transparent 51% );
95+
opacity:.7;
4396
}
44-
/* ====== Site Layout ======
45-
Setting the overall rules for page regions
46-
https://www.w3.org/WAI/tutorials/page-structure/regions/
47-
*/
48-
main {
49-
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
51-
}
52-
footer {
53-
position: fixed;
54-
bottom: 0;
55-
text-align: center;
56-
}
57-
/* ====== Articles Grid Layout ====
58-
Setting the rules for how articles are placed in the main element.
59-
Inspect this in Devtools and click the "grid" button in the Elements view
60-
Play with the options that come up.
61-
https://developer.chrome.com/docs/devtools/css/grid
62-
https://gridbyexample.com/learn/
63-
*/
64-
main {
65-
display: grid;
97+
98+
.card__body{
99+
padding: 16px 20px 20px;
100+
}
101+
.card__title{
102+
font-family:"Kalam", cursive;
103+
font-size: 20px;
104+
margin: 0 0 6px;
105+
}
106+
.card__summary{
107+
margin: 0 0 12px;
108+
color:#333;
109+
font-size: 14px;
110+
}
111+
112+
.btn{
113+
display:inline-block;
114+
border:2px solid var(--line);
115+
padding:6px 12px;
116+
font-size:13px;
117+
color:var(--accent);
118+
text-decoration:none;
119+
border-radius:3px;
120+
background:#f7f7f7;
121+
}
122+
123+
/* Two-column grid for the lower row */
124+
.grid{
125+
display:grid;
66126
grid-template-columns: 1fr 1fr;
67-
gap: var(--space);
68-
> *:first-child {
69-
grid-column: span 2;
70-
}
71-
}
72-
/* ====== Article Layout ======
73-
Setting the rules for how elements are placed in the article.
74-
Now laying out just the INSIDE of the repeated card/article design.
75-
Keeping things orderly and separate is the key to good, simple CSS.
76-
*/
77-
article {
78-
border: var(--line);
79-
padding-bottom: var(--space);
80-
text-align: left;
81-
display: grid;
82-
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
127+
gap: 22px;
128+
margin-top: 22px;
129+
}
130+
131+
.details{
132+
max-width: 920px;
133+
margin: 10px auto 0;
134+
padding: 0 2px;
135+
}
136+
.details h3{
137+
font-size: 16px;
138+
margin: 22px 0 8px;
139+
font-weight:600;
89140
}
141+
.details ul{
142+
margin: 0 0 8px 18px;
143+
}
144+
145+
/* Footer */
146+
.site-footer{
147+
border-top:2px solid var(--line);
148+
margin-top: 36px;
149+
padding: 18px 12px;
150+
text-align:center;
151+
font-family:"Kalam", cursive;
152+
font-size:12px;
153+
color:#222;
154+
}
155+
156+
/* Responsiveness */
157+
@media (max-width: 780px){
158+
.grid{ grid-template-columns: 1fr; }
159+
.card__media{ height: 200px; }
160+
.card--featured .card__media{ height: 220px; }
161+
}
162+
163+
164+
.card__media img {
165+
width: 100%;
166+
height: 220px;
167+
object-fit: cover;
168+
display: block;
169+
}

0 commit comments

Comments
 (0)