Skip to content

Commit 4e3a207

Browse files
Dipa-SarkerDipa-Sarker
committed
add prettier
1 parent 00ce9e5 commit 4e3a207

2 files changed

Lines changed: 44 additions & 35 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
@@ -10,21 +10,25 @@
1010
<header>
1111
<h1>WIREFRAME</h1>
1212
<p>
13-
A Wireframe is a simple visual layout or blueprint of a website, mobile app or software
14-
interface. It shows the basic structure of a page without detailed colors, images or
15-
final design elements.
13+
A Wireframe is a simple visual layout or blueprint of a website, mobile
14+
app or software interface. It shows the basic structure of a page
15+
without detailed colors, images or final design elements.
1616
</p>
1717
</header>
1818
<main>
1919
<article>
20-
<img src="https://i.ytimg.com/vi/jeOfS90Flf8/maxresdefault.jpg" alt="Readme.md"/>
20+
<img
21+
src="https://i.ytimg.com/vi/jeOfS90Flf8/maxresdefault.jpg"
22+
alt="Readme.md"
23+
/>
2124
<h2>What is the purpose of a README file?</h2>
2225
<h3>Summary</h3>
2326
<p>
24-
A README file is a simple text file (usually named README.md) that explains what your
25-
project about and how to use it. When someone opens a GitHub repo, the README is
26-
usually the first thing they see. It helps them quickly understand:
27-
</p>
27+
A README file is a simple text file (usually named README.md) that
28+
explains what your project about and how to use it. When someone opens
29+
a GitHub repo, the README is usually the first thing they see. It
30+
helps them quickly understand:
31+
</p>
2832
<ul>
2933
<li>What the project does</li>
3034
<li>How to run it</li>
@@ -34,47 +38,56 @@ <h3>Summary</h3>
3438
<a href="https://en.wikipedia.org/wiki/README">Read more</a>
3539
</article>
3640
<article>
37-
<img src="https://cdn.sanity.io/images/599r6htc/regionalized/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.png?w=2880&h=1440&q=75&fit=max&auto=format" alt="Wireframe"/>
41+
<img
42+
src="https://cdn.sanity.io/images/599r6htc/regionalized/4c8605ad998d69b03a6eefb850cce5e23a0a96dc-2880x1440.png?w=2880&h=1440&q=75&fit=max&auto=format"
43+
alt="Wireframe"
44+
/>
3845
<h2>What is the purpose of a wireframe?</h2>
3946
<h3>Summary</h3>
4047
<p>
41-
A wireframe is a simple visual blueprint of a website, app, or digital product.
42-
It shows the structure and layout of a screen or page without focusing on final
43-
colors, graphics, or detailed styling. Think of it like an architectural sketch
44-
for a building:
48+
A wireframe is a simple visual blueprint of a website, app, or digital
49+
product. It shows the structure and layout of a screen or page without
50+
focusing on final colors, graphics, or detailed styling. Think of it
51+
like an architectural sketch for a building:
4552
</p>
4653
<ul>
4754
<li>It outlines where things go</li>
4855
<li>It shows how users move through the interface</li>
49-
<li>It helps teams agree on functionality before design and development begin</li>
56+
<li>
57+
It helps teams agree on functionality before design and development
58+
begin
59+
</li>
5060
</ul>
51-
<p>
52-
Wireframes are usually made with boxes, lines, placeholders
53-
and labels instead of polished visuals.
61+
<p>
62+
Wireframes are usually made with boxes, lines, placeholders and labels
63+
instead of polished visuals.
5464
</p>
5565
<a href="https://en.wikipedia.org/wiki/Website_wireframe">Read more</a>
5666
</article>
5767
<article>
58-
<img src="https://koliber.com/static/images/articles/trunk-flow.png" alt="Git Branch"/>
68+
<img
69+
src="https://koliber.com/static/images/articles/trunk-flow.png"
70+
alt="Git Branch"
71+
/>
5972
<h2>What is a branch in Git?</h2>
60-
<h3>Summary</h3>
73+
<h3>Summary</h3>
6174
<p>
62-
A branch in Git is an independent line of development.
63-
It lets you work on changes without affecting the main version of the project.
64-
You can think of a branch like a parallel workspace:
65-
</p>
75+
A branch in Git is an independent line of development. It lets you
76+
work on changes without affecting the main version of the project. You
77+
can think of a branch like a parallel workspace:
78+
</p>
6679
<ul>
6780
<li>The main project stays stable</li>
6881
<li>You make changes safely in another branch</li>
6982
<li>Later, you can merge those changes back into the main project</li>
7083
</ul>
71-
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
84+
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github"
85+
>Read more</a
86+
>
7287
</article>
7388
</main>
7489
<footer>
75-
<p>
76-
Web Development Basics | README, Wireframe & Git Branches
77-
</p>
90+
<p>Web Development Basics | README, Wireframe & Git Branches</p>
7891
</footer>
7992
</body>
8093
</html>

‎Wireframe/style.css‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ main {
4040
grid-template-columns: 1fr 1fr;
4141
gap: 10px;
4242
}
43-
main > *:first-child {
43+
main > *:first-child {
4444
grid-column: 1/ -1;
4545
}
4646

@@ -51,16 +51,12 @@ article {
5151
display: grid;
5252
grid-template-columns: var(--space) 1fr var(--space);
5353
}
54-
article > * {
54+
article > * {
5555
grid-column: 2/3;
5656
}
57-
article > img {
57+
article > img {
5858
grid-column: span 3;
5959
height: auto;
6060
width: 100%;
6161
object-fit: cover;
6262
}
63-
64-
65-
66-

0 commit comments

Comments
 (0)