Skip to content

London | 26-ITP-January | Eugenie Ahangama | Sprint 1 | Wireframe to Web Code #926

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
Eugenie-A wants to merge 8 commits into
base: main
Choose a base branch
from
+49 −8
Open

London | 26-ITP-January | Eugenie Ahangama | Sprint 1 | Wireframe to Web Code #926

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
473bb07
Update header with title and description
Eugenie-A Jan 6, 2026
a40f4f7
Added three article sections with titles, summaries, and links
Eugenie-A Jan 6, 2026
a4f12bd
Updated footer text to match wireframe layout
Eugenie-A Jan 6, 2026
27f0460
Style footer with full width, padding, and dark background to match w…
Eugenie-A Jan 6, 2026
efce694
Added bottom padding to body to prevent content hiding behind fixed f…
Eugenie-A Jan 6, 2026
d63e9d9
Center header text and add padding and border to match wireframe layout
Eugenie-A Jan 6, 2026
60f44c5
Add card-style background, border, and radius to article elements
Eugenie-A Jan 6, 2026
b50fff3
Style article links as buttons with padding, border, and hover effect
Eugenie-A Jan 7, 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
31 changes: 24 additions & 7 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,42 @@
</head>
<body>
<header>
<h1>Wireframe</h1>
<h1>Understanding Web Development Basics</h1>
<p>
This is the default, provided code and no changes have been made yet.
A simple webpage built from a wireframe layout.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<img src="placeholder.svg" alt="Illustration for README article" />
<h2>What is the purpose of a README file?</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A README introduces a project, explains how to use it, and helps others understand the code.
</p>
<a href="">Read more</a>
</article>

<article>
<img src="placeholder.svg" alt="Illustration for wireframe article" />
<h2>What is the purpose of a wireframe?</h2>
<p>
A wireframe shows the layout and structure of a webpage before design and content are added.
</p>
<a href="">Read more</a>
</article>

<article>
<img src="placeholder.svg" alt="Illustration for Git branch article" />
<h2>What is a branch in Git?</h2>
<p>
A branch in Git is a separate line of development that allows you to work on different versions of a project simultaneously, without affecting the main codebase.
</p>
<a href="">Read more</a>
</article>
</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>
Expand Down
26 changes: 25 additions & 1 deletion Wireframe/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,12 +30,22 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
padding-bottom: 80px; /* space for fixed footer */
}

a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
text-decoration: none;
font-weight: bold;
display: inline-block;
margin-top: var(--space);
}

a:hover {
background: #eee;
}

img,
svg {
width: 100%;
Expand All @@ -49,9 +59,21 @@ main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
}

header {
text-align: center;
padding: calc(var(--space) *2);
border-bottom: var(--line);
}

footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #222;
color: white;
padding: var(--space);
text-align: center;
}
/* ====== Articles Grid Layout ====
Expand All @@ -75,7 +97,9 @@ 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 {
background: white;
border: var(--line);
border-radius: 4px;
padding-bottom: var(--space);
text-align: left;
display: grid;
Expand Down