-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathheader yellow and center aligned.html
164 lines (131 loc) · 4.51 KB
/
header yellow and center aligned.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html css>
<span hidden>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
</span hidden>
<title>My page teST title</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet"
type="text/css">
<style>
:root {
--base-font-color: rgb(131, 148, 150);
--secondary-font-color: rgb(88, 110, 117);
--emphasised-font: rgb(147, 161, 161);
--c-background-color: rgb(0, 43, 54);
--c-background-highlights: rgb(4, 75, 92);
--c-yellow: rgb(181, 137, 0);
--c-orange: rgb(203, 75, 22);
--c-red: rgb(220, 50, 47);
--c-magenta: rgb(211, 54, 130);
--c-violet: rgb(108, 113, 196);
--c-blue: rgb(38, 139, 210);
--c-cyan: rgb(42, 161, 152);
--c-green: rgb(133, 153, 0);
--c-navy: rgb(0, 43, 54);
--c-lightnavy: rgb(4, 75, 92);
background-color: rgb(0, 43, 54);
color: gray;
max-width: 800px;
text-align: left;
}
header {
--base-font-color: rgb(131, 148, 150);
color: yellow;
background-color: rgb(4, 75, 92);
text-align: center;
text-size-adjust: 150%;
}
nav {
list-style: none;
display: "inline-flexbox";
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
justify-items: flex-start;
justify-items: flex-end;
}
form {
text-align: center;
align-content: baseline;
}
article {
}
aside {
background-color: rgb(0, 43, 54);
color: green;
list-style: none;
text-align: right;
}
li {
list-style: none;
list-style-position: outside;
}
footer {
--base-font-color: rgb(131, 148, 150);
color: lightgray;
background-color: rgb(0, 43, 54);
}
</style>
</head>
<body>
<!-- Here is our main header that is used across all the pages of our website -->
<header>
<h1>Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our team</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- A Search form is another common non-linear way to navigate through a website. -->
<form>
<input type="search" name="q" placeholder="Search query">
<input type="submit" value="Go!">
</form>
</nav>
<!-- Here is our page's main content -->
<main>
<!-- It contains an article -->
<article>
<h2>Article heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris.
Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam
eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.
</p>
<h3>Subsection</h3>
<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt
feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
<h3>Another subsection</h3>
<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis
parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis
semper ac in est.</p>
<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas
convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit,
is fringille sem nunc vet mi.</p>
</article>
<!-- the aside content can also be nested within the main content -->
<aside>
<h2>Related</h2>
<ul>
<li>
<li><a href="#">Oh I do like to be beside the seaside</a></li>
<li><a href="#">Oh I do like to be beside the sea</a></li>
<li><a href="#">Although in the North of England</a></li>
<li><a href="#">It never stops raining</a></li>
<li><a href="#">Oh well...</a></li>
</ul>
</aside>
</main>
<!-- And here is our main footer that is used across all the pages of our website -->
<footer>
<p>©Copyright 2050 by nobody. All rights reversed.</p>
</footer>
</body>
</html>