-
Notifications
You must be signed in to change notification settings - Fork 0
/
samples.html
68 lines (57 loc) · 3.31 KB
/
samples.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
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link href="./sample.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="fix-tr w-full h-64 bg-primary shadow border-primary border-darken border-b">
<p class="center white t-6 th-64">fix-tr w-full h-64 bg-primary white center shadow border-primary border-darken border-b</p>
</nav>
<div class="w-full h-64"></div>
<div class="container center bg-silver p-30 my-10 round">
<p class="t-1">t-1</p>
<p class="t-2 bold primary">t-2 bold primary</p>
<p class="t-4 italic gray">t-4 italic gray</p>
<p class="t-5 primary">t-5 primary</p>
<p class="t-6 ink underline">t-6 ink underline</p>
</div>
<div class="container center bg-silver p-30 my-10 round">
<div class="flex-row gap-10">
<div class="flex-1 flex-m-1 bg-white desc">flex-1 flex-m-1</div>
<div class="flex-2 flex-m-1 bg-white desc">flex-2 flex-m-1</div>
<div class="flex-5 flex-m-1 bg-white desc">flex-5 flex-m-1</div>
<div class="flex-none flex-m-none w-120 bg-white desc">flex-none flex-m-none w-120</div>
</div>
<p class="desc mb-20">flex-row gap-10 (resize window to see responsibility)</p>
<div class="flex-row center vcenter bg-white h-120">
<p class="px-20 inline center bg-gray">Verticle Centered Children</p>
</div>
<p class="desc">flex-row center vcenter bg-gray h-120</p>
</div>
<div class="container center bg-silver p-30 my-10 round">
<div class="center">
<p class="inline tap-opacity px-20 h-36 th-36 border-primary round-full center t-6 bold primary">Small Button</p>
</div>
<p class="desc mb-20">inline tap-opacity px-20 h-36 th-36 border-primary round-full center t-6 bold primary</p>
<div class="center">
<p class="inline tap-darken px-20 h-44 th-44 bg-primary round-full center t-4 bold white">Medium Button</p>
</div>
<p class="desc mb-20">inline tapDarken px-20 h-44 th-44 bg-primary round-full center t-4 bold white</p>
<div class="center">
<p class="inline tap-shrink px-20 h-54 th-54 bg-white round center t-4 bold primary">Big Button</p>
</div>
<p class="desc">inline tap-shrink px-20 h-54 th-54 bg-white round center t-4 bold primary</p>
</div>
<div class="container center bg-silver p-30 my-10 round">
<p class="desc mb-20">wh-[24~64] round-full ml-5</p>
<img class="wh-24 round-full" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.W-GJVliAPQszitY5iTO9rAAAAA?w=209&h=209&c=7&o=5&dpr=2&pid=1.7" />
<img class="wh-36 round-full ml-5" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.W-GJVliAPQszitY5iTO9rAAAAA?w=209&h=209&c=7&o=5&dpr=2&pid=1.7" />
<img class="wh-44 round-full ml-5" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.W-GJVliAPQszitY5iTO9rAAAAA?w=209&h=209&c=7&o=5&dpr=2&pid=1.7" />
<img class="wh-54 round-full ml-5" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.W-GJVliAPQszitY5iTO9rAAAAA?w=209&h=209&c=7&o=5&dpr=2&pid=1.7" />
<img class="wh-64 round-full ml-5" src="https://tse1-mm.cn.bing.net/th/id/OIP-C.W-GJVliAPQszitY5iTO9rAAAAA?w=209&h=209&c=7&o=5&dpr=2&pid=1.7" />
</div>
<div class="h-120 bg-silver center py-50">
<p class="desc">h-120 bg-silver center pt-50</p>
</div>
</body>
</html>