Skip to content

Commit 26a7e09

Browse files
burhan-mustafaburhan-mustafa
committed
formatting has been rectified
1 parent 81ee88b commit 26a7e09

5 files changed

Lines changed: 135 additions & 118 deletions

File tree

‎Wireframe/README.html‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,28 @@
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-
<link rel="stylesheet" href="style.css">
7-
<title>README Files</title>
8-
</head>
9-
<body>
10-
<header>
11-
<h1>README Files</h1>
12-
</header>
13-
<main>
14-
<article>
15-
<img src="./images/readme.png" alt="README file displayed on a laptop screen">
16-
<h2>What is the purpose of a README file? </h2>
17-
<p>
18-
A README file is used to give information so a user can ascertain key details of a program such as its function, how it works, how to set it up and general updates.
19-
</p>
20-
<a rel="html" href="index.html">Back</a>
21-
</article>
22-
</main>
23-
</body>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css">
8+
<title>README Files</title>
9+
</head>
10+
11+
<body>
12+
<header>
13+
<h1>README Files</h1>
14+
</header>
15+
<main>
16+
<article>
17+
<img src="./images/readme.png" alt="README file displayed on a laptop screen">
18+
<h2>What is the purpose of a README file? </h2>
19+
<p>
20+
A README file is used to give information so a user can ascertain key details of a program such as its function,
21+
how it works, how to set it up and general updates.
22+
</p>
23+
<a rel="html" href="index.html">Back</a>
24+
</article>
25+
</main>
26+
</body>
27+
2428
</html>

‎Wireframe/branch.html‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
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-
<link rel="stylesheet" href="style.css">
7-
<title>Git Branches</title>
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Git Branches</h1>
12-
</header>
13-
<main>
14-
<article>
15-
<img src="./images/branch.png" alt="A computer screen showing a visual Git branch diagram">
16-
<h2>What is a branch in Git? </h2>
17-
<p>
18-
A branch in Git is a seperate workspace used to experiment or make changes without affecting the main project.
19-
</p>
20-
<a rel="html" href="index.html">Back</a>
21-
</article>
22-
</main>
23-
</body>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css">
8+
<title>Git Branches</title>
9+
</head>
10+
11+
<body>
12+
<header>
13+
<h1>Git Branches</h1>
14+
</header>
15+
<main>
16+
<article>
17+
<img src="./images/branch.png" alt="A computer screen showing a visual Git branch diagram">
18+
<h2>What is a branch in Git? </h2>
19+
<p>
20+
A branch in Git is a seperate workspace used to experiment or make changes without affecting the main project.
21+
</p>
22+
<a rel="html" href="index.html">Back</a>
23+
</article>
24+
</main>
25+
</body>
26+
2427
</html>

‎Wireframe/index.html‎

Lines changed: 46 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,53 @@
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>Web Development</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>Web Development</h1>
14+
<p>
15+
A series of articles to help you on your journey of web development
16+
</p>
17+
</header>
18+
<main>
19+
<article>
20+
<img src="./images/branch.png" alt="A computer screen showing a visual Git branch diagram">
21+
<h2>Git Branches </h2>
1222
<p>
13-
A series of articles to help you on your journey of web development
23+
In this article we will cover the purpose of a branch in git
1424
</p>
15-
</header>
16-
<main>
17-
<article>
18-
<img src="./images/branch.png" alt="A computer screen showing a visual Git branch diagram">
19-
<h2>Git Branches </h2>
20-
<p>
21-
In this article we will cover the purpose of a branch in git
22-
</p>
23-
<a rel="html" href="branch.html">Read more</a>
24-
</article>
25+
<a rel="html" href="branch.html">Read more</a>
26+
</article>
2527

26-
<article>
27-
<img src="./images/wireframes.png" alt="A paper website wireframe design on a desk">
28-
<h2>Wireframes</h2>
29-
<p>This article will cover the importance of a Wireframe</p>
30-
<a rel="html" href="wireframe.html">Read more</a>
31-
</article>
28+
<article>
29+
<img src="./images/wireframes.png" alt="A paper website wireframe design on a desk">
30+
<h2>Wireframes</h2>
31+
<p>This article will cover the importance of a Wireframe</p>
32+
<a rel="html" href="wireframe.html">Read more</a>
33+
</article>
3234

33-
<article>
34-
<img src ="./images/readme.png" alt="README file displayed on a laptop screen">
35-
<h2>README files</h2>
36-
<p>We shall look at the purpose of a README file</p>
37-
<a rel="html" href="README.html">Read more</a>
38-
</article>
39-
</main>
35+
<article>
36+
<img src="./images/readme.png" alt="README file displayed on a laptop screen">
37+
<h2>README files</h2>
38+
<p>We shall look at the purpose of a README file</p>
39+
<a rel="html" href="README.html">Read more</a>
40+
</article>
41+
</main>
4042

41-
<footer>
42-
<hr>
43-
<p>
44-
&copy; 2026: Contact us on
45-
telephone: 07489763234 or
46-
email: usersupport@hotmail.com
47-
</p>
48-
</footer>
49-
</body>
50-
</html>
43+
<footer>
44+
<hr>
45+
<p>
46+
&copy; 2026: Contact us on
47+
telephone: 07489763234 or
48+
email: usersupport@hotmail.com
49+
</p>
50+
</footer>
51+
</body>
52+
53+
</html>

‎Wireframe/style.css‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,13 @@ As well as useful links to learn more */
2929
}
3030

3131
h1,
32-
header p
33-
{
32+
header p {
3433
text-align: center;
3534
}
3635

3736
/* ====== Base Elements ======
3837
General rules for basic HTML elements in any context */
39-
body{
38+
body {
4039
background: var(--paper);
4140
color: var(--ink);
4241
font: var(--font);
@@ -51,13 +50,14 @@ a {
5150
border: var(--line);
5251
max-width: fit-content;
5352
color: var(--color)
54-
5553
}
54+
5655
img,
5756
svg {
5857
width: 100%;
5958
object-fit: cover;
6059
}
60+
6161
/* ====== Site Layout ======
6262
Setting the overall rules for page regions
6363
https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -68,7 +68,7 @@ main {
6868
flex: 1;
6969
}
7070

71-
footer{
71+
footer {
7272
text-align: center;
7373
}
7474

@@ -83,10 +83,12 @@ main {
8383
display: grid;
8484
grid-template-columns: 1fr 1fr;
8585
gap: var(--space);
86-
> *:nth-child(1) {
86+
87+
>*:nth-child(1) {
8788
grid-column: span 2;
8889
}
8990
}
91+
9092
/* ====== Article Layout ======
9193
Setting the rules for how elements are placed in the article.
9294
Now laying out just the INSIDE of the repeated card/article design.
@@ -98,18 +100,20 @@ article {
98100
text-align: left;
99101
display: grid;
100102
grid-template-columns: var(--space) 1fr var(--space);
101-
> * {
103+
104+
>* {
102105
grid-column: 2/3;
103106
}
104-
> img {
107+
108+
>img {
105109
grid-column: span 3;
106110
}
107111
}
108112

109-
article h2{
110-
margin-bottom:0px;
113+
article h2 {
114+
margin-bottom: 0px;
111115
}
112116

113117
article p {
114-
margin-top:4px;
115-
}
118+
margin-top: 4px;
119+
}

‎Wireframe/wireframe.html‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
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-
<link rel="stylesheet" href="style.css">
7-
<title>Wireframes</title>
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Wireframes</h1>
12-
</header>
13-
<main>
14-
<article>
15-
<img src="./images/wireframes.png" alt="A paper website wireframe design on a desk">
16-
<h2>What is the purpose of a Wireframe?</h2>
17-
<p>
18-
A wireframe is used as a structural blueprint that allows a developer to envision how a project will look.
19-
</p>
20-
<a rel="html" href="index.html">Back</a>
21-
</article>
22-
</main>
23-
</body>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css">
8+
<title>Wireframes</title>
9+
</head>
10+
11+
<body>
12+
<header>
13+
<h1>Wireframes</h1>
14+
</header>
15+
<main>
16+
<article>
17+
<img src="./images/wireframes.png" alt="A paper website wireframe design on a desk">
18+
<h2>What is the purpose of a Wireframe?</h2>
19+
<p>
20+
A wireframe is used as a structural blueprint that allows a developer to envision how a project will look.
21+
</p>
22+
<a rel="html" href="index.html">Back</a>
23+
</article>
24+
</main>
25+
</body>
26+
2427
</html>

0 commit comments

Comments
 (0)