Skip to content

London | May-2025 | Gideon Defar | Wireframe #725

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.

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
wants to merge 15 commits into
base: main
Choose a base branch
from
85 changes: 58 additions & 27 deletions Wireframe/index.html
Original file line number Diff line number Diff line change
@@ -1,33 +1,64 @@
<!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>
About Wireframes, READMEs and Git Branches
</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<header>
<h1>
About Wireframes, READMEs and Git Branches
</h1>
<p>
This page explores wireframes in web design, the significance of README
files in software projects and the role of branches in Git version
control.
</p>
</header>
<main>
<article>
<img src="placeholder.svg" alt="">
<h2>Wireframe</h2>
<p>
This is the default, provided code and no changes have been made yet.
Wireframe provides a foundational structural template for web pages.
It serves as a communication tool for stakeholders, web designers and
developers, providing a simple structural view of the rendered web
page.
</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>
<a
href="https://www.wix.com/blog/what-are-wireframes?experiment_id=%5E%5E40312ac7-ca22-4ba2-bd8e-0b726ed32275%5E">Read
more</a>
</article>
<article>
<img src="placeholder.svg" alt="">
<h2>README Files</h2>
<p>
This is the default, provided code and no changes have been made yet.
README files offer essential explanatory information about a codebase
within a repository, including usage instructions and details about
its features.
</p>
</footer>
</body>
</html>
<a href="https://www.makeareadme.com/">Read more</a>
</article>
<article>
<img src="placeholder.svg" alt="">
<h2>Git branches</h2>
<p>
Git branches are a fundamental feature that enables users to develop
features and make commits independently of the main branch. This
facilitates parallel development by multiple teams without causing
conflicts directly.
</p>
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">Read more</a>
</article>
</main>
<footer>
This all about wireframe. All Rights Reserved.
</footer>
</body>
</html>
16 changes: 14 additions & 2 deletions Wireframe/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,12 @@ body {
background: var(--paper);
color: var(--ink);
font: var(--font);
}

header {
text-align: center;
}

a {
padding: var(--space);
border: var(--line);
Expand All @@ -48,11 +53,18 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4) auto;
height: 90%;
}
footer {
position: fixed;
bottom: 0;
text-align: center;
padding: 15px 0;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
border: solid;
background-color: #ccc;
}
/* ====== Articles Grid Layout ====
Setting the rules for how articles are placed in the main element.
Expand Down