-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (96 loc) · 2.85 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
<style>
body {
display: grid;
grid-template-rows: 100px min-content 1fr min-content;
grid-template-columns: 300px 1fr 300px;
grid-column-gap: 10px;
grid-row-gap: 10px;
height: 100%;
margin: 0;
padding: 0;
}
h1 {
grid-row: 1;
grid-column: 2 / span 2;
align-self: center;
justify-self:start;
}
article {
grid-row: 2 / span 2;
grid-column: 2;
align-self: start;
}
nav {
grid-row: 2;
grid-column: 1;
}
aside{
grid-row: 2;
grid-column: 3;
}
footer {
grid-row: 4;
grid-column: 1 / 4;
align-self: center;
justify-self:stretch;
padding:10px;
background-color: #e1e1e1;
}
@media (min-width: 0px) and (max-width: 992px) {
body {
display: grid;
grid-template-rows: min-content 1fr min-content min-content min-content;
grid-template-columns: 1fr;
}
h1 {
grid-row: 1 ;
grid-column: 1;
align-self: center;
justify-self:center;
}
article {
grid-row: 2;
grid-column: 1;
}
nav {
grid-row: 4;
grid-column: 1;
}
aside{
grid-row: 3;
grid-column: 1;
}
footer {
grid-row: 5;
grid-column: 1;
align-self: center;
justify-self:stretch;
}
}
</style>
<h1>Hello and Welcome to My Demo</h1>
<article>
<p>
Labore sunt culpa consectetur non et fugiat eu aliqua et sunt. Pariatur eu laboris consequat nulla fugiat ut pariatur mollit
consequat. Et ad irure non proident elit nostrud ad aliqua minim commodo esse aliqua cillum. Sit nisi qui mollit
ullamco nisi minim anim. Nulla reprehenderit aliqua irure sint excepteur aute deserunt duis proident esse exercitation
aute exercitation veniam.
</p>
<p>
Labore sunt culpa consectetur non et fugiat eu aliqua et sunt. Pariatur eu laboris consequat nulla fugiat ut pariatur mollit
consequat. Et ad irure non proident elit nostrud ad aliqua minim commodo esse aliqua cillum. Sit nisi qui mollit
ullamco nisi minim anim. Nulla reprehenderit aliqua irure sint excepteur aute deserunt duis proident esse exercitation
aute exercitation veniam.
</p>
</article>
<nav>
<ul>
<li>Random Text Added Here</li>
<li>Random Text Added Here</li>
<li>Random Text Added Here</li>
<li>Random Text Added Here</li>
<li>Random Text Added Here</li>
</ul>
</nav>
<aside><p>Hi I am an Aside and I contain some stuff that is aside to the main content. I hope you like it.</p></aside>
<footer>© Martin Beeby 2017</footer>