Skip to content

Commit 6197589

Browse files
djmears-devdjmears-dev
committed
Added Images and Information for each article
1 parent d64e17a commit 6197589

2 files changed

Lines changed: 36 additions & 18 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,49 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
6+
<title>README, Wireframes and Git Branches</title>
77
<link rel="stylesheet" href="style.css" />
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
11+
<h1>README, Wireframes and Git Branches</h1>
1212
<p>
13-
This is the default, provided code and no changes have been made yet.
13+
A simple guide to three important web development concepts.
1414
</p>
1515
</header>
1616
<main>
1717
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23-
</p>
24-
<a href="">Read more</a>
25-
</article>
18+
<img src="https://www.wikihow.com/images/1/10/Write-a-Read-Me-Step-6.jpg" alt="README file illustration" />
19+
<h2>What is the purpose of a README file?</h2>
20+
<p>
21+
A README file explains what a project is, how it works, and how someone can use it.
22+
It often includes setup instructions, features, and important notes for developers.
23+
</p>
24+
<a href="#">Read more</a>
25+
</article>
26+
27+
<article>
28+
<img src="https://www.oursky.com/images/blogs/86256bf2c9_6799482b54769870a1e9c883_1.jpeg" alt="Wireframe file illustration" />
29+
<h2>What is the purpose of a wireframe?</h2>
30+
<p>
31+
A wireframe is a simple plan for a webpage or app. It shows where content, images,
32+
buttons, and sections will go before the final design is created.
33+
</p>
34+
<a href="#">Read more</a>
35+
</article>
36+
37+
<article>
38+
<img src="https://www.sqlshack.com/wp-content/uploads/2020/09/git-branch-and-timelines.png" alt="Git branch file illustration" />
39+
<h2>What is a branch in Git?</h2>
40+
<p>
41+
A branch in Git is a separate version of a project. It lets developers work on new
42+
features or fixes without changing the main version of the code.
43+
</p>
44+
<a href="#">Read more</a>
45+
</article>
2646
</main>
27-
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
31-
</footer>
47+
<footer>
48+
<p>Created as a beginner guide to key web development terms.</p>
49+
</footer>
3250
</body>
3351
</html>

‎Wireframe/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ As well as useful links to learn more */
1818
====== Design Palette ====== */
1919
:root {
2020
--paper: oklch(7 0 0);
21-
--ink: color-mix(in oklab, var(--color) 5%, black);
21+
--ink: blue;
2222
--font: 100%/1.5 system-ui;
2323
--space: clamp(6px, 6px + 2vw, 15px);
2424
--line: 1px solid;
@@ -39,7 +39,7 @@ a {
3939
img,
4040
svg {
4141
width: 100%;
42-
object-fit: cover;
42+
height: 280px;
4343
}
4444
/* ====== Site Layout ======
4545
Setting the overall rules for page regions

0 commit comments

Comments
 (0)