Skip to content

Commit e7c92d7

Browse files
burhan-mustafaburhan-mustafa
committed
Ensured all code is formatted by prettier
1 parent 26a7e09 commit e7c92d7

5 files changed

Lines changed: 140 additions & 129 deletions

File tree

‎Wireframe/README.html‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
1-
<!DOCTYPE html>
1+
<!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>
39

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-
28-
</html>
10+
<body>
11+
<header>
12+
<h1>README Files</h1>
13+
</header>
14+
<main>
15+
<article>
16+
<img
17+
src="./images/readme.png"
18+
alt="README file displayed on a laptop screen"
19+
/>
20+
<h2>What is the purpose of a README file?</h2>
21+
<p>
22+
A README file is used to give information so a user can ascertain key
23+
details of a program such as its function, how it works, how to set it
24+
up and general updates.
25+
</p>
26+
<a rel="html" href="index.html">Back</a>
27+
</article>
28+
</main>
29+
</body>
30+
</html>

‎Wireframe/branch.html‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
<!DOCTYPE html>
1+
<!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>
39

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-
27-
</html>
10+
<body>
11+
<header>
12+
<h1>Git Branches</h1>
13+
</header>
14+
<main>
15+
<article>
16+
<img
17+
src="./images/branch.png"
18+
alt="A computer screen showing a visual Git branch diagram"
19+
/>
20+
<h2>What is a branch in Git?</h2>
21+
<p>
22+
A branch in Git is a seperate workspace used to experiment or make
23+
changes without affecting the main project.
24+
</p>
25+
<a rel="html" href="index.html">Back</a>
26+
</article>
27+
</main>
28+
</body>
29+
</html>

‎Wireframe/index.html‎

Lines changed: 50 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,55 @@
1-
<!DOCTYPE html>
1+
<!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>
39

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+
<body>
11+
<header>
12+
<h1>Web Development</h1>
13+
<p>A series of articles to help you on your journey of web development</p>
14+
</header>
15+
<main>
16+
<article>
17+
<img
18+
src="./images/branch.png"
19+
alt="A computer screen showing a visual Git branch diagram"
20+
/>
21+
<h2>Git Branches</h2>
22+
<p>In this article we will cover the purpose of a branch in git</p>
23+
<a rel="html" href="branch.html">Read more</a>
24+
</article>
1025

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>
22-
<p>
23-
In this article we will cover the purpose of a branch in git
24-
</p>
25-
<a rel="html" href="branch.html">Read more</a>
26-
</article>
27-
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>
26+
<article>
27+
<img
28+
src="./images/wireframes.png"
29+
alt="A paper website wireframe design on a desk"
30+
/>
31+
<h2>Wireframes</h2>
32+
<p>This article will cover the importance of a Wireframe</p>
33+
<a rel="html" href="wireframe.html">Read more</a>
34+
</article>
3435

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>
36+
<article>
37+
<img
38+
src="./images/readme.png"
39+
alt="README file displayed on a laptop screen"
40+
/>
41+
<h2>README files</h2>
42+
<p>We shall look at the purpose of a README file</p>
43+
<a rel="html" href="README.html">Read more</a>
44+
</article>
45+
</main>
4246

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>
47+
<footer>
48+
<hr />
49+
<p>
50+
&copy; 2026: Contact us on telephone: 07489763234 or email:
51+
usersupport@hotmail.com
52+
</p>
53+
</footer>
54+
</body>
55+
</html>

‎Wireframe/style.css‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ a {
4949
padding: var(--space);
5050
border: var(--line);
5151
max-width: fit-content;
52-
color: var(--color)
52+
color: var(--color);
5353
}
5454

5555
img,
@@ -70,6 +70,9 @@ main {
7070

7171
footer {
7272
text-align: center;
73+
position: fixed;
74+
bottom: 0;
75+
width: 100%;
7376
}
7477

7578
/* ====== Articles Grid Layout ====
@@ -84,7 +87,7 @@ main {
8487
grid-template-columns: 1fr 1fr;
8588
gap: var(--space);
8689

87-
>*:nth-child(1) {
90+
> *:nth-child(1) {
8891
grid-column: span 2;
8992
}
9093
}
@@ -101,11 +104,11 @@ article {
101104
display: grid;
102105
grid-template-columns: var(--space) 1fr var(--space);
103106

104-
>* {
107+
> * {
105108
grid-column: 2/3;
106109
}
107110

108-
>img {
111+
> img {
109112
grid-column: span 3;
110113
}
111114
}
@@ -116,4 +119,4 @@ article h2 {
116119

117120
article p {
118121
margin-top: 4px;
119-
}
122+
}

‎Wireframe/wireframe.html‎

Lines changed: 27 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
1-
<!DOCTYPE html>
1+
<!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>
39

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-
27-
</html>
10+
<body>
11+
<header>
12+
<h1>Wireframes</h1>
13+
</header>
14+
<main>
15+
<article>
16+
<img
17+
src="./images/wireframes.png"
18+
alt="A paper website wireframe design on a desk"
19+
/>
20+
<h2>What is the purpose of a Wireframe?</h2>
21+
<p>
22+
A wireframe is used as a structural blueprint that allows a developer
23+
to envision how a project will look.
24+
</p>
25+
<a rel="html" href="index.html">Back</a>
26+
</article>
27+
</main>
28+
</body>
29+
</html>

0 commit comments

Comments
 (0)