Skip to content

Commit df06455

Browse files
codebyracodebyra
committed
Fix footer spacing and format HTML
1 parent 59a9037 commit df06455

2 files changed

Lines changed: 77 additions & 60 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 58 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,78 @@
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 Concepts</h1>
12-
<p>Understanding README files, Wireframes and Git Branches</p>
13-
</header>
143

15-
<main>
16-
<article>
17-
<img src="images/readme.png" alt="README documentation example" />
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>
1810

11+
<body>
12+
<header>
13+
<h1>Web Development Concepts</h1>
14+
<p>Understanding README files, Wireframes and Git Branches</p>
15+
</header>
1916

20-
<h2>What is a README File?</h2>
17+
<main>
18+
<article>
19+
<img src="images/readme.png" alt="README documentation example" />
2120

22-
<p>
23-
A README file explains a project. It usually contains information
24-
about the purpose of the project, installation instructions,
25-
usage examples and important notes for developers.
26-
</p>
2721

28-
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">
29-
Read More
30-
</a>
22+
<h2>What is a README File?</h2>
3123

32-
</article>
24+
<p>
25+
A README file explains a project. It usually contains information
26+
about the purpose of the project, installation instructions,
27+
usage examples and important notes for developers.
28+
</p>
3329

34-
<article>
35-
<img src="images/wireframe-topic.png" alt="Website wireframe layout sketch" />
30+
<a
31+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">
32+
Read More
33+
</a>
3634

37-
<h2>What is a Wireframe?</h2>
35+
</article>
3836

39-
<p>
40-
A wireframe is a visual plan of a webpage. It helps designers
41-
and developers organise content and layout before building
42-
the final website.
43-
</p>
37+
<article>
38+
<img src="images/wireframe-topic.png" alt="Website wireframe layout sketch" />
4439

45-
<a href="https://www.interaction-design.org/literature/topics/wireframing">
46-
Read More
47-
</a>
40+
<h2>What is a Wireframe?</h2>
4841

49-
</article>
42+
<p>
43+
A wireframe is a visual plan of a webpage. It helps designers
44+
and developers organise content and layout before building
45+
the final website.
46+
</p>
5047

51-
<article>
52-
<img src="images/branch.png" alt="Git branching workflow diagram" />
48+
<a href="https://www.interaction-design.org/literature/topics/wireframing">
49+
Read More
50+
</a>
5351

54-
<h2>What is a Git Branch?</h2>
52+
</article>
5553

56-
<p>
57-
A Git branch is an independent line of development.
58-
It allows developers to work on new features without
59-
affecting the main version of a project.
60-
</p>
54+
<article>
55+
<img src="images/branch.png" alt="Git branching workflow diagram" />
6156

62-
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">
63-
Read More
64-
</a>
57+
<h2>What is a Git Branch?</h2>
6558

66-
</article>
67-
</main>
59+
<p>
60+
A Git branch is an independent line of development.
61+
It allows developers to work on new features without
62+
affecting the main version of a project.
63+
</p>
6864

69-
<footer>
70-
<p>Contact information and site details</p>
71-
</footer>
65+
<a href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell">
66+
Read More
67+
</a>
7268

73-
</body>
74-
</html>
69+
</article>
70+
</main>
71+
72+
<footer>
73+
<p>Contact information and site details</p>
74+
</footer>
75+
76+
</body>
77+
78+
</html>

‎Wireframe/style.css‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,36 +24,40 @@ As well as useful links to learn more */
2424
--line: 1px solid;
2525
--container: 1280px;
2626
}
27+
2728
/* ====== Base Elements ======
2829
General rules for basic HTML elements in any context */
2930
body {
3031
background: var(--paper);
3132
color: var(--ink);
3233
font: var(--font);
3334
}
35+
3436
a {
3537
padding: var(--space);
3638
border: var(--line);
3739
max-width: fit-content;
3840
}
41+
3942
img,
4043
svg {
4144
width: 100%;
4245
object-fit: cover;
4346
}
47+
4448
/* ====== Site Layout ======
4549
Setting the overall rules for page regions
4650
https://www.w3.org/WAI/tutorials/page-structure/regions/
4751
*/
4852
main {
4953
max-width: var(--container);
50-
margin: 0 auto calc(var(--space) * 4) auto;
54+
margin: 0 auto 120px auto;
5155
}
56+
5257
footer {
53-
position: fixed;
54-
bottom: 0;
5558
text-align: center;
5659
}
60+
5761
/* ====== Articles Grid Layout ====
5862
Setting the rules for how articles are placed in the main element.
5963
Inspect this in Devtools and click the "grid" button in the Elements view
@@ -65,10 +69,12 @@ main {
6569
display: grid;
6670
grid-template-columns: 1fr 1fr;
6771
gap: var(--space);
68-
> *:first-child {
72+
73+
>*:first-child {
6974
grid-column: span 2;
7075
}
7176
}
77+
7278
/* ====== Article Layout ======
7379
Setting the rules for how elements are placed in the article.
7480
Now laying out just the INSIDE of the repeated card/article design.
@@ -80,13 +86,16 @@ article {
8086
text-align: left;
8187
display: grid;
8288
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
89+
90+
>* {
8491
grid-column: 2/3;
8592
}
86-
> img {
93+
94+
>img {
8795
grid-column: span 3;
8896
}
8997
}
98+
9099
header {
91100
text-align: center;
92101
margin: 2rem 0;
@@ -102,9 +111,13 @@ footer {
102111
border-top: 1px solid black;
103112
padding: 10px;
104113
}
114+
105115
article img {
106116
width: 100%;
107117
height: 250px;
108118
object-fit: contain;
109119
}
110120

121+
main {
122+
padding-bottom: 180px;
123+
}

0 commit comments

Comments
 (0)