-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgrid3.html
82 lines (69 loc) · 8.27 KB
/
grid3.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
<!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>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';
}
.box{
background-color: yellow;
border: 3px solid black;
}
#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="box">
Home About Contactus
</div>
<div id="section"class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam beatae molestiae, repudiandae totam eveniet sed a aut dignissimos ius
to nisi et minus vero harum itaque, reiciendis quis deleniti placeat quod inventore quam similique aliquid
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam repellendus error, corporis dolores minima dolore ipsa vel, atque, nobis magnam quis! Fugit quaerat laudantium quasi, sapiente sunt autem sed, cumque facilis similique quis inventore laboriosam provident! Debitis, repellat suscipit. Eligendi hic, animi qui reiciendis accusamus ut architecto nam molestiae iste exercitationem dolor excepturi necessitatibus distinctio voluptate sunt sequi aspernatur aperiam a impedit deserunt blanditiis odit neque, vitae labore. Culpa illum, voluptatibus tenetur odio nobis optio consectetur inventore tempora vel eos? Minima quasi dignissimos incidunt suscipit veritatis aliquam quod labore eaque, quos alias, voluptatum voluptates. Reiciendis eos velit atque, optio magni deleniti ipsam mollitia aspernatur ratione, harum tenetur, rerum delectus. Vel, omnis esse voluptatibus commodi ut, corrupti sequi magnam mollitia voluptatum iure quos rerum? Rerum laboriosam ratione quidem. Consequuntur voluptatibus deleniti optio vitae repellendus labore autem obcaecati sequi, reprehenderit aperiam, nam delectus! Architecto quos exercitationem quo magni consequuntur, facilis adipisci unde ipsam maiores obcaecati, sequi facere voluptatem possimus, nisi excepturi. Maxime, temporibus hic sunt harum deleniti perspiciatis, laborum corrupti asperiores in nisi autem ipsum quos repellat optio repudiandae molestiae? Minus, dicta sequi? Rerum nobis alias harum reprehenderit similique. Nihil recusandae blanditiis explicabo beatae iure facilis commodi veniam in at, ratione laboriosam voluptas sunt, unde aut! Maxime minima consequuntur vero aliquam voluptate laborum aperiam soluta. Molestias quisquam magni totam excepturi vitae ullam tenetur cupiditate, quidem dolor tempora voluptate commodi aspernatur id nisi velit, placeat at nulla, dicta fuga ipsum. Odit impedit ex dolor necessitatibus, vel dolorum vitae id modi temporibus earum qui totam laudantium voluptatibus tempore rem quaerat adipisci repellat. Quidem ducimus aliquam quo qui, vitae veniam provident architecto velit facilis, consequatur maiores saepe dolores accusamus hic nemo. Eum explicabo, beatae similique ullam officiis nam qui minima repellat ex, assumenda est consequuntur aspernatur, distinctio animi. Ab enim suscipit mollitia fuga sit voluptate minima velit harum ipsa eveniet consequatur dolorum deserunt, doloribus libero ducimus provident soluta obcaecati, minus voluptatibus optio quibusdam! Odio natus ex laborum animi fugiat beatae est iure eveniet libero odit eos consequuntur, voluptatem ipsa labore aperiam vero esse repudiandae accusamus recusandae laboriosam deserunt hic temporibus eius vel? Excepturi maxime velit voluptatum officiis ipsum, officia hic vitae est, debitis iusto maiores minima facere laborum, adipisci error molestiae! Totam pariatur, quaerat reiciendis, perferendis dolore qui explicabo commodi iure molestias nam voluptate fugit corrupti velit eveniet facilis, veniam quae autem. Magnam ut aut deserunt consequatur, debitis mollitia eius iusto dolores fuga, ipsam quia!\
</div>
<div id="aside"class="box">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nostrum possimus d
ignissimos quae!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati soluta tempora veritatis nostrum veniam, impedit delectus vero expedita quidem, sunt doloremque doloribus consectetur. Reprehenderit illum voluptas, eos maiores accusantium eius commodi! Quam, at facere? Cumque eos rerum repellat asperiores aperiam. Libero cumque, facere tempora fugiat ipsa natus cupiditate porro vero doloremque deleniti aliquam aspernatur ut magnam maiores nisi. Voluptas soluta veniam voluptatem a tempora, sed ratione earum, iste ex fugiat modi? Voluptas aliquid nostrum incidunt illo vero natus modi? Nesciunt beatae delectus facere inventore minus, molestiae praesentium nulla esse, consequatur accusantium recusandae eos optio ipsum tempore, sit error? Ab, architecto. Quibusdam perferendis voluptatum quas cupiditate itaque, asperiores harum! Totam commodi a nemo adipisci sequi, quam quasi sint. Unde doloremque itaque ex nisi neque earum quas sequi? Recusandae earum, minus dicta nam libero quidem et ad tempora vitae tenetur minima labore corporis pariatur repellat at provident autem nostrum iste explicabo voluptatum consequatur. Eveniet magni neque odit libero nisi fugit voluptas praesentium quisquam hic, blanditiis cumque? Laudantium, iure obcaecati repellendus voluptate consectetur excepturi culpa, eum accusantium eveniet dicta quia repudiandae vitae, aliquam labore! Placeat, quia odio accusantium culpa quaerat officiis sequi iste sapiente quam ad facere ipsam aspernatur expedita voluptatem voluptatum perspiciatis quis esse voluptate. Aut incidunt perspiciatis, earum fuga molestias ipsa necessitatibus libero culpa sequi, dignissimos deleniti suscipit odit modi impedit voluptates possimus sunt, autem nesciunt veniam est voluptas. Illo, consectetur quis dolore voluptatum ullam ipsa, ducimus vel fugiat facere praesentium repellat quo alias atque quas mollitia. Aut voluptas quaerat nulla quod dolore at molestias omnis necessitatibus? Quia assumenda temporibus quas dolorum quibusdam velit tenetur deleniti ea aperiam sunt, perspiciatis commodi? Quaerat exercitationem vero placeat. Non in vel aliquid tempora dolores debitis minus commodi nemo vero cum atque quasi suscipit natus amet, soluta eligendi odit libero? Reiciendis, dolorum. A, nobis eaque. Sit maxime facilis, beatae recusandae error distinctio odio temporibus totam, velit quia nostrum tenetur? Temporibus, maxime quia vitae eligendi accusantium nesciunt. Ut natus ea facilis laudantium explicabo quos recusandae voluptate in assumenda eius laboriosam neque odio nostrum fugit obcaecati, magni commodi, sint architecto nisi, possimus temporibus ad. Voluptatem at atque, labore eius nobis accusamus quo consequatur quaerat fugiat ipsum similique commodi minima, facilis doloribus illo obcaecati ipsam. Accusamus dolorem officia consequuntur voluptates voluptatibus nesciunt doloribus mollitia vero, sit deleniti ipsam, nisi voluptate! Quisquam veritatis esse neque, consequatur numquam corporis, soluta repellendus similique tempora cupiditate laborum suscipit eaque. Dicta, possimus mollitia.
</div>
<footer class="box">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, ipsa tempore nulla esse quod placeat, ratione aliquam modi maiores temporibus iusto distinctio commodi.
</footer>
<!-- <div class="box">item-1</div>
<div class="box">item-2</div>
<div class="box">item-3</div>
<div class="box">item-4</div>
<div class="box">item-5</div> -->
<!-- <div class="box">item-6</div>
<div class="box">item-7</div>
<div class="box">item-8</div>
<div class="box">item-9</div>
<div class="box">item-10</div>
<div class="box">item-11</div>
<div class="box">item-12</div>
<div class="box">item-13</div>
<div class="box">item-14</div> -->
</div>
</body>
</html>