-
Notifications
You must be signed in to change notification settings - Fork 0
/
skeleton.html
98 lines (92 loc) · 2.11 KB
/
skeleton.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
<title>My Sample Page</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #eee;
padding: 20px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: #333;
text-decoration: none;
font-weight: bold;
padding: 20px;
}
nav a:hover {
background-color: #ccc;
}
main {
padding: 20px;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
/* CSS code for four footer columns */
footer {
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Page</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor augue sit amet nulla pulvinar, vitae imperdiet lectus tristique. Fusce sit amet leo lacus. Suspendisse feugiat ligula nunc, ut commodo velit dignissim vitae. Nam vel commodo dolor. Donec vehicula bibendum ex, vel lobortis tortor tempor eu. Sed fringilla viverra ligula sit amet congue. Nulla bibendum sit amet nunc sit amet feugiat. Morbi viverra, elit ac laoreet consectetur, velit nisi malesuada orci, eget malesuada dolor lorem sed velit.</p>
</main>
<footer>
<div>
<h3>Column 1</h3>
<p>Some content goes here.</p>
</div>
<div>
<h3>Column 2</h3>
<p>Some content goes here.</p>
</div>
<div>
<h3>Column 3</h3>
<p>Some content goes here.</p>
</div>
<div>
<h3>Column 4</h3>
<p>Some content goes here.</p>
</div>
</footer>
</body>
</html>