Skip to content

Commit f8ebc4e

Browse files
mervereismervereis
committed
wireframe webpage
1 parent 3b1f395 commit f8ebc4e

File tree

3 files changed

+60
-28
lines changed

3 files changed

+60
-28
lines changed

‎Wireframe/index.html‎

Lines changed: 52 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,57 @@
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>
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+
</head>
10+
11+
<body>
12+
<header>
13+
<h1>Wireframe</h1>
14+
<p>
15+
A basic blueprint for webpage
16+
</p>
17+
</header>
18+
<main>
19+
<article>
20+
<img src="placeholder.svg" alt="" />
21+
<h2>What is the purpose of readme files?</h2>
1222
<p>
13-
This is the default, provided code and no changes have been made yet.
23+
A README file usually serves as the primary, high-level documentation for a
24+
software project, dataset, or repository,
25+
designed to help users and developers understand, install, and use the project
1426
</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.
23-
</p>
24-
<a href="">Read more</a>
25-
</article>
26-
</main>
27-
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
27+
<a href="https://www.makeareadme.com">Read more</a>
28+
</article>
29+
<article>
30+
<img src="wireframe.png" alt="wireframe pictures" />
31+
<h2>What's the purpose of wireframe?</h2>
32+
<p>The purpose of a wireframe is to serve as a blueprint for a digital product (website, app) by focusing on its
33+
structure,
34+
layout, and functionality, not visual design (colors, fonts).
35+
</p>
36+
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
37+
</article>
38+
<article>
39+
<img src="/code-review-flow.png" alt="whats branch" />
40+
<h2>What's the branch in git?</h2>
41+
<p>A branch in Git is simply a lightweight movable pointer to one of these commits. The default branch name in Git
42+
is master . As you start making commits, you're given a master branch that points to the last commit you made.
3043
</p>
31-
</footer>
32-
</body>
33-
</html>
44+
<a
45+
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches">Read
46+
more</a>
47+
</article>
48+
49+
</main>
50+
<footer style="border-top: 1px solid; padding: 2rem;">
51+
If you want to learn more about <a href="https://www.productplan.com/glossary/wireframe/">Wireframe</a>
52+
53+
54+
</footer>
55+
</body>
56+
57+
</html>

‎Wireframe/style.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ body {
3131
color: var(--ink);
3232
font: var(--font);
3333
}
34+
35+
header {
36+
text-align: center;
37+
}
38+
3439
a {
3540
padding: var(--space);
3641
border: var(--line);
@@ -48,11 +53,14 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
4853
main {
4954
max-width: var(--container);
5055
margin: 0 auto calc(var(--space) * 4) auto;
56+
margin-bottom: 6rem;
5157
}
5258
footer {
5359
position: fixed;
5460
bottom: 0;
5561
text-align: center;
62+
width: 100%;
63+
background-color: white;
5664
}
5765
/* ====== Articles Grid Layout ====
5866
Setting the rules for how articles are placed in the main element.

‎branch.png‎

2.43 KB
Loading

0 commit comments

Comments
 (0)