Skip to content

Commit 5bdf634

Browse files
AbduhasenAbduhasen
committed
made web page base on wireframe, added like to read more, added image to the article
1 parent ff7b9d0 commit 5bdf634

2 files changed

Lines changed: 90 additions & 13 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 70 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,92 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
6+
<meta
7+
name="description"
8+
content="This page explains the purpose of wireframe and README file and also tells about what a branch is in Git"
9+
/>
10+
<title>
11+
The purpose of wireframe and readme and what branch means in git
12+
</title>
713
<link rel="stylesheet" href="style.css" />
814
</head>
915
<body>
1016
<header>
11-
<h1>Wireframe</h1>
17+
<h1>What is Branch in Git, The Purpose of README & Wireframing</h1>
1218
<p>
13-
This is the default, provided code and no changes have been made yet.
19+
This page covers three essential concepts in software development. It
20+
explains what a Git branch is and why it is used to manage code changes
21+
safely, explores the purpose of a README file and how it helps others
22+
understand your project, and walks through the wireframing process from
23+
initial structural sketches to a fully designed application page.
1424
</p>
1525
</header>
1626
<main>
1727
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
28+
<img
29+
src="https://super-monitoring.com/blog/wp-content/uploads/2022/01/readme.png.webp"
30+
alt="A laptop and book representing a README documentation guide"
31+
fetchpriority="high"
32+
/>
33+
<h2>The Purpose of README</h2>
2034
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
35+
A README file contains descriptive information about the content of a
36+
directory in which the file is located. The scope of the information
37+
generally includes the files of the directory, and may include
38+
descendant directories, or even the full directory tree. The name is
39+
intended to draw a user's attention to important and orientational
40+
information about the directory content. A rule of thumb for one
41+
unfamiliar with the content of a directory is to read the README file
42+
before other files. Although the name README is often used, there are
43+
many other similar names used for the same purpose including "Read Me"
44+
and "READ.ME". Sometimes the file name includes an extension to
45+
indicate the file format such as "README.txt" for plain text or
46+
"README.md" for Markdown.The file's name is often all caps.
2347
</p>
24-
<a href="">Read more</a>
48+
<a href="https://en.wikipedia.org/wiki/README"
49+
>Read more about README files</a
50+
>
51+
</article>
52+
<article>
53+
<img
54+
src="https://storage.ghost.io/c/c8/0c/c80ce826-734b-44fa-90f7-43d0deb4f5bc/content/images/size/w1200/2025/03/Immerse---What-is-a-wireframe.png"
55+
alt="Wireframe progression showing structural sketch to fully designed app page"
56+
/>
57+
<h2>The Purpose of Wireframe</h2>
58+
<p>
59+
Wireframing is a way to design a website service at the structural
60+
level. A wireframe is commonly used to layout content and
61+
functionality on a page which takes into account user needs and user
62+
journeys. Wireframes are used early in the development process to
63+
establish the basic structure of a page before visual design and
64+
content is added.
65+
</p>
66+
<a href="https://www.experienceux.co.uk/faqs/what-is-wireframing/"
67+
>Read more about Wireframing</a
68+
>
69+
</article>
70+
<article>
71+
<img
72+
src="https://graphite.com/images/content/guides/git-merge-how-does-it-work/1711136885-merged-branch.jpg"
73+
alt="Git branch diagram showing branching and merging workflow"
74+
/>
75+
<h2>What is Branch in Git</h2>
76+
<p>
77+
In Git, a branch is like a separate workspace where you can make
78+
changes and try new ideas without affecting the main project. Think of
79+
it as a "parallel universe" for your code.
80+
</p>
81+
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github"
82+
>Read more about Git branches</a
83+
>
2584
</article>
2685
</main>
2786
<footer>
2887
<p>
29-
This is the default, provided code and no changes have been made yet.
88+
This page covered three essential concepts every developer should know:
89+
Git branches, README files, and wireframing.
3090
</p>
3191
</footer>
3292
</body>

‎Wireframe/style.css‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@ As well as useful links to learn more */
1818
====== Design Palette ====== */
1919
:root {
2020
--paper: oklch(7 0 0);
21+
--color: white;
2122
--ink: color-mix(in oklab, var(--color) 5%, black);
2223
--font: 100%/1.5 system-ui;
2324
--space: clamp(6px, 6px + 2vw, 15px);
24-
--line: 1px solid;
25+
--line: 3px solid;
2526
--container: 1280px;
2627
}
2728
/* ====== Base Elements ======
@@ -31,16 +32,34 @@ body {
3132
color: var(--ink);
3233
font: var(--font);
3334
}
35+
header {
36+
text-align: center;
37+
margin-bottom: 40px;
38+
}
39+
header p {
40+
text-align: left;
41+
text-indent: 40px;
42+
max-width: 1500px;
43+
margin: 0 auto;
44+
}
3445
a {
3546
padding: var(--space);
3647
border: var(--line);
3748
max-width: fit-content;
49+
background-color: #ebcb6e;
3850
}
3951
img,
4052
svg {
4153
width: 100%;
54+
height: 400px;
4255
object-fit: cover;
4356
}
57+
main > *:first-child > img {
58+
height: 800px;
59+
width: 70%;
60+
margin: 0 auto;
61+
display: block;
62+
}
4463
/* ====== Site Layout ======
4564
Setting the overall rules for page regions
4665
https://www.w3.org/WAI/tutorials/page-structure/regions/
@@ -50,8 +69,6 @@ main {
5069
margin: 0 auto calc(var(--space) * 4) auto;
5170
}
5271
footer {
53-
position: fixed;
54-
bottom: 0;
5572
text-align: center;
5673
}
5774
/* ====== Articles Grid Layout ====

0 commit comments

Comments
 (0)