-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtut20.htm
More file actions
65 lines (64 loc) · 7.86 KB
/
tut20.htm
File metadata and controls
65 lines (64 loc) · 7.86 KB
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Grid </title>
<style>
.container{
display: grid;
grid-gap: 1rem;
grid-template-areas:
'navbar navbar navbar navbar'
'section section section aside'
'footer footer footer footer ';
}
.item{
background-color: yellow;
border: 3px solid black;
padding: 12px 23px;
}
#navbar{
grid-area: navbar;
}
#section{
grid-area: section;
}
#aside{
grid-area: aside;
}
footer{
grid-area: footer;
}
</style>
</head>
<body>
<div class="container">
<div id="navbar" class="item">
Home About Contact Us
</div>
<div id="section" class="item">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Excepturi consequuntur quos accusamus iste omnis aut illo expedita facere veniam, sapiente ullam possimus suscipit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias, rerum assumenda facere et voluptas praesentium dolores sequi dolorem dolorum labore vel asperiores, odit, saepe soluta quibusdam beatae quasi dignissimos minima! Obcaecati facere ducimus, beatae illo laboriosam officiis esse a rerum quibusdam. Autem laboriosam, veniam vel, voluptates, dolor voluptatem voluptatum fugiat unde tenetur quia ad dolorum tempore quas corporis! Ut distinctio inventore dolorum quis odio totam aliquam exercitationem! Debitis animi ipsum unde obcaecati sed, fugiat autem iste provident odio, illum asperiores, temporibus a veniam. Est eveniet sint recusandae ducimus mollitia accusamus doloremque dignissimos, iusto enim commodi, illo, sequi odit! Saepe doloremque labore aperiam incidunt pariatur. Necessitatibus mollitia expedita reprehenderit accusamus in animi officia voluptates. Similique voluptates ad nam, dolor vero nisi eos, ut eum illum cumque molestiae quod incidunt voluptatum, provident itaque dolorum nesciunt. Nisi omnis necessitatibus voluptatum cupiditate doloribus, magni quasi iste quos deleniti voluptas qui non ad, aliquid quam numquam in consequuntur possimus? Debitis, ipsum officiis libero maiores hic natus? Iste ipsam facere fugit quasi distinctio quos sit voluptatem quas adipisci veniam incidunt possimus aperiam maiores inventore eaque consectetur nam nulla, magni labore minima consequuntur! Quae molestiae distinctio eaque ipsam ab sit quis tenetur veritatis, id voluptatem recusandae, optio quas itaque ex possimus dignissimos enim nihil. Exercitationem accusantium quis fugiat quos, cumque molestiae architecto iure modi reprehenderit, eveniet doloribus hic aliquid quaerat deleniti magni impedit itaque inventore esse aspernatur qui. Sequi omnis laborum est eaque quaerat perspiciatis perferendis possimus nemo maxime, libero unde officia voluptates iusto accusantium quos mollitia eos porro odit, distinctio consectetur in. Magni, quam accusamus quibusdam eligendi nobis nulla, eveniet nesciunt hic perspiciatis maxime repudiandae excepturi, animi consequuntur. Nam tempore exercitationem ad laboriosam libero quis inventore iste minus illo totam? Rem, eligendi excepturi ducimus similique vero doloribus eveniet quas doloremque. Doloribus tenetur voluptatibus quo sit deserunt laboriosam doloremque. Eaque aliquam error incidunt? Illo rem quibusdam numquam omnis aliquam ipsam, doloremque sequi mollitia nobis harum eius suscipit officiis labore, fugit nemo quidem autem ex, eos quisquam iusto. Maxime totam debitis quis provident pariatur fugiat aliquam, alias praesentium? Laudantium sint, aliquam porro obcaecati numquam at explicabo totam harum iure debitis asperiores quod cumque neque dolores accusantium, tempore ipsa quo quae perspiciatis aperiam natus reprehenderit dolorum quam. Consectetur, laborum voluptatibus ullam libero voluptas perspiciatis maiores eligendi id dolorum suscipit perferendis blanditiis, dignissimos nemo consequuntur voluptate tempora velit numquam, eos maxime optio voluptatem odio. Sequi et tempore a quos praesentium.
</div>
<div id="aside" class="item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas soluta expedita quis!
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam beatae laudantium nihil aliquam quisquam, suscipit, tempora maxime excepturi vitae animi voluptatem dignissimos cumque nobis obcaecati, eius temporibus voluptas? Numquam ullam atque cum minima quod deleniti quae qui! Possimus doloribus ea odio explicabo vel. Nemo saepe suscipit ipsa eum tenetur quidem laborum alias corrupti! Ad doloribus voluptas laudantium fugiat odit temporibus, minima in assumenda cupiditate nihil aliquid sit ullam porro esse tempore neque! Error et illo sit deleniti voluptates. Exercitationem fuga quos, autem ea explicabo minima animi impedit, corporis obcaecati qui esse fugiat a illum dicta quam quis, non repellendus saepe dolores sequi vero eveniet ipsum! Qui enim soluta non eveniet pariatur totam ipsa alias vitae, eum minus rerum facere magnam nesciunt inventore exercitationem praesentium voluptatibus blanditiis mollitia ipsum illo asperiores animi quas distinctio veniam! Sit enim numquam, consequuntur eius inventore sint quidem praesentium iusto, commodi itaque eligendi atque expedita perferendis quam quae quod eaque totam culpa quia sed ad. Error nisi voluptates doloribus ab, enim porro tenetur? Nulla eligendi minus deleniti omnis quae blanditiis, tempora voluptas incidunt beatae obcaecati? Facilis animi delectus quaerat, rem quidem totam iure cum maiores dolore ut magni. Consequuntur cum magnam dolor officiis, harum ipsum blanditiis dicta amet iusto quos, sed eaque ipsa atque provident voluptas rem. Nesciunt minima esse, facilis recusandae quod adipisci magnam assumenda necessitatibus! Dolor blanditiis exercitationem quas vero officia quia ipsam, vel maiores distinctio minus autem eveniet consequuntur magni. Id nostrum, sunt cum nesciunt dolore quisquam eligendi dolorem recusandae, beatae quis eveniet, aut velit itaque neque necessitatibus quasi laudantium commodi illo adipisci minima! Id suscipit quae omnis. Veritatis, temporibus. Delectus, eligendi! Magnam itaque veritatis reprehenderit eos odit, explicabo recusandae incidunt vitae voluptate saepe hic blanditiis pariatur officia. Necessitatibus suscipit quo nostrum! Expedita nostrum dolore perspiciatis id, itaque repudiandae tempora doloribus amet quas, dicta quam! Nam dolorem voluptatum incidunt iure cum eos enim voluptate, iusto voluptatibus modi repudiandae quo, ipsum, quos qui soluta. Eos architecto, adipisci rem ipsam unde reiciendis officiis eveniet, suscipit eaque quae tempora omnis earum ipsum sapiente nostrum neque itaque consequuntur maiores. Saepe officia dolores inventore! Natus et aliquid dolorem eius delectus, architecto dolor non atque beatae aperiam ipsum numquam quae deserunt voluptates voluptate maxime, cum quis ex quia quaerat placeat illo. Distinctio, atque, adipisci officia alias excepturi facere iure minus non voluptas dolore quidem architecto impedit nostrum optio delectus expedita possimus hic, repudiandae iste ipsa eveniet tempore. Impedit, cupiditate.
</div>
<footer class="item">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Provident quo libero cumque.</footer>
<!-- <div class="item">Item-1</div>
<div class="item">Item-2</div>
<div class="item">Item-3</div>
<div class="item">Item-4</div>
<div class="item">Item-5</div>
<div class="item">Item-6</div>
<div class="item">Item-7</div>
<div class="item">Item-8</div>
<div class="item">Item-9</div>
<div class="item">Item-10</div>
<div class="item">Item-11</div>
<div class="item">Item-12</div>
<div class="item">Item-13</div>
<div class="item">Item-14</div> -->
</div>
</body>
</html>