-
Notifications
You must be signed in to change notification settings - Fork 0
/
holyGrail.html
96 lines (80 loc) · 3.83 KB
/
holyGrail.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
<html>
<head>
<title>Holy Grail Sample</title>
<style type="text/css">
html
{
font-family: Arial, Helvetica, sans-serif;
}
body > *
{
padding: 5px;
}
header
{
background-color: #F66;
min-width: 450px;
}
article
{
background-color: #6F6;
/*
-webkit-flex: 1;
flex: 1;
*/
}
nav
{
background-color: #66F;
/*
-webkit-order:-1;
order: -1;
*/
}
aside
{
background-color: #F6F;
/*
-webkit-align-self:center;
align-self:center;
*/
}
footer
{
background-color: #FF6;
min-width: 450px;
text-align: center;
}
.flexWrapper
{
/*
display: -webkit-flex;
display: flex;
*/
padding: 0;
}
.flexWrapper > *
{
min-width: 150px;
padding: 5px;
}
</style>
</head>
<body>
<header>
<h1>Holy Grail Sample</h1>
</header>
<div class="flexWrapper">
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis metus nulla. Maecenas semper sapien ut ante malesuada vestibulum. Ut ut lacus sed ligula pharetra fringilla. Fusce sodales dui at metus imperdiet vel tincidunt nunc egestas. Donec blandit malesuada rhoncus. Vivamus et diam metus. Sed arcu lacus, iaculis ac vulputate ac, placerat at nibh.
Aenean tempus, lectus et fringilla ornare, ante arcu dictum orci, et imperdiet justo mauris id mi. Integer feugiat commodo purus sit amet auctor. Sed tincidunt, mi id ultrices mollis, nibh erat ultricies dolor, in condimentum lacus sapien a nulla. Praesent dignissim mauris in nibh vulputate non sagittis odio suscipit. In hac habitasse platea dictumst. Nulla sit amet lectus vel augue semper malesuada id vitae sapien. Nam pellentesque leo vitae tortor scelerisque nec feugiat ligula semper. Quisque suscipit mattis leo, quis fermentum ligula suscipit non. Suspendisse dui ligula, auctor ut mattis eu, ornare sit amet quam. Donec posuere convallis turpis. Pellentesque dapibus gravida leo, ac sodales nulla porttitor vel. Mauris bibendum ligula vitae turpis tempus in venenatis enim congue. Mauris scelerisque orci quis augue accumsan vel pretium purus consectetur. Donec dapibus adipiscing diam sit amet varius. Nunc volutpat, diam ultricies viverra vestibulum, velit quam pretium odio, nec vulputate mi velit sit amet augue.
Vestibulum rhoncus dui ut nunc pulvinar vitae consequat est tristique. In porttitor arcu id massa tempor gravida. Suspendisse tincidunt sapien eu lectus feugiat tristique. Praesent justo nisi, vestibulum id interdum in, posuere ac diam. Nunc rutrum molestie molestie. Phasellus consequat laoreet quam, at laoreet nulla eleifend vestibulum. Fusce scelerisque fringilla ipsum eu gravida. Donec est sapien, rhoncus vel pretium sit amet, tincidunt in nulla.
Pellentesque aliquam, tortor id lacinia rhoncus, est sapien auctor ante, et consectetur velit leo fermentum diam. Phasellus dignissim ornare sapien, ac eleifend urna aliquet vitae. Suspendisse dapibus laoreet sem in sagittis. Quisque id congue ipsum. In faucibus nisl ut neque bibendum nec tincidunt felis semper. Sed eu odio non mauris adipiscing molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris molestie vulputate ante at fermentum. Pellentesque luctus diam lobortis nisi molestie placerat.
Nunc viverra, lacus et euismod ultricies, nulla nulla tristique ligula, quis sollicitudin quam sapien eu dolor. Phasellus at porta libero. Donec adipiscing tortor sit amet lacus hendrerit sodales. Aliquam gravida tortor in nulla viverra nec fringilla lacus pretium. Fusce scelerisque est a nibh semper sagittis. Duis convallis tortor nec ligula hendrerit sed feugiat augue laoreet. Morbi volutpat luctus nisl non malesuada. Praesent accumsan condimentum urna auctor lacinia.
</article>
<nav>Navigation</nav>
<aside>Aside</aside>
</div>
<footer>This sample made by Nils Thingvall</footer>
</body>
</html>