Skip to content

Commit a57c081

Browse files
author
lintsang
committed
remove all unneccessary div by simpliy adding css into the header, main and footer
1 parent dec48eb commit a57c081

2 files changed

Lines changed: 44 additions & 47 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 37 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -7,53 +7,49 @@
77
<link rel="stylesheet" href="style.css" />
88
</head>
99
<body>
10-
<div id="wrapper">
11-
<header>
12-
<h1>Web Development Foundation</h1>
10+
<header>
11+
<h1>Web Development Foundation</h1>
12+
<p>
13+
There are some frequently asked questions for beginner developers.
14+
</p>
15+
</header>
16+
<main>
17+
<article>
18+
<div class="image-wrapper">
19+
<img src="https://cdn.iconscout.com/icon/free/png-512/free-readme-logo-icon-svg-download-png-3029134.png" alt="illustration of a readme file" />
20+
</div>
21+
<h2>1. What is the purpose of a README file?</h2>
1322
<p>
14-
There are some frequently asked questions for beginner developers.
23+
README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute.
1524
</p>
16-
</header>
17-
<main>
18-
<article>
19-
<div class="image-wrapper">
20-
<img src="https://cdn.iconscout.com/icon/free/png-512/free-readme-logo-icon-svg-download-png-3029134.png" alt="" />
21-
</div>
22-
<h2>1. What is the purpose of a README file?</h2>
23-
<p>
24-
README file is the foundation document which ask user to Read Me First before doing anything in the project. It provides some concept explanation or basic requirements that user have to know. Sometimes it mentions contributin, licensing details and guideline for other developers who wants to contribute.
25-
</p>
26-
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
27-
</article>
28-
<article>
29-
<div class="image-wrapper">
30-
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/wireframe-icon-svg-download-png-10585798.png" alt="" />
31-
</div>
32-
<h2>2. What is the purpose of a wireframe?</h2>
33-
<p>
34-
Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design.
35-
</p>
36-
<a href="https://www.orbitmedia.com/blog/7-reasons-to-wireframe/">Read more</a>
37-
</article>
38-
<article>
39-
<div class="image-wrapper">
40-
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/git-branch-icon-svg-download-png-10369479.png" alt="" />
41-
</div>
42-
<h2>3. What is a branch in Git?</h2>
43-
<p>
44-
A branch is a copied workspace from the main development and developers can modify and fix on her/his own branch of project without messing the main development.
45-
</p>
46-
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
47-
</article>
48-
</main>
49-
</div>
25+
<a href="https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-readmes">Read more</a>
26+
</article>
27+
<article>
28+
<div class="image-wrapper">
29+
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/wireframe-icon-svg-download-png-10585798.png" alt="" />
30+
</div>
31+
<h2>2. What is the purpose of a wireframe?</h2>
32+
<p>
33+
Wireframe is a blueprints which can help teams to visualize the layout, user flow and hierarchy before committing to the colour or final UI design.
34+
</p>
35+
<a href="https://www.orbitmedia.com/blog/7-reasons-to-wireframe/">Read more</a>
36+
</article>
37+
<article>
38+
<div class="image-wrapper">
39+
<img src="https://cdn.iconscout.com/icon/premium/png-512-thumb/git-branch-icon-svg-download-png-10369479.png" alt="" />
40+
</div>
41+
<h2>3. What is a branch in Git?</h2>
42+
<p>
43+
A branch is a copied workspace from the main development and developers can modify and fix on her/his own branch of project without messing the main development.
44+
</p>
45+
<a href="https://www.w3schools.com/GIT/git_branch.asp?remote=github">Read more</a>
46+
</article>
47+
</main>
48+
5049
<footer>
51-
<div id="wrapper">
5250
<p>
5351
By Lin Tsang. This webpage serves as a test environment. Some images and media displayed on this site are sourced from external websites for demonstrative and educational purposes. All copyrights, trademarks, and intellectual property regarding these images remain the property of their respective owners. https://iconscout.com/
54-
5552
</p>
56-
</div>
5753
</footer>
5854
</body>
5955
</html>

‎Wireframe/style.css‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -53,26 +53,27 @@ p {
5353
/* aspect ratio for image */
5454
aspect-ratio: 16 / 9;
5555
}
56-
#wrapper{
57-
/* wrapper to make the content to 80% width */
58-
width:80%;
59-
margin: 0 auto;
60-
}
56+
6157

6258
/* ====== Site Layout ======
6359
Setting the overall rules for page regions
6460
https://www.w3.org/WAI/tutorials/page-structure/regions/
6561
*/
62+
header, main{
63+
width: 80%;
64+
margin-inline: auto;
65+
}
6666
main {
6767
max-width: var(--container);
6868
margin: 0 auto calc(var(--space) * 4) auto;
6969
}
7070
footer {
7171
width: 100%;
72+
position: relative;
7273
text-align: center;
7374
background-color: #eee;
7475
font-size: 0.8rem;
75-
padding: 60px 0 60px 0;
76+
padding: 60px 120px;
7677
}
7778
/* ====== Articles Grid Layout ====
7879
Setting the rules for how articles are placed in the main element.

0 commit comments

Comments
 (0)