Skip to content

Commit 349592b

Browse files
committed
added images to css
1 parent 1595c53 commit 349592b

6 files changed

Lines changed: 49 additions & 10 deletions

File tree

Wireframe/Cafe Wireframe .jpg

1.99 MB
Loading

Wireframe/Classroom Wireframe.jpg

1.99 MB
Loading

Wireframe/bird.jpg

1.76 MB
Loading

Wireframe/index.html

Lines changed: 42 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,65 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Wireframe</title>
77
<link rel="stylesheet" href="style.css" />
88
</head>
9+
910
<body>
1011
<header>
1112
<h1>Wireframe</h1>
1213
<p>
13-
This is the default, provided code and no changes have been made yet.
14+
A wireframe is a simple visual blueprint or sketch of a webpage or
15+
application.
1416
</p>
1517
</header>
18+
1619
<main>
1720
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
21+
<img src="mokey.jpg" alt="image of an upside down monkey" />
22+
<h2>What is a README File?</h2>
2023
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
24+
A README file provides information about a project, including its
25+
purpose, installation instructions, and how to use it.
2326
</p>
24-
<a href="">Read more</a>
27+
<a href="https://en.wikipedia.org/wiki/README"
28+
>Learn more about README files</a
29+
>
30+
</article>
31+
32+
<article>
33+
<img src="bird.jpg" alt="An image of a black bird" />
34+
<h2>What is a Wireframe?</h2>
35+
<p>
36+
A wireframe is a visual guide that helps designers and developers plan
37+
the structure and layout of a webpage before building it.
38+
</p>
39+
<a href="https://www.productplan.com/glossary/wireframe/"
40+
>Learn more about wireframes</a
41+
>
42+
</article>
43+
44+
<article>
45+
<img
46+
src="Classroom Wireframe.jpg"
47+
alt="an image of a glass building"
48+
/>
49+
<h2>What is a Git Branch?</h2>
50+
<p>
51+
A Git branch allows developers to work on new features or fixes
52+
separately from the main project without affecting existing code.
53+
</p>
54+
<a
55+
href="https://git-scm.com/book/en/v2/Git-Branching-Branches-in-a-Nutshell"
56+
>Learn more about Git branches</a
57+
>
2558
</article>
2659
</main>
60+
2761
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
62+
<p>Enice Mutanda 2026 CYF</p>
3163
</footer>
3264
</body>
3365
</html>

Wireframe/mokey.jpg

2.31 MB
Loading

Wireframe/style.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ body {
3030
background: var(--paper);
3131
color: var(--ink);
3232
font: var(--font);
33+
margin: 0;
34+
padding: 20px;
35+
padding-bottom: 80px; /* to make room for the fixed footer */
3336
}
3437
a {
3538
padding: var(--space);
@@ -53,6 +56,10 @@ footer {
5356
position: fixed;
5457
bottom: 0;
5558
text-align: center;
59+
padding: 1rem;
60+
background-color: #f4f4f4;
61+
border-top: 1px solid #ccc;
62+
width: 100%;
5663
}
5764
/* ====== Articles Grid Layout ====
5865
Setting the rules for how articles are placed in the main element.

0 commit comments

Comments
 (0)