Skip to content

Commit a67b937

Browse files
djmears-devdjmears-dev
committed
updated
1 parent a7b8a25 commit a67b937

6 files changed

Lines changed: 102 additions & 42 deletions

File tree

Wireframe/README.md renamed to Wireframe /README.md

File renamed without changes.

‎Wireframe /index.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>README, Wireframes and Git Branches</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<header>
11+
<h1>README, Wireframes and Git Branches</h1>
12+
<p>A simple guide to three important web development concepts.</p>
13+
</header>
14+
<main>
15+
<article>
16+
<img
17+
src="https://myscope.training/images/RDM-module/figure_22.jpg"
18+
alt="README file illustration"
19+
/>
20+
<h2>What is the purpose of a README file?</h2>
21+
<p>
22+
A README file explains what a project is, how it works, and how
23+
someone can use it. It often includes setup instructions, features,
24+
and important notes for developers.
25+
</p>
26+
<a
27+
href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes"
28+
>Read more</a
29+
>
30+
</article>
31+
32+
<article>
33+
<img
34+
src="https://www.oursky.com/images/blogs/86256bf2c9_6799482b54769870a1e9c883_1.jpeg"
35+
alt="Wireframe file illustration"
36+
/>
37+
<h2>What is the purpose of a wireframe?</h2>
38+
<p>
39+
A wireframe is a simple plan for a webpage or app. It shows where
40+
content, images, buttons, and sections will go before the final design
41+
is created.
42+
</p>
43+
<a
44+
href="https://github.com/dwyl/learn-wireframing/blob/master/README.md"
45+
>Read more</a
46+
>
47+
</article>
48+
49+
<article>
50+
<img
51+
src="https://www.sqlshack.com/wp-content/uploads/2020/09/git-branch-and-timelines.png"
52+
alt="Git branch file illustration"
53+
/>
54+
<h2>What is a branch in Git?</h2>
55+
<p>
56+
A branch in Git is a separate version of a project. It lets developers
57+
work on new features or fixes without changing the main version of the
58+
code.
59+
</p>
60+
<a
61+
href="https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches"
62+
>Read more</a
63+
>
64+
</article>
65+
</main>
66+
<footer>
67+
<p>Created as a beginner guide to key web development terms.</p>
68+
</footer>
69+
</body>
70+
</html>

Wireframe/placeholder.svg renamed to Wireframe /placeholder.svg

File renamed without changes.

Wireframe/style.css renamed to Wireframe /style.css

Lines changed: 32 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,18 +18,23 @@ 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;
2525
--container: 1280px;
2626
}
2727
/* ====== Base Elements ======
2828
General rules for basic HTML elements in any context */
29+
header {
30+
text-align: center;
31+
}
32+
/* Futuristic font */
2933
body {
3034
background: var(--paper);
3135
color: var(--ink);
3236
font: var(--font);
37+
font-family: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
3338
}
3439
a {
3540
padding: var(--space);
@@ -39,7 +44,10 @@ a {
3944
img,
4045
svg {
4146
width: 100%;
47+
height: 250px;
4248
object-fit: cover;
49+
border: 3px solid blue;
50+
border-radius: 20px;
4351
}
4452
/* ====== Site Layout ======
4553
Setting the overall rules for page regions
@@ -50,9 +58,11 @@ main {
5058
margin: 0 auto calc(var(--space) * 4) auto;
5159
}
5260
footer {
53-
position: fixed;
54-
bottom: 0;
5561
text-align: center;
62+
font-size: 0.8rem;
63+
color: var(--ink);
64+
margin-top: 40px;
65+
padding: 20px;
5666
}
5767
/* ====== Articles Grid Layout ====
5868
Setting the rules for how articles are placed in the main element.
@@ -76,14 +86,27 @@ Keeping things orderly and separate is the key to good, simple CSS.
7686
*/
7787
article {
7888
border: var(--line);
89+
border-radius: 20px;
90+
box-shadow: 0 0 15px blue;
7991
padding-bottom: var(--space);
8092
text-align: left;
8193
display: grid;
8294
grid-template-columns: var(--space) 1fr var(--space);
83-
> * {
84-
grid-column: 2/3;
85-
}
86-
> img {
87-
grid-column: span 3;
88-
}
95+
}
96+
article > * {
97+
grid-column: 2 / 3;
98+
}
99+
article > img {
100+
grid-column: 2 / 3;
101+
margin-top: var(--space);
102+
}
103+
> img {
104+
grid-column: 2 / 3;
105+
margin-top: var(--space);
106+
}
107+
h1,
108+
h2,
109+
a {
110+
text-transform: uppercase;
111+
letter-spacing: 1px;
89112
}

Wireframe/wireframe.png renamed to Wireframe /wireframe.png

File renamed without changes.

‎Wireframe/index.html‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

0 commit comments

Comments
 (0)