This repository has been archived by the owner on Feb 7, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
136 lines (119 loc) · 5.86 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
<!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>Learn Sass</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<nav class="navbar-purple text-white mb-4">
<div class="container d-flex align-items-center justify-content-around">
<h2 class="site-title">Learn SCSS</h2>
<p>Practice Sass with Net Ninja's Tutorial</p>
</div>
</nav>
<div class="container">
<!-- colors -->
<h2>Colors</h2>
<span class="text-primary text-hover-primary">primary text</span> |
<span class="text-secondary text-hover-secondary">secondary text</span> |
<span class="text-error text-hover-error">error text</span> |
<span class="text-info text-hover-info">info text</span> |
<span class="text-blue text-hover-blue">blue text</span> | <span class="text-red text-hover-red">red text</span> |
<span class="text-green text-hover-green">green text</span> |
<span class="text-yellow text-hover-yellow">yellow text</span> |
<span class="text-purple text-hover-purple">purple text</span> |
<span class="text-orange text-hover-orange">orange text</span> |
<span class="text-gray text-hover-gray">gray text</span>
<br /><br />
<span class="bg-primary text-white bg-hover-primary">bg primary</span> |
<span class="bg-secondary text-white bg-hover-secondary">bg secondary</span> |
<span class="bg-error text-white bg-hover-error">bg error</span> |
<span class="bg-info text-white bg-hover-info">bg info</span> |
<span class="bg-blue text-white bg-hover-blue">bg blue</span> |
<span class="bg-red text-white bg-hover-red">bg red</span> |
<span class="bg-green text-white bg-hover-green">bg green</span> |
<span class="bg-yellow text-white bg-hover-yellow">bg yellow</span> |
<span class="bg-purple text-white bg-hover-purple">bg purple</span> |
<span class="bg-orange text-white bg-hover-orange">bg orange</span> |
<span class="bg-gray text-white bg-hover-gray">bg gray</span> |
<br /><br />
<span class="bg-primary-dark-8 text-white bg-hover-primary-dark-8">primary dark 8</span> |
<span class="bg-primary-dark-6 text-white bg-hover-primary-dark-6">primary dark 6</span> |
<span class="bg-primary-dark-4 text-white bg-hover-primary-dark-4">primary dark 4</span> |
<span class="bg-primary-dark-2 text-white bg-hover-primary-dark-2">primary dark 2</span> |
<span class="bg-primary text-white bg-hover-primary">primary</span> |
<span class="bg-primary-light-2 text-white bg-hover-primary-light-2">primary light 2</span> |
<span class="bg-primary-light-4 text-white bg-hover-primary-light-4">primary light 4</span> |
<span class="bg-primary-light-6 text-white bg-hover-primary-light-6">primary light 6</span> |
<span class="bg-primary-light-8 text-white bg-hover-primary-light-8">primary light 8</span> |
<br /><br />
<a href="#" class="text-primary text-hover-orange-light-1">hover me</a>
<hr class="mt-4 mb-4" />
<!-- font sizes -->
<h2 class="mb-2">Font Sizes</h2>
<div class="fs-sm">this is small font</div>
<div class="fs-md">this is medium font</div>
<div class="fs-lg">this is large font</div>
<div class="fs-xl">this is extra large font</div>
<div class="fs-xxl">this is extra, extra large font</div>
<hr class="mt-4 mb-4" />
<!-- 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-outlined-purple text-purple text-hover-white">click me</a>
<a href="#" class="btn-outlined-orange text-orange text-hover-white">click me</a>
<a href="#" class="btn-complement-purple">click me</a>
<a href="#" class="btn-complement-primary">click me</a>
<hr class="mt-4 mb-4" />
<!-- cards -->
<h2>Cards</h2>
<div class="card">
<h1 class="card-title">This is a card title</h1>
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum rem illo dignissimos nesciunt quibusdam quo!
<a href="#">illo dignissimos</a>
Magnam at voluptates dolores reiciendis.
</div>
</div>
<hr class="mt-4 mb-4" />
<!-- grid system -->
<h2 class="responsive-test mb-2">Grid System</h2>
<div class="row gap-2 justify-content-center">
<div class="col-xs-12 col-sm-5 col-xl-3">
<div class="card">
<h3 class="card-title">Lorem, ipsum.</h3>
<p class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-xs-12 col-sm-5 col-xl-3">
<div class="card">
<h3 class="card-title">Lorem, ipsum.</h3>
<p class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-xs-12 col-sm-5 col-xl-3">
<div class="card">
<h3 class="card-title">Lorem, ipsum.</h3>
<p class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="col-xs-12 col-sm-5 col-xl-3">
<div class="card">
<h3 class="card-title">Lorem, ipsum.</h3>
<p class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<hr class="mt-4 mb-4" />
<!-- utilities -->
<hr class="mt-4 mb-4" />
</div>
</body>
</html>