Skip to content

Commit de0ae2e

Browse files
Jay00-ggJay00-gg
authored
updated-wireframe-assessment
1 parent 7ce41cc commit de0ae2e

2 files changed

Lines changed: 89 additions & 38 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 74 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,97 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
7+
<link rel="stylesheet" href="style.css">
88
</head>
9+
910
<body>
1011
<header>
1112
<h1>Wireframe</h1>
12-
<p>
13-
This is the default, provided code and no changes have been made yet.
14-
</p>
13+
<p>This page explains README files, wireframes and Git branches.</p>
1514
</header>
15+
1616
<main>
17-
<section class="articles">
17+
<article class="article-one">
18+
<img src="wireframe.png" alt="Wireframe example">
1819

19-
<article>
20-
<img src="placeholder.svg" alt="README illustration" />
21-
<h2>What is a README file?</h2>
22-
<p>
23-
A README file explains what a project is, how it works, and how to use it.
24-
</p>
25-
<a href="#">Read more</a>
26-
</article>
20+
<h2>What is a Wireframe?</h2>
2721

28-
<article>
29-
<img src="placeholder.svg" alt="Wireframe diagram illustration" />
30-
<h2>What is a Wirframe?</h2>
3122
<p>
32-
A wireframe is a simple visual guide that shows the structure of a webpage before design.
23+
A wireframe is a simple visual guide that shows the structure and
24+
layout of a webpage before it is designed.
3325
</p>
34-
<a href="#">Read more</a>
35-
</article>
3626

37-
<article>
38-
<img src="placeholder.svg" alt="Git branch diagram illustration" />
39-
<h2>What is a Git branch?</h2>
40-
<p>
41-
A Git branch is a separate version of your code used to work on features safely.
42-
</p>
43-
<a href="#">Read more</a>
27+
<a
28+
href="https://www.productplan.com/glossary/wireframe/"
29+
target="_blank"
30+
>
31+
Read more about Wireframes
32+
</a>
4433
</article>
4534

46-
</section>
35+
<section class="bottom-articles">
36+
<article>
37+
<img src="readme.jpg" alt="README file example">
38+
39+
<h2>What is a README File?</h2>
4740

41+
<p>
42+
A README file explains what a project is, how it works and how other
43+
people can use it.
44+
</p>
45+
46+
<a
47+
href="https://www.freecodecamp.org/news/how-to-write-a-good-readme-file/"
48+
target="_blank"
49+
rel="noopener noreferrer"
50+
>
51+
Read more about README files
52+
</a>
53+
</article>
54+
<img src="wireframe.png" alt="Wireframe example">
55+
56+
<h2>What is a wireframe?</h2>
57+
58+
<p>
59+
A wireframe is a simple layout showing structure before design.
60+
</p>
61+
<a href="https://balsamiq.com/blog/what-are-wireframes/"
62+
target="_blank"
63+
rel="noopener noreferrer"
64+
>
65+
Read more
66+
</a>
67+
68+
<article>
69+
<
70+
</article>
71+
72+
<article>
73+
<img src="gitbranch.png" alt="Git branch diagram">
74+
75+
<h2>What is a Git Branch?</h2>
76+
77+
<p>
78+
A Git branch is a separate version of your code that allows you to
79+
work on changes without affecting the main project.
80+
</p>
81+
82+
<a
83+
href="https://www.atlassian.com/git/tutorials/using-branches"
84+
target="_blank"
85+
rel="noopener noreferrer"
86+
>
87+
Read more about Git branches
88+
</a>
89+
</article>
90+
</section>
4891
</main>
92+
4993
<footer>
50-
<p>
51-
This is the default, provided code and no changes have been made yet.
52-
</p>
94+
<p>Created for Code Your Future Wireframe project.</p>
5395
</footer>
5496
</body>
5597
</html>

‎Wireframe/style.css‎

Lines changed: 15 additions & 6 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: black;
2222
--font: 100%/1.5 system-ui;
2323
--space: clamp(6px, 6px + 2vw, 15px);
2424
--line: 1px solid;
@@ -30,6 +30,7 @@ body {
3030
background: var(--paper);
3131
color: var(--ink);
3232
font: var(--font);
33+
padding-bottom: 60px;
3334
}
3435
a {
3536
padding: var(--space);
@@ -52,7 +53,10 @@ main {
5253
footer {
5354
position: fixed;
5455
bottom: 0;
56+
left: 0;
57+
width: 100%;
5558
text-align: center;
59+
background: var(--paper);
5660
}
5761
/* ====== Articles Grid Layout ====
5862
Setting the rules for how articles are placed in the main element.
@@ -65,10 +69,12 @@ main {
6569
display: grid;
6670
grid-template-columns: 1fr 1fr;
6771
gap: var(--space);
68-
> *:first-child {
72+
}
73+
74+
main > *:first-child {
6975
grid-column: span 2;
70-
}
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,10 +86,13 @@ article {
8086
text-align: left;
8187
display: grid;
8288
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
89+
}
90+
91+
article > * {
8492
grid-column: 2/3;
8593
}
86-
> img {
94+
95+
article > img {
8796
grid-column: span 3;
8897
}
89-
}
98+

0 commit comments

Comments
 (0)