Skip to content

Commit 83f8ca1

Browse files
burhan-mustafaburhan-mustafa
committed
added css files for the new webpages linked to the
index html and built the basic structure for each page
1 parent 0e0f1e1 commit 83f8ca1

8 files changed

Lines changed: 271 additions & 3 deletions

File tree

‎Wireframe/README.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
:root {
2+
--paper: oklch(7 0 0);
3+
--ink: color-mix(in oklab, var(--color) 5%, black);
4+
--font: 100%/1.5 "Comic Neue", cursive, uppercase;
5+
--space: clamp(6px, 6px + 2vw, 15px);
6+
--line: 1px solid;
7+
--container: 1280px;
8+
}
9+
10+
h1,
11+
header p
12+
{
13+
text-align: center;
14+
}
15+
16+
body {
17+
background: var(--paper);
18+
color: var(--ink);
19+
font: var(--font);
20+
}
21+
a {
22+
padding: var(--space);
23+
border: var(--line);
24+
max-width: fit-content;
25+
color: var(--color)
26+
}
27+
img,
28+
svg {
29+
width: 100%;
30+
object-fit: cover;
31+
}
32+
33+
*/
34+
main {
35+
max-width: var(--container);
36+
margin: 0 auto calc(var(--space) * 4) auto;
37+
display: grid;
38+
grid-template-columns: 1fr;
39+
}
40+
41+
42+
article {
43+
border: var(--line);
44+
padding-bottom: var(--space);
45+
text-align: left;
46+
display: grid;
47+
grid-template-columns: var(--space) 1fr var(--space);
48+
> * {
49+
grid-column: 2/3;
50+
}
51+
> img {
52+
grid-column: span 3;
53+
}
54+
}
55+
56+
article h2{
57+
margin-bottom:0px;
58+
}
59+
60+
article p {
61+
margin-top:4px;
62+
}

‎Wireframe/README.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
<link rel="stylesheet" href="README.css"></link>
7+
<title>README Files</title>
8+
</head>
9+
<body>
10+
<header>
11+
<h1>README Files</h1>
12+
<p>
13+
An of article to helping you understand README Files
14+
</p>
15+
</header>
16+
<main>
17+
<article>
18+
<img src="placeholder.svg" alt="">
19+
<h2>What is the purpose of a README file? </h2>
20+
<p>
21+
In this article we will cover the purpose of a branch in git
22+
</p>
23+
<a rel="html" href="index.html">Back</a>
24+
</article>
25+
</main>
26+
</body>
27+
</html>

‎Wireframe/branch.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
:root {
2+
--paper: oklch(7 0 0);
3+
--ink: color-mix(in oklab, var(--color) 5%, black);
4+
--font: 100%/1.5 "Comic Neue", cursive, uppercase;
5+
--space: clamp(6px, 6px + 2vw, 15px);
6+
--line: 1px solid;
7+
--container: 1280px;
8+
}
9+
10+
h1,
11+
header p
12+
{
13+
text-align: center;
14+
}
15+
16+
body {
17+
background: var(--paper);
18+
color: var(--ink);
19+
font: var(--font);
20+
}
21+
a {
22+
padding: var(--space);
23+
border: var(--line);
24+
max-width: fit-content;
25+
color: var(--color)
26+
}
27+
img,
28+
svg {
29+
width: 100%;
30+
object-fit: cover;
31+
}
32+
33+
*/
34+
main {
35+
max-width: var(--container);
36+
margin: 0 auto calc(var(--space) * 4) auto;
37+
display: grid;
38+
grid-template-columns: 1fr;
39+
}
40+
41+
42+
article {
43+
border: var(--line);
44+
padding-bottom: var(--space);
45+
text-align: left;
46+
display: grid;
47+
grid-template-columns: var(--space) 1fr var(--space);
48+
> * {
49+
grid-column: 2/3;
50+
}
51+
> img {
52+
grid-column: span 3;
53+
}
54+
}
55+
56+
article h2{
57+
margin-bottom:0px;
58+
}
59+
60+
article p {
61+
margin-top:4px;
62+
}

‎Wireframe/branch.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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+
<link rel="stylesheet" href="branch.css"></link>
7+
<title>Git Branches</title>
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Git Branches</h1>
12+
<p>
13+
An article delving into Git Branches
14+
</p>
15+
</header>
16+
<main>
17+
<article>
18+
<img src="placeholder.svg" alt="">
19+
<h2>What is a branch in Git? </h2>
20+
<p>
21+
In this article we will cover the purpose of a branch in git
22+
</p>
23+
<a rel="html" href="index.html">Back</a>
24+
</article>
25+
</main>
26+
</body>
27+
</html>

‎Wireframe/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,14 @@ <h2>Git Branches </h2>
2727
<img src="placeholder.svg" alt="">
2828
<h2>Wireframes</h2>
2929
<p>This article will cover the importance of a Wireframe</p>
30-
<a rel="html" href="README.html">Read more</a>
30+
<a rel="html" href="wireframe.html">Read more</a>
3131
</article>
3232

3333
<article>
3434
<img src ="placeholder.svg" alt="">
3535
<h2>README files</h2>
3636
<p>We shall look at the purpose of a README file</p>
37-
<a rel="html" href="wireframe.html">Read more</a>
37+
<a rel="html" href="README.html">Read more</a>
3838
</article>
3939
</main>
4040
<footer>

‎Wireframe/style.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ a {
4545
padding: var(--space);
4646
border: var(--line);
4747
max-width: fit-content;
48+
color: var(--color)
49+
4850
}
4951
img,
5052
svg {

‎Wireframe/wireframe.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
:root {
2+
--paper: oklch(7 0 0);
3+
--ink: color-mix(in oklab, var(--color) 5%, black);
4+
--font: 100%/1.5 "Comic Neue", cursive, uppercase;
5+
--space: clamp(6px, 6px + 2vw, 15px);
6+
--line: 1px solid;
7+
--container: 1280px;
8+
}
9+
10+
h1,
11+
header p
12+
{
13+
text-align: center;
14+
}
15+
16+
body {
17+
background: var(--paper);
18+
color: var(--ink);
19+
font: var(--font);
20+
}
21+
a {
22+
padding: var(--space);
23+
border: var(--line);
24+
max-width: fit-content;
25+
color: var(--color)
26+
}
27+
img,
28+
svg {
29+
width: 100%;
30+
object-fit: cover;
31+
}
32+
33+
*/
34+
main {
35+
max-width: var(--container);
36+
margin: 0 auto calc(var(--space) * 4) auto;
37+
display: grid;
38+
grid-template-columns: 1fr;
39+
}
40+
41+
42+
article {
43+
border: var(--line);
44+
padding-bottom: var(--space);
45+
text-align: left;
46+
display: grid;
47+
grid-template-columns: var(--space) 1fr var(--space);
48+
> * {
49+
grid-column: 2/3;
50+
}
51+
> img {
52+
grid-column: span 3;
53+
}
54+
}
55+
56+
article h2{
57+
margin-bottom:0px;
58+
}
59+
60+
article p {
61+
margin-top:4px;
62+
}

‎Wireframe/wireframe.html‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,27 @@
1-
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+
<link rel="stylesheet" href="wireframe.css"></link>
7+
<title>Wireframes</title>
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Wireframes</h1>
12+
<p>
13+
An article that delves into wireframes
14+
</p>
15+
</header>
16+
<main>
17+
<article>
18+
<img src="placeholder.svg" alt="">
19+
<h2>What is the purpose of a Wireframe?</h2>
20+
<p>
21+
In this article we will cover the purpose of a branch in git
22+
</p>
23+
<a rel="html" href="index.html">Back</a>
24+
</article>
25+
</main>
26+
</body>
27+
</html>

0 commit comments

Comments
 (0)