Skip to content

Commit 1e15b2b

Browse files
author
adedolapo
committed
Refactor HTML structure and enhance CSS styles for better layout and readability
1 parent 2ad1c3a commit 1e15b2b

2 files changed

Lines changed: 56 additions & 46 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 47 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,60 @@
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>
12-
<center>Wireframe</center>
13-
</h1>
14-
<p>
15-
<center>An article about webpages and their purpose</center>
16-
</p>
17-
</header>
18-
<main>
19-
<article>
20-
<img src="placeholder.svg" alt="an image depicting wireframe " />
21-
22-
23-
<h2>READme</h2>
24-
<p>
25-
The purpose of a READme file is to provide information about a project, including how to instructions and tasks to be done.
263

27-
<a href="">Read more</a>
28-
</article>
29-
<article>
30-
<img src="placeholder.svg" alt="an image depicting wireframe " />
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>
14+
Wireframe
15+
</h1>
16+
<p>
17+
An article about webpages and their purpose
18+
</p>
19+
</header>
20+
<main>
21+
<article>
22+
<img src="placeholder.svg" alt="an image depicting wireframe " />
3123

32-
33-
<h2>Wireframe</h2>
34-
<p>
35-
A wireframe is a visual guide that represents the skeletal framework of a website or application, outlining the layout and structure of its content and functionality.
24+
25+
<h2>READme</h2>
26+
<p>
27+
The purpose of a READme file is to provide information about a project, including how to instructions and tasks
28+
to be done.
3629

3730
<a href="">Read more</a>
38-
</article>
39-
<article>
31+
</article>
32+
33+
<article>
4034
<img src="placeholder.svg" alt="an image depicting wireframe " />
4135

42-
43-
<h2>Git branch</h2>
44-
<p>A branch in a git, is a perosnal workspace to work on tasks independently.</p>
45-
46-
<a href="">Read more</a>
36+
<h2>Wireframe</h2>
37+
<p>A wireframe is a visual guide that represents the skeletal framework of a website or application, outlining the
38+
layout and structure of its content and functionality.</p>
4739

48-
</main>
49-
<footer>
40+
<a href="">Read more</a>
41+
</article>
42+
43+
<article>
44+
<img src="placeholder.svg" alt="an image depicting wireframe " />
5045

46+
<h2>Git branch</h2>
47+
<p>A branch in a git, is a perosnal workspace to work on tasks independently.</p>
5148

52-
<p> <center>Adedolapo January 2026</center>
53-
</p>
54-
</footer>
55-
</body>
49+
<a href="">Read more</a>
5650

51+
</main>
52+
<footer>
53+
if you have any questions follow this link to my <a
54+
href="[Wireframe](https://www.productplan.com/glossary/wireframe/)">Wireframe</a>
5755

58-
56+
<p>
57+
Adedolapo January 2026
58+
</p>
59+
</footer>
60+
</body>

‎Wireframe/style.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,16 @@ main {
4949
max-width: var(--container);
5050
margin: 0 auto calc(var(--space) * 4) auto;
5151
}
52+
header {
53+
text-align: center;
54+
width: 100%;
55+
}
56+
p {
57+
margin: var(--space) 0;
58+
text-align: center;
59+
}
60+
5261
footer {
53-
position: fixed;
5462
bottom: 0;
5563
text-align: center;
5664
}

0 commit comments

Comments
 (0)