-
Notifications
You must be signed in to change notification settings - Fork 0
/
tut44-GdLayout.html
63 lines (55 loc) · 2.28 KB
/
tut44-GdLayout.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Layout</title>
<style>
.con {
display: grid;
grid-gap: 1rem;
grid-template-areas:
'navbar navbar navbar navbar'
'cont cont cont aside'
'footer footer footer footer';
}
.box {
border: 2px solid black;
background-color: burlywood;
}
#navbar {
grid-area: navbar;
}
#content {
grid-area: cont;
}
#aside {
grid-area: aside;
}
footer {
grid-area: footer;
}
</style>
</head>
<body>
<div class="con">
<div id="navbar" class="box">Home Services About Us</div>
<section id="content" class="box">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id unde officiis placeat dicta. Sit est aliquid in
maiores, cumque ipsa fuga iste, at amet libero praesentium ratione distinctio? Odio, deserunt. Eveniet
voluptate rem possimus cum eius. Commodi molestias, voluptatibus neque, quia cupiditate assumenda temporibus
sequi ipsa, consequatur ipsum molestiae omnis possimus aperiam? Atque odio nihil, dignissimos dolorem
debitis, consequatur, nemo molestias ratione placeat qui culpa maxime. Deserunt hic nemo quae? Nobis iusto
voluptate ducimus et vitae labore atque enim saepe tenetur dolorum eos cumque, molestias at dolorem numquam
ipsam accusamus, officiis ab expedita earum recusandae voluptatem. Nisi commodi officia unde.
</section>
<section id="aside" class="box">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea maiores eveniet vitae dolor similique aliquam
officia voluptas voluptates, quidem quam molestias omnis vel eos enim adipisci itaque non sequi porro
suscipit atque libero! Molestiae porro necessitatibus magni, alias facere nisi.
</section>
<footer class="box">Lorem ipsum dolor sit amet consectetur adipisicing elit.</footer>
</div>
</body>
</html>