Skip to content

Commit 8b1bb79

Browse files
CompukidCompukid
committed
activity 4.2.4
1 parent 8d9af2e commit 8b1bb79

File tree

2 files changed

+108
-0
lines changed

2 files changed

+108
-0
lines changed

‎activity_4.2.4/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<!--It's a best practice to always declare DOCTYPE!-->
3+
<html lang="en">
4+
<head>
5+
<title>Practice with Alignment</title>
6+
<meta charset="utf-8">
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<header>
11+
<h1>Welcome to my web page</h1>
12+
<p>
13+
This is the tagline to my homepage
14+
</p>
15+
</header>
16+
<section>
17+
<h2>This is the main body of my page</h2>
18+
<article id="leftP">
19+
<h3>Article title</h3>
20+
This is a buch of text that will be left aligned under the main title of the page, but still within the main center section of the page.
21+
</article>
22+
<article id="rightP">
23+
<h3>Article title</h3>
24+
Here is some more text that will be right aligned under the first paragraph, but still within the main center section of the page.
25+
</article>
26+
</section>
27+
<footer>
28+
thank you and please visit again soon!
29+
</footer>
30+
</body>
31+
</html>

‎activity_4.2.4/style.css

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
body {
2+
font-family: Tahoma;
3+
margin: 0;
4+
}
5+
6+
header {
7+
background-color: #EC576B;
8+
color: white;
9+
border-bottom: 5px #FEDC3D solid;
10+
text-align: center;
11+
}
12+
13+
header h1 {
14+
border-bottom: 2px #FFFFFF solid;
15+
width: 50%;
16+
height: 75px;
17+
text-align: center;
18+
align-content: center;
19+
margin: auto;
20+
}
21+
22+
header p {
23+
border-bottom: 2px #FFFFFF solid;
24+
height: 50px;
25+
text-align: top;
26+
27+
}
28+
29+
section {
30+
background-color: #FEDC3D;
31+
width: 75%;
32+
margin: auto;
33+
}
34+
35+
h2 {
36+
border-bottom: 5px #000000 solid;
37+
width: 30%;
38+
padding: 30px;
39+
text-align: center;
40+
margin: auto;
41+
}
42+
43+
article {
44+
background-color: #FFFFFF;
45+
width: 40%;
46+
text-align: justify;
47+
margin: 50px;
48+
padding-top: 10px;
49+
padding-left: 15px;
50+
padding-right: 15px;
51+
padding-bottom: 30px;
52+
53+
54+
}
55+
56+
#leftP {
57+
margin-left: 10%;
58+
text-align: justify;
59+
}
60+
61+
#rightP {
62+
margin-left: 50%;
63+
text-align: justify;
64+
}
65+
66+
h3 {
67+
text-align: right;
68+
}
69+
70+
footer {
71+
background-color: #4EC5C1;
72+
border-top: 5px #FEDC3D solid;
73+
color: white;
74+
text-align: center;
75+
padding: 10px;
76+
margin: 30px;
77+
}

0 commit comments

Comments
 (0)