-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
74 lines (69 loc) · 10.5 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
<!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>Document</title>
<link rel="stylesheet" href="style/normalization.css">
<link rel="stylesheet" href="style/grid.css">
<link rel="stylesheet" href="style/spacing.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 p-x-40">
<h1>Header</h1>
</div>
</div>
</div>
<div class="container">
<div class="row p-x-40">
<h2>Example of responsive grid</h2>
</div>
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores iusto saepe earum animi quisquam? Qui sint consequuntur tempore sequi distinctio eaque laboriosam quas laudantium corrupti iure nostrum earum modi dolore eligendi vel officiis voluptatem temporibus, accusamus nisi consequatur iusto perferendis cumque? Eum quo nobis culpa dolore minus consequatur obcaecati recusandae. Minus ipsa sint repudiandae, consectetur quasi ab maiores eius, hic accusantium quam, a tempore. Deleniti magni obcaecati, illo, soluta minus optio laudantium ratione, maxime totam doloribus omnis fuga! Id, deleniti voluptas voluptatibus reprehenderit modi architecto laborum dolor harum dignissimos. Odio repudiandae omnis laborum quaerat? Eaque quisquam ab omnis optio temporibus?</p>
</div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum vel perferendis iste architecto amet libero! Eius, rerum. Laboriosam autem commodi fugit, in laborum consectetur voluptatum, perferendis aspernatur, quaerat deleniti quam officia! Est quam assumenda quas ex repellendus, a reprehenderit nostrum. Numquam maiores aliquam, illum minima repellendus molestiae quas corporis asperiores quidem, facere incidunt pariatur voluptatum optio esse, error voluptates veritatis. Fugit, sunt eum fuga officiis repellendus commodi soluta quam enim pariatur adipisci dolorum odio quidem voluptatibus ratione quae consequatur praesentium at assumenda dolores. Voluptas quo, inventore sunt illum atque repellendus laborum neque quae dolorum temporibus omnis nisi. Autem, saepe nulla!</p>
</div>
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum vel perferendis iste architecto amet libero! Eius, rerum. Laboriosam autem commodi fugit, in laborum consectetur voluptatum, perferendis aspernatur, quaerat deleniti quam officia! Est quam assumenda quas ex repellendus, a reprehenderit nostrum. Numquam maiores aliquam, illum minima repellendus molestiae quas corporis asperiores quidem, facere incidunt pariatur voluptatum optio esse, error voluptates veritatis. Fugit, sunt eum fuga officiis repellendus commodi soluta quam enim pariatur adipisci dolorum odio quidem voluptatibus ratione quae consequatur praesentium at assumenda dolores. Voluptas quo, inventore sunt illum atque repellendus laborum neque quae dolorum temporibus omnis nisi. Autem, saepe nulla!</p>
</div>
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum vel perferendis iste architecto amet libero! Eius, rerum. Laboriosam autem commodi fugit, in laborum consectetur voluptatum, perferendis aspernatur, quaerat deleniti quam officia! Est quam assumenda quas ex repellendus, a reprehenderit nostrum. Numquam maiores aliquam, illum minima repellendus molestiae quas corporis asperiores quidem, facere incidunt pariatur voluptatum optio esse, error voluptates veritatis. Fugit, sunt eum fuga officiis repellendus commodi soluta quam enim pariatur adipisci dolorum odio quidem voluptatibus ratione quae consequatur praesentium at assumenda dolores. Voluptas quo, inventore sunt illum atque repellendus laborum neque quae dolorum temporibus omnis nisi. Autem, saepe nulla!</p>
</div>
</div>
<div class="row">
<h2 class="p-x-40">Example of mixed number of columns per size (device width)</h2>
</div>
<div class="row">
<div class="col-xl-6 col-lg-3 col-md-3 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores iusto saepe earum animi quisquam? Qui sint consequuntur tempore sequi distinctio eaque laboriosam quas laudantium corrupti iure nostrum earum modi dolore eligendi vel officiis voluptatem temporibus, accusamus nisi consequatur iusto perferendis cumque? Eum quo nobis culpa dolore minus consequatur obcaecati recusandae. Minus ipsa sint repudiandae, consectetur quasi ab maiores eius, hic accusantium quam, a tempore. Deleniti magni obcaecati, illo, soluta minus optio laudantium ratione, maxime totam doloribus omnis fuga! Id, deleniti voluptas voluptatibus reprehenderit modi architecto laborum dolor harum dignissimos. Odio repudiandae omnis laborum quaerat? Eaque quisquam ab omnis optio temporibus?</p>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum vel perferendis iste architecto amet libero! Eius, rerum. Laboriosam autem commodi fugit, in laborum consectetur voluptatum, perferendis aspernatur, quaerat deleniti quam officia! Est quam assumenda quas ex repellendus, a reprehenderit nostrum. Numquam maiores aliquam, illum minima repellendus molestiae quas corporis asperiores quidem, facere incidunt pariatur voluptatum optio esse, error voluptates veritatis. Fugit, sunt eum fuga officiis repellendus commodi soluta quam enim pariatur adipisci dolorum odio quidem voluptatibus ratione quae consequatur praesentium at assumenda dolores. Voluptas quo, inventore sunt illum atque repellendus laborum neque quae dolorum temporibus omnis nisi. Autem, saepe nulla!</p>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum vel perferendis iste architecto amet libero! Eius, rerum. Laboriosam autem commodi fugit, in laborum consectetur voluptatum, perferendis aspernatur, quaerat deleniti quam officia! Est quam assumenda quas ex repellendus, a reprehenderit nostrum. Numquam maiores aliquam, illum minima repellendus molestiae quas corporis asperiores quidem, facere incidunt pariatur voluptatum optio esse, error voluptates veritatis. Fugit, sunt eum fuga officiis repellendus commodi soluta quam enim pariatur adipisci dolorum odio quidem voluptatibus ratione quae consequatur praesentium at assumenda dolores. Voluptas quo, inventore sunt illum atque repellendus laborum neque quae dolorum temporibus omnis nisi. Autem, saepe nulla!</p>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum vel perferendis iste architecto amet libero! Eius, rerum. Laboriosam autem commodi fugit, in laborum consectetur voluptatum, perferendis aspernatur, quaerat deleniti quam officia! Est quam assumenda quas ex repellendus, a reprehenderit nostrum. Numquam maiores aliquam, illum minima repellendus molestiae quas corporis asperiores quidem, facere incidunt pariatur voluptatum optio esse, error voluptates veritatis. Fugit, sunt eum fuga officiis repellendus commodi soluta quam enim pariatur adipisci dolorum odio quidem voluptatibus ratione quae consequatur praesentium at assumenda dolores. Voluptas quo, inventore sunt illum atque repellendus laborum neque quae dolorum temporibus omnis nisi. Autem, saepe nulla!</p>
</div>
</div>
<div class="row">
<h2 class="p-x-40">Example of using the col push to make space</h2>
<div class="col-xl-4 col-push-xl-1 col-lg-6 col-md-6 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum vel perferendis iste architecto amet libero! Eius, rerum. Laboriosam autem commodi fugit, in laborum consectetur voluptatum, perferendis aspernatur, quaerat deleniti quam officia! Est quam assumenda quas ex repellendus, a reprehenderit nostrum. Numquam maiores aliquam, illum minima repellendus molestiae quas corporis asperiores quidem, facere incidunt pariatur voluptatum optio esse, error voluptates veritatis. Fugit, sunt eum fuga officiis repellendus commodi soluta quam enim pariatur adipisci dolorum odio quidem voluptatibus ratione quae consequatur praesentium at assumenda dolores. Voluptas quo, inventore sunt illum atque repellendus laborum neque quae dolorum temporibus omnis nisi. Autem, saepe nulla!</p>
</div>
<div class="col-xl-4 col-push-xl-2 col-lg-6 col-md-6 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum vel perferendis iste architecto amet libero! Eius, rerum. Laboriosam autem commodi fugit, in laborum consectetur voluptatum, perferendis aspernatur, quaerat deleniti quam officia! Est quam assumenda quas ex repellendus, a reprehenderit nostrum. Numquam maiores aliquam, illum minima repellendus molestiae quas corporis asperiores quidem, facere incidunt pariatur voluptatum optio esse, error voluptates veritatis. Fugit, sunt eum fuga officiis repellendus commodi soluta quam enim pariatur adipisci dolorum odio quidem voluptatibus ratione quae consequatur praesentium at assumenda dolores. Voluptas quo, inventore sunt illum atque repellendus laborum neque quae dolorum temporibus omnis nisi. Autem, saepe nulla!</p>
</div>
<div class="col-xl-6 col-push-xl-3 col-lg-8 col-push-lg-2 col-md-12 col-sm-12 p-x-40">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum vel perferendis iste architecto amet libero! Eius, rerum. Laboriosam autem commodi fugit, in laborum consectetur voluptatum, perferendis aspernatur, quaerat deleniti quam officia! Est quam assumenda quas ex repellendus, a reprehenderit nostrum. Numquam maiores aliquam, illum minima repellendus molestiae quas corporis asperiores quidem, facere incidunt pariatur voluptatum optio esse, error voluptates veritatis. Fugit, sunt eum fuga officiis repellendus commodi soluta quam enim pariatur adipisci dolorum odio quidem voluptatibus ratione quae consequatur praesentium at assumenda dolores. Voluptas quo, inventore sunt illum atque repellendus laborum neque quae dolorum temporibus omnis nisi. Autem, saepe nulla!</p>
</div>
</div>
</div>
</body>
</html>