Skip to content

Commit d2e0fb8

Browse files
Rawan-Al0-0Rawan-Al0-0
committed
I added some changes to the html and css files
1 parent 11e21ab commit d2e0fb8

3 files changed

Lines changed: 118 additions & 45 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,62 @@
1010
<header>
1111
<h1>Wireframe</h1>
1212
<p>
13-
This is the default, provided code and no changes have been made yet.
13+
a short describtion of wireframe, branch, and README.md file.
1414
</p>
1515
</header>
1616
<main>
1717
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
18+
<img src="placeholder.svg" alt="just an image" />
19+
<h2>What is a branch in Git?</h2>
2020
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
21+
"What is a Git Branch?
22+
In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code.
23+
24+
Why Use Branches?
25+
Branches let you work on different parts of a project, like new features or bug fixes, without interfering with the main branch.
26+
27+
Common Reasons to Create a Branch
28+
Developing a new feature
29+
Fixing a bug
30+
Experimenting with ideas"
2331
</p>
24-
<a href="">Read more</a>
32+
<a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
33+
</article>
34+
35+
<article>
36+
<img src="placeholder.svg" alt="just an image" />
37+
<h2>Why do we use README.md file?</h2>
38+
<p>
39+
" A README.md is a key document in repositories, especially on GitHub.
40+
It introduces the project, explains its purpose, setup, and usage, and helps users and developers contribute effectively."
41+
</p>
42+
<a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/">Read more</a>
43+
</article>
44+
45+
<article>
46+
<img src="wireframe.png" alt="wireframe image" />
47+
<h2>What is the purpose of a wireframe?</h2>
48+
<p>
49+
"Wireframes are basic blueprints that help teams align on requirements,
50+
keeping UX design conversations focused and constructive.
51+
Think of your wireframe as the skeleton of your app, website, or other final product.
52+
Your wireframe shows the design team and stakeholders the bare-bones outlines of essential webpages,
53+
components, and features, including:
54+
55+
Screen layouts
56+
Navigation bars
57+
Components of UX and UI design
58+
Interactive elements"
59+
</p>
60+
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
2561
</article>
2662
</main>
2763
<footer>
64+
2865
<p>
29-
This is the default, provided code and no changes have been made yet.
66+
All rights are reserved @RAW
3067
</p>
68+
</div>
3169
</footer>
3270
</body>
3371
</html>

‎Wireframe/style.css‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,19 @@ body {
3030
background: var(--paper);
3131
color: var(--ink);
3232
font: var(--font);
33+
background-color:aquamarine;
34+
background-image: url("background image.jpg");
35+
position: relative;
36+
left: 0;
37+
bottom: 0;
38+
width: 100%;
39+
text-align: center;
3340
}
3441
a {
3542
padding: var(--space);
3643
border: var(--line);
3744
max-width: fit-content;
45+
color: var(--ink);
3846
}
3947
img,
4048
svg {
@@ -50,8 +58,10 @@ main {
5058
margin: 0 auto calc(var(--space) * 4) auto;
5159
}
5260
footer {
53-
position: fixed;
61+
position: relative;
62+
left: 0;
5463
bottom: 0;
64+
width: 100%;
5565
text-align: center;
5666
}
5767
/* ====== Articles Grid Layout ====
@@ -86,4 +96,4 @@ article {
8696
> img {
8797
grid-column: span 3;
8898
}
89-
}
99+
}

‎index.html‎

Lines changed: 61 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,44 +3,69 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Coursework</title>
7-
<style>
8-
:root {
9-
--paper: oklch(7 0 0);
10-
--ink: color-mix(in oklab, var(--color) 5%, black);
11-
--font: 100%/1.5 system-ui;
12-
--space: clamp(6px, 6px + 2vw, 15px);
13-
--line: 1px solid;
14-
}
15-
body {
16-
background: var(--paper);
17-
color: var(--ink);
18-
font: var(--font);
19-
max-width: 1280px;
20-
margin: 0 auto;
21-
}
22-
</style>
6+
<title>Wireframe</title>
7+
<link rel="stylesheet" href="style.css" />
238
</head>
249
<body>
25-
<header><h1>🧐 CYF Coursework Disposable Branch Previews</h1></header>
10+
<header>
11+
<h1>Wireframe</h1>
12+
<p>
13+
a short describtion of wireframe, branch, and README.md file.
14+
</p>
15+
</header>
2616
<main>
27-
<ol>
28-
<li>
29-
<h2><a href="/Wireframe">Project 1: Wireframe</a></h2>
30-
<p>
31-
Mentors:
32-
<a href="Wireframe/readme.md">open the assignment in a tab</a>
33-
</p>
34-
</li>
35-
<li>
36-
<h2><a href="/Form-Controls">Project 2: Form Controls</a></h2>
37-
<p>
38-
Mentors:
39-
<a href="Form-Controls/readme.md">open the assignment in a tab</a>
40-
</p>
41-
</li>
42-
</ol>
17+
<article>
18+
<img src="branch.svg" alt="" />
19+
<h2>What is a branch in Git?</h2>
20+
<p>
21+
"What is a Git Branch?
22+
In Git, a branch is like a separate workspace where you can make changes and try new ideas without affecting the main project. Think of it as a "parallel universe" for your code.
23+
24+
Why Use Branches?
25+
Branches let you work on different parts of a project, like new features or bug fixes, without interfering with the main branch.
26+
27+
Common Reasons to Create a Branch
28+
Developing a new feature
29+
Fixing a bug
30+
Experimenting with ideas"
31+
</p>
32+
<a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
33+
</article>
34+
35+
<article>
36+
<img src="readme.md.png" alt="" />
37+
<h2>Why do we use README.md file?</h2>
38+
<p>
39+
" A README.md is a key document in repositories, especially on GitHub.
40+
It introduces the project, explains its purpose, setup, and usage, and helps users and developers contribute effectively."
41+
</p>
42+
<a href="https://www.geeksforgeeks.org/git/what-is-readme-md-file/">Read more</a>
43+
</article>
44+
45+
<article>
46+
<img src="wireframe image.png" alt="" />
47+
<h2>What is the purpose of a wireframe?</h2>
48+
<p>
49+
"Wireframes are basic blueprints that help teams align on requirements,
50+
keeping UX design conversations focused and constructive.
51+
Think of your wireframe as the skeleton of your app, website, or other final product.
52+
Your wireframe shows the design team and stakeholders the bare-bones outlines of essential webpages,
53+
components, and features, including:
54+
55+
Screen layouts
56+
Navigation bars
57+
Components of UX and UI design
58+
Interactive elements"
59+
</p>
60+
<a href="https://www.figma.com/resource-library/what-is-wireframing/">Read more</a>
61+
</article>
4362
</main>
44-
<footer><a href="HOW_TO_REVIEW.md">HOW TO REVIEW MD</a></footer>
63+
<footer>
64+
65+
<p>
66+
All rights are reserved @RAW
67+
</p>
68+
</div>
69+
</footer>
4570
</body>
46-
</html>
71+
</html>

0 commit comments

Comments
 (0)