-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
60 lines (56 loc) · 2.77 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
<!DOCTYPE html>
<!-- demo for riggset.css -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo riggset.css</title>
<link rel="stylesheet" href="css/riggset.css">
<!-- style demo -->
<style>
header,footer{
height: 10vw;
padding: 5vw;
text-align: center;
}
main .col{
padding: 30px;
}
@media (min-width: 768px) {
main{grid-template-columns: repeat(3, 1fr);}
}
.space-around{justify-content: space-around;}
ul{margin: 10px 0}
</style>
</head>
<body>
<header class="bg-gold">
<h2>Demo Riggset</h2>
</header>
<main class="grid">
<div class="col bg-blue">
<h3>UL list style none</h3>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
<h3>UL list flex space-around</h3>
<ul class="flex space-around">
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
<div class="col bg-red">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus nulla ducimus accusamus voluptates in! Est tempora facilis in qui reiciendis fugiat error aliquam omnis eius aliquid quo aspernatur pariatur sint ea doloremque sunt perferendis, porro harum nesciunt ipsam tempore distinctio? Id quos totam ipsa quasi, laboriosam quidem eveniet est. Qui aut architecto aliquid doloribus in. Provident ipsum optio vero eos officiis aut, consequatur velit in facere accusamus recusandae nobis mollitia ipsam reprehenderit aperiam soluta, eveniet tempore laborum quam quibusdam earum. Itaque consectetur vel voluptatibus iste? Perferendis amet ratione possimus vel vero eos odit? Aliquam, excepturi. Quae asperiores corporis veniam ipsa?</p>
</div>
<div class="col bg-blue">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus nulla ducimus accusamus voluptates in! Est tempora facilis in qui reiciendis fugiat error aliquam omnis eius aliquid quo aspernatur pariatur sint ea doloremque sunt perferendis, porro harum nesciunt ipsam tempore distinctio? Id quos totam ipsa quasi, laboriosam quidem eveniet est. Qui aut architecto aliquid doloribus in. Provident ipsum optio vero eos officiis aut, consequatur velit in facere accusamus recusandae nobis mollitia ipsam reprehenderit aperiam soluta, eveniet tempore laborum quam quibusdam earum. Itaque consectetur vel voluptatibus iste? Perferendis amet ratione possimus vel vero eos odit? Aliquam, excepturi. Quae asperiores corporis veniam ipsa?</p>
</div>
</main>
<footer class="bg-grey">
<h3>This is the footer</h3>
</footer>
</body>
</html>