-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (123 loc) · 4.7 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 5 Doc</title>
<style>
body,html {padding: 0; margin: 0}
header h1 { text-align:center;
font-family: arial, helvetica;
font-size: 50px;
text-shadow: 2px 2px 10px #000;
}
header {background-color: #878787;
color: #fff; padding: 20px 40px; width: 100%; box-sizing: border-box;}
nav { background-color: #ff80ff; padding: 15px 0; }
nav a {color: #000; font-size: 19px; text-decoration: none;
text-transform: uppercase;
color: #000;
font-stretch: condensed}
nav ul { list-style: none;
margin: 0 0px;
padding: 0;
display: flex;
justify-content: space-around}
nav ul li {
display: inline-block;
font-family: Gill Sans, Arial, Helvetica, sans-serif;
}
input[type="submit"]{
color:#FFF;
background-color: #000;
text-decoration: none;
border:none;
padding: 5px 20px ;
}
article{
background-color:#FFF;
margin:10px;
margin-left:0;
padding: 5px;
}
aside{
right:0;
margin: 10px;
height: auto;
width: 700px;
min-height: 100%;
background-color:#ff80ff;
margin-left:0;
padding-right:20px;
}
footer{
background-color: white;
width: 100%;
box-sizing: border-box;
padding-top: 40px;
font-family: Gill Sans, Arial, Helvetica, sans-serif;
}
.wrapper{
background-color: #878787;
display:flex;
}
header h1,h2,h3{
font-family: fantasy;
}
p{
font-family: Gill Sans, Arial, Helvetica, sans-serif;
}
h2{
font-size:30px;
text-align: center;
}
aside li{
margin-top:10px;
font-family: Gill Sans, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<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>
<li>
<form>
<input type='text' name='search' placeholder="Search Query">
<input type = 'submit' value = "Go!">
</form>
</li>
</ul>
</nav>
<div class="wrapper">
<article>
<h2> Article heading </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut lectus sed ligula aliquam elementum at imperdiet tellus. Etiam et metus porta, ultrices enim nec, tincidunt urna. Donec sit amet diam et leo euismod varius ac quis ligula. Cras rhoncus, mauris ut mattis malesuada, nisi mi aliquam est, sit amet semper mauris augue sed ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis sagittis magna tortor, at tincidunt nunc eleifend ut. Aliquam faucibus a sapien eu varius.
</p>
<section><h3>subsection</h3>
<p>Aliquam et cursus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ultrices justo at ante vehicula tincidunt. Maecenas a condimentum metus. Vivamus vel aliquet libero. Suspendisse accumsan mattis dignissim. Cras luctus, tortor eget hendrerit efficitur, risus lectus bibendum ipsum, quis tristique massa sapien id lacus.</p>
<p>Aliquam et cursus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ultrices justo at ante vehicula tincidunt. Maecenas a condimentum metus. Vivamus vel aliquet libero. Suspendisse accumsan mattis dignissim. Cras luctus, tortor eget hendrerit efficitur, risus lectus bibendum ipsum, quis tristique massa sapien id lacus.</p>
</section>
<section><h3>Another subsection</h3></section>
<p>Aliquam et cursus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ultrices justo at ante vehicula tincidunt. Maecenas a condimentum metus. Vivamus vel aliquet libero. Suspendisse accumsan mattis dignissim. Cras luctus, tortor eget hendrerit efficitur, risus lectus bibendum ipsum, quis tristique massa sapien id lacus.</p>
<p>Aliquam et cursus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ultrices justo at ante vehicula tincidunt. Maecenas a condimentum metus. Vivamus vel aliquet libero. Suspendisse accumsan mattis dignissim. Cras luctus, tortor eget hendrerit efficitur, risus lectus bibendum ipsum, quis tristique massa sapien id lacus.</p>
</article>
<aside>
<h2>Related</h2>
<ul>
<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>
</div>
<footer>©Copyright 2050 by Nobody. All rights reversed.</footer>
</body>
</html>