Skip to content

Commit cf79dc1

Browse files
Jacknguyen4438Jacknguyen4438
committed
Making the layout of each item match with how the wireframe should like for the course work.
1 parent 28e6358 commit cf79dc1

2 files changed

Lines changed: 47 additions & 10 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,48 +3,55 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
6+
<title>Wireframe-code blog for beginner</title>
77
<link rel="stylesheet" href="style.css" />
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
11+
<h1>Wireframe Basic knowledge</h1>
1212
<p>
1313
This is the default, provided code and no changes have been made yet.
1414
</p>
1515
</header>
1616
<main>
17+
<div id="div-1">
1718
<article class="article-border">
18-
<img src="placeholder.svg" alt="" class="image-size" />
19-
<h2>READ ME.md file and what is mean.</h2>
19+
<img src="placeholder.svg" alt="" class="" />
20+
<h2>READ ME.md file and what is purpose.</h2>
2021
<p>
2122
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
2223
voluptates. Quisquam, voluptates.
2324
</p>
2425
<a href="" class="Link-box-border">Read more</a>
2526
</article>
27+
</div>
2628
<hr>
29+
<!--The second Item-->
30+
<div id="row-side">
2731
<article class="article-border">
28-
<img src="placeholder.svg" alt="" class="image-size" />
32+
<img src="placeholder.svg" alt="" class="" />
2933
<h2>What is a wireframe and the purpose of it used</h2>
3034
<p>
3135
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
3236
voluptates. Quisquam, voluptates.
3337
</p>
3438
<a href="" class="Link-box-border">Read more</a>
3539
</article>
36-
<hr>
40+
41+
<!--The third item-->
42+
3743
<article class="article-border">
38-
<img src="placeholder.svg" alt="" class="image-size" />
44+
<img src="placeholder.svg" alt="" class="" />
3945
<h2>Git, repo and branch</h2>
4046
<p>
4147
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
4248
voluptates. Quisquam, voluptates.
4349
</p>
4450
<a href="" class="Link-box-border">Read more</a>
4551
</article>
46-
</main>
47-
<footer>
52+
</div>
53+
</main>
54+
<footer>
4855
<p>
4956
This is the default, provided code and no changes have been made yet.
5057
</p>

‎Wireframe/style.css‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,51 @@
1+
/*Main part of the website content(do not deleted)*/
12
.image-size {
23
width: 100%;
34
height: 20%;
45
}
56
.article-border{
67
border: 2px solid black;
78
border-radius: 5px;
8-
margin: 0px 15px 0px 25px;
9+
margin: 0px 0px 0px 5px;
910
padding-bottom: 20px;
1011
}
12+
13+
/*This is for the position of the first Item*/
14+
#div-1{
15+
width: 73%;
16+
height: 20%;
17+
position: relative;
18+
left:17%;
19+
}
20+
21+
/*This part is mainly for item 2 and 3*/
22+
23+
#row-side{
24+
width: 74%;
25+
display: flex;
26+
position: relative;
27+
left: 17%;
28+
padding: 0px 0px 0px -10px;
29+
}
30+
31+
32+
33+
/*This for the read more button do not deleted*/
1134
.Link-box-border{
1235
border: 2px solid black;
1336
margin: 0px 10px 0px 5px;
1437
padding: 10px 10px 10px 10px;
1538
}
39+
1640
p{
1741
margin: 0px 0px 30px 5px;
1842
}
43+
44+
/*For heading styling*/
1945
h2{
2046
margin-bottom: 5px;
47+
}
48+
49+
h1{
50+
text-align: center;
2151
}

0 commit comments

Comments
 (0)