Skip to content

WM | ITP-MAY-25 | Tesfalem Hailu | Wireframe #722

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
wants to merge 21 commits into
base: main
Choose a base branch
from
Open

WM | ITP-MAY-25 | Tesfalem Hailu | Wireframe #722

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
2539259
purpose of readme.
tesfathefture May 28, 2025
5d6ca7a
index.html
tesfathefture Jun 8, 2025
53ec74b
index.html
tesfathefture Jun 8, 2025
2399729
changed title
tesfathefture Jun 11, 2025
05c35e0
Fixed all errors
tesfathefture Jun 11, 2025
7caf458
edited footer
tesfathefture Jun 11, 2025
8547893
reverted form-control to default
tesfathefture Jun 11, 2025
bd52eff
test
tesfathefture Jun 12, 2025
f4d8ec3
remove css from html
tesfathefture Jun 12, 2025
f382d98
h1 and p style change.
tesfathefture Jun 12, 2025
8014f61
h1 and p change
tesfathefture Jun 12, 2025
a0e77e2
Delete Wireframe/articles.md
tesfathefture Jun 12, 2025
abe6c6d
readmore edited.
tesfathefture Jun 12, 2025
e549d9a
read more edited again.
tesfathefture Jun 12, 2025
4651278
more readme button edit.
tesfathefture Jun 12, 2025
7dbfbe2
png placeholder is ameneded.
tesfathefture Jun 12, 2025
4d08a78
footer changed.
tesfathefture Jun 12, 2025
9906163
footer improved
tesfathefture Jun 12, 2025
b952c0e
alt text adedd to improve accecablity.
tesfathefture Jun 12, 2025
a723313
svg tag is removed .
tesfathefture Jun 12, 2025
0e61696
svg tag removed.
tesfathefture Jun 12, 2025
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
6 changes: 6 additions & 0 deletions Wireframe/articles.md
View file
Open in desktop
Copy link

Choose a reason for hiding this comment

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

@tesfathefture i am not sure this file is necessary.

Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
1. What is the purpose of a README file?

You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.

1. What is the purpose of a wireframe?
1. What is a branch in Git?
151 changes: 140 additions & 11 deletions Wireframe/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,158 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wireframe</title>
<link rel="stylesheet" href="style.css" />
<style>
:root {
--paper: #f5f5f5; /* light background */
--ink: #222222; /* dark text */
--font: 100%/1.5 system-ui;
--space: clamp(6px, 6px + 2vw, 15px);
--line: 1px solid #ccc;
--container: 1280px;
}

body {
background-color: var(--paper);
color: var(--ink);
font: var(--font);
margin: 0;
padding-bottom: 80px; /* space for fixed footer */
}

a {
padding: var(--space);
border: var(--line);
max-width: fit-content;
display: inline-block;
color: var(--ink);
text-decoration: none;
}

img,
svg {
width: 100%;
object-fit: cover;
}

main {
max-width: var(--container);
margin: 0 auto calc(var(--space) * 4);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space);
}

main > *:first-child {
grid-column: span 2;
}

article {
border: var(--line);
padding-bottom: var(--space);
text-align: left;
display: grid;
grid-template-columns: var(--space) 1fr var(--space);
}

article > * {
grid-column: 2 / 3;
}

article > svg {
grid-column: span 3;
}

footer {
text-align: center;
padding: 15px 0;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<header>
<h1>Wireframe</h1>
<p>
This is the default, provided code and no changes have been made yet.
<h1 style="text-align: center;">Wireframe</h1>
Copy link

Choose a reason for hiding this comment

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

Create a class in your style.css and use it for your h1 and p instead of using inline style and repeating yourself

Copy link
Author

Choose a reason for hiding this comment

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

I have used it for h1 and p instead of using inline style and repeating itself

<p style="text-align: center;">
A wireframe is a basic visual guide used in design, especially in web
and app development, to represent the structure and layout of a page or
interface before the final design is created.
</p>
</header>

<main>
<article>
<img src="placeholder.svg" alt="" />
<h2>Title</h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90" role="presentation" aria-hidden="true" focusable="false">
<rect width="160" height="90" fill="#eee" />
<circle cx="120" cy="25" r="15" fill="hsl(0deg 83% 60% / 95%)" />
<path d="M25 90 L80 30 L160 90 Z" fill="darkslategrey" />
<path d="M0 90 L50 45 L100 90 Z" fill="slategrey" />
</svg>
<h2>Purpose of a README File</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
voluptates. Quisquam, voluptates.
A README file serves as the main introduction and documentation for a project,
typically found in the root directory of software repositories (like those on GitHub).
</p>
<a href="">Read more</a>
<details>
<summary>Read More</summary>
<p>
A README file is a plain text or markdown (.md) file that provides essential
information about a project. It's usually the first file someone reads when they
encounter your repository—especially on platforms like GitHub, GitLab, or Bitbucket.
</p>
</details>
</article>

<article>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90" role="presentation" aria-hidden="true" focusable="false">
<rect width="160" height="90" fill="#eee" />
<circle cx="120" cy="25" r="15" fill="hsl(0deg 83% 60% / 95%)" />
<path d="M25 90 L80 30 L160 90 Z" fill="darkslategrey" />
<path d="M0 90 L50 45 L100 90 Z" fill="slategrey" />
</svg>
<h2>Purpose of a Wireframe</h2>
<p>
The purpose of a wireframe is to serve as a blueprint or visual guide for designing a website,
app, or digital interface before any actual design or coding begins.
</p>
<details>
<summary>Read More</summary>
<p>
A wireframe is a simplified visual representation of a user interface that outlines the layout
and structure of content and elements on a screen, without focusing on design details like color,
style, or graphics.
</p>
</details>
</article>

<article>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90" role="presentation" aria-hidden="true" focusable="false">
<rect width="160" height="90" fill="#eee" />
<circle cx="120" cy="25" r="15" fill="hsl(0deg 83% 60% / 95%)" />
<path d="M25 90 L80 30 L160 90 Z" fill="darkslategrey" />
<path d="M0 90 L50 45 L100 90 Z" fill="slategrey" />
</svg>
<h2>A Branch in Git</h2>
<p>
A branch in Git is essentially a lightweight, movable pointer to a commit. It allows you
to work on different versions of a project without affecting the main codebase.
</p>
<details>
<summary>Read More</summary>
<p>
A Git branch is a lightweight movable reference to a specific commit. It allows you to isolate
your work from the main line of development.
</p>
</details>
</article>
</main>

<footer>
<p>
This is the default, provided code and no changes have been made yet.
</p>
<p>Author: Tesfalem Hailu</p>
<p><a href="mailto:hailutesfalem21@gmail.com">hailutesfalem21@gmail.com</a></p>
</footer>
Copy link

Choose a reason for hiding this comment

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

Screenshot 2025-06-11 at 16 03 40

The footer needs a bit more work, when you scroll up it shows on top of your article content as shown in the image attached.

You can play with background color, borders, or box-shadow to make it look better

Copy link
Author

Choose a reason for hiding this comment

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

I have improved the footer to make it look better.

</body>
</html>