Skip to content

LONDON | JANUARY-26 | GLORIA MANKRADO | Sprint 1 | WIREFRAME #1039

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
gloriamanks wants to merge 9 commits into
base: main
Choose a base branch
from
+70 −32
Open

LONDON | JANUARY-26 | GLORIA MANKRADO | Sprint 1 | WIREFRAME #1039

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
036634d
3 articles with image
gloriamanks Jan 23, 2026
fc0b2b9
changed the image source
gloriamanks Jan 24, 2026
b99e160
changed the article two image
gloriamanks Jan 24, 2026
261d168
removed default writing
gloriamanks Jan 24, 2026
fba5e8a
changed different colour
gloriamanks Jan 26, 2026
d839670
changes made upon being reviewed
gloriamanks Feb 4, 2026
6939420
resolved overlapping issue by removing fixed position and adding space
gloriamanks Feb 6, 2026
31e1ac4
centered the fixed footer
gloriamanks Feb 6, 2026
10ae6f9
updated so its easier to read
gloriamanks Feb 6, 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
76 changes: 47 additions & 29 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,51 @@
<!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>

<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 a brief web page for sprint 1 developed by Gloria.
</p>
</header>
<main>
<article class="article-one">
<img src="https://images.unsplash.com/photo-1591608516485-a1a53df39498?q=80&w=1170&auto=format&fit=crop"
alt="README documentation" />
<h2>Article One: What is the purpose of a README file?</h2>
<p>The README file provides a quick overview and essential instructions.</p>
<a href="#">Read more</a>
</article>
<article class="article-two">
<img
src="https://plus.unsplash.com/premium_photo-1667354153877-ec247a800999?w=600&auto=format&fit=crop"
alt="Wireframe example" />
<h2>Article Two: What is the purpose of a wireframe?</h2>
<p>The wireframe acts as a skeleton of a website or application interface.</p>
<a href="#">Read more</a>
</article>
<article class="article-three">
<img src="https://plus.unsplash.com/premium_photo-1742560146448-86ff6f51c5e7?q=80&w=1170&auto=format&fit=crop"
alt="Git branching concept" />
<h2>Article Three: What is a branch in Git?</h2>
<p>
This is the default, provided code and no changes have been made yet.
A branch is a separate version of a repository used to isolate changes.
</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.
</p>
<a href="">Read more</a>
</article>
</main>
<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
</footer>
</body>
</html>
<a href="#">Read more</a>
</article>
</main>
<footer>
<p>
Hopefully this has covered the success criteria.
</p>
</footer>
</body>

</html>
26 changes: 23 additions & 3 deletions Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,24 @@ As well as useful links to learn more */
====== Design Palette ====== */
:root {
--paper: oklch(7 0 0);
--ink: color-mix(in oklab, var(--color) 5%, black);
--ink: rgb(0, 0, 0);
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid;
--container: 1280px;
--container: 1024px;
}
/* ====== Base Elements ======
General rules for basic HTML elements in any context */
header {
text-align: center;
padding: calc(var(--space) * 2);
}

body {
background: var(--paper);
color: var(--ink);
font: var(--font);
padding-bottom: 70px;
}
a {
padding: var(--space);
Expand All @@ -47,13 +53,22 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
*/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
margin: 0 auto calc(var(--space) * 10) auto;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;

height: 60px;
line-height: 60px;

background: white;
border-top: 1px solid black;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
}

/* ====== 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
Expand Down Expand Up @@ -87,3 +102,8 @@ article {
grid-column: span 3;
}
}

article img {
height: 200px;
}

Loading