-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (134 loc) · 6.03 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Complete SCSS</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<nav class="navbar navbar-primary text-white">
<h1 class="site-title">clipcss</h1>
<a href="/documentation/introduction/">Documentation</a>
<a href="https://github.com/clipcss/clipcss">Github</a>
<a href="https://discord.gg/8X5HvXy">Discord</a>
<a href="https://twitter.com/clipcss">Twitter</a>
<a href="https://github.com/clipcss/clipcss/blob/master/LICENSE">License</a>
<a href="https://github.com/clipcss/clipcss/blob/master/CONTRIBUTING.md">Contributing</a>
</nav>
<div class="container">
<!-- colors -->
<h2>Colors</h2>
<span class="text-primary">primary text</span> |
<span class="text-secondary">secondary text</span> |
<span class="text-error">error text</span> |
<span class="text-info">info text</span> |
<span class="text-blue">blue text</span> |
<span class="text-red">red text</span> |
<span class="text-green">green text</span> |
<span class="text-yellow">yellow text</span> |
<span class="text-purple">purple text</span> |
<span class="text-orange">orange text</span> |
<span class="text-gray">gray text</span>
<br><br>
<span class="bg-primary text-white">bg primary</span> |
<span class="bg-secondary text-white">bg secondary</span> |
<span class="bg-error text-white">bg error</span> |
<span class="bg-info text-white">bg info</span> |
<span class="bg-blue text-white">bg blue</span> |
<span class="bg-red text-white">bg red</span> |
<span class="bg-green text-white">bg green</span> |
<span class="bg-yellow text-white">bg yellow</span> |
<span class="bg-purple text-white">bg purple</span> |
<span class="bg-orange text-white">bg orange</span> |
<span class="bg-gray text-white">bg gray</span> |
<br><br>
<span class="bg-primary-dark-8 text-white">primary dark 8</span> |
<span class="bg-primary-dark-6 text-white">primary dark 6</span> |
<span class="bg-primary-dark-4 text-white">primary dark 4</span> |
<span class="bg-primary-dark-2 text-white">primary dark 2</span> |
<span class="bg-primary text-white">primary</span> |
<span class="bg-primary-light-2 text-white">primary light 2</span> |
<span class="bg-primary-light-4 text-white">primary light 4</span> |
<span class="bg-primary-light-6 text-white">primary light 6</span> |
<span class="bg-primary-light-8 text-white">primary light 8</span> |
<br><br>
<a href="#" class="text-primary text-hover-orange-light-1">hover me</a>
<p class="mt-2"></p>
<!-- font sizes -->
<h2 class="fs-xs fw-black">This is xs and fw-black text</h2>
<h2 class="fs-sm text-primary">This is an xxl font</h2>
<h2 class="fs-lg">This is an xxl font</h2>
<h2 class="fs-xl text-green">This is an xxl font</h2>
<h2 class="fs-xxl bg-orange">This is an xxl font</h2>
<p class="mt-2"></p>
<!-- buttons -->
<h2>Buttons</h2>
<a href="#" class="btn">default btn</a>
<a href="#" class="btn-primary text-white">click me</a>
<a href="#" class="btn-secondary text-white">click me</a>
<a href="#" class="btn-error text-white">click me</a>
<a href="#" class="btn-info">click me</a>
<a href="#" class="btn-outline-purple text-purple text-hover-white">click me</a>
<a href="#" class="btn-outline-orange text-orange text-hover-white">click me</a>
<a href="#" class="btn-complement-primary px-4 p-3 ml-4">padding button me</a>
<!-- cards -->
<div class="card p-10 br-sm">
<h3 class="card-title">Card Title</h3>
<div class="card-body">
<p>
This is some content inside the card. It can include text, images, or
anything else you like!
</p>
<a href="https://google.com">Google</a>
</div>
</div>
<!-- grid system example -->
<div class="container">
<div class="row">
<!-- Card 1 -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card br-sm">
<h3 class="card-title">Card Title</h3>
<div class="card-body">
<p>This is some content inside the card. It can include text, images, or anything else you like!</p>
<a href="https://google.com">Google</a>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card br-sm">
<h3 class="card-title">Card Title</h3>
<div class="card-body">
<p>This is some content inside the card. It can include text, images, or anything else you like!</p>
<a href="https://google.com">Google</a>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card br-sm">
<h3 class="card-title">Card Title</h3>
<div class="card-body">
<p>This is some content inside the card. It can include text, images, or anything else you like!</p>
<a href="https://google.com">Google</a>
</div>
</div>
</div>
<!-- Card 4 -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card br-sm">
<h3 class="card-title">Card Title</h3>
<div class="card-body">
<p>This is some content inside the card. It can include text, images, or anything else you like!</p>
<a href="https://google.com">Google</a>
</div>
</div>
</div>
</div>
</div>
<!-- utilities -->
</div>
</body>
</html>