This repository was archived by the owner on Dec 11, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
371 lines (368 loc) · 16.8 KB
/
Copy pathindex.html
File metadata and controls
371 lines (368 loc) · 16.8 KB
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable"
content="yes">
<meta name="description"
content="Build stunning & modern sites
without complex setup. Ravenbright CSS is a zero-config & style agnostic CSS library with utility classes, reusable design tokens, minimal components & built-in dark mode.">
<meta name="keywords"
content="Minimal modern CSS library, CSS custom properties, free CSS library, open source CSS library, CSS utility classes, low level CSS, style agnostic CSS library, platform agnostic CSS library, fully-customized CSS library, utility classes, CSS variables, CSS custom properties, design system, CSS with Figma tokens, Figma tokens, reusable design tokens, minimal components, minimal UI components">
<meta name="author"
content="Ravenbright CSS library">
<meta name="language"
content="English">
<title>
Ravenbright CSS - Modern, zero-config & style agnostic CSS library with
utility classes, reusable design tokens, minimal components
</title>
<!-- Favicon -->
<link rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/16x16.png">
<link rel="apple-touch-icon"
sizes="180x180"
href="/favicon/180x180.png">
<link rel="icon"
type="image/png"
href="/favicon/32x32.png"
sizes="32x32">
<!-- Main CSS -->
<link rel="stylesheet"
href="dist/ravenbright.min.css">
</head>
<body class="bg-yellow-50">
<header>
<div class="container container-xl">
<nav aria-label="main menu"
class="flex justify-between items-center p-y-5 xs-flex-wrap md-flex-no-wrap">
<a href="https://ravenbrightcss.com"
target="_blank"
rel="noopener noreferrer"
aria-label="Ravenbright CSS">
<h1 class="h5 font-bold">Ravenbright CSS</h1>
</a>
<ul class="xs-d-none md-flex items-center">
<li><a class="md-m-r-8"
href="#">Home</a></li>
<li><a class="md-m-r-8"
href="#">About</a></li>
<li><a class="md-m-r-8"
href="#">Blog</a></li>
<li><a class="md-m-r-8"
href="#">Contact</a></li>
</ul>
<a href="https://ravenbrightcss.com"
class="btn shadow-md"
aria-label="Get started"
target="_blank"
rel="noopener noreferrer"
role="button">
<span class="white xs-d-none md-flex m-r-3">Get started</span>
<svg xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="ai ai-ArrowUpRight">
<path d="M18 6L6 18" />
<path d="M8 6h10v10" />
</svg>
</a>
</nav>
</div>
</header>
<main>
<section class="p-y-12">
<h2 class="visually-hidden">Ravenbright CSS starter template</h2>
<div class="container container-lg m-b-8">
<article class="md-flex m-b-10">
<div class="flex flex-column md-m-r-12 xs-m-b-10 md-m-b-0 md-w-50">
<span
class="badge bg-sky-100 border-sky-300 sky-800 dark-border-none dark-bg-sky-800 dark-white badge-sm p-x-3 p-y-2 m-b-4">
🗣 Customer testimonials - template 2
</span>
<h2 class="m-b-6">
Trusted & used by
<span class="blue-600 dark-yellow-500 font-bold">world-class</span>
tech companies across the world
</h2>
<p class="m-b-6">
Ut placerat orci nulla pellentesque dignissim enim. Ut lectus
arcu bibendum at. Dolor purus non enim praesent elementum.
</p>
<!--Features-->
<div class="flex xs-flex-wrap items-center">
<div class="flex items-center m-b-2">
<span
class="badge w-12 h-12 radius-md p-x-5 bg-green-100 border-green-400 dark-border-none dark-bg-gray-700 items-center m-r-4 caption">
<svg xmlns="http://www.w3.org/2000/svg"
fill="#06bf1a"
width="32"
height="32"
class="ionicon"
viewBox="0 0 512 512">
<title>Shield Checkmark</title>
<path
d="M479.07 111.36a16 16 0 00-13.15-14.74c-86.5-15.52-122.61-26.74-203.33-63.2a16 16 0 00-13.18 0C168.69 69.88 132.58 81.1 46.08 96.62a16 16 0 00-13.15 14.74c-3.85 61.11 4.36 118.05 24.43 169.24A349.47 349.47 0 00129 393.11c53.47 56.73 110.24 81.37 121.07 85.73a16 16 0 0012 0c10.83-4.36 67.6-29 121.07-85.73a349.47 349.47 0 0071.5-112.51c20.07-51.19 28.28-108.13 24.43-169.24zm-131 75.11l-110.8 128a16 16 0 01-11.41 5.53h-.66a16 16 0 01-11.2-4.57l-49.2-48.2a16 16 0 1122.4-22.86l37 36.29 99.7-115.13a16 16 0 0124.2 20.94z">
</path>
</svg>
</span>
<div class="flex flex-column w-100">
<!--stars-->
<div class="flex items-center m-b-2">
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-star m-r-3 green-600 dark-yellow-500"
width="20"
height="20"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none"
d="M0 0h24v24H0z"
fill="none"></path>
<path
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-star m-r-3 green-600 dark-yellow-500"
width="20"
height="20"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none"
d="M0 0h24v24H0z"
fill="none"></path>
<path
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-star m-r-3 green-600 dark-yellow-500"
width="20"
height="20"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none"
d="M0 0h24v24H0z"
fill="none"></path>
<path
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-star m-r-3 green-600 dark-yellow-500"
width="20"
height="20"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none"
d="M0 0h24v24H0z"
fill="none"></path>
<path
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-star m-r-3 green-600 dark-yellow-500"
width="20"
height="20"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
fill="currentColor"
stroke-linecap="round"
stroke-linejoin="round">
<path stroke="none"
d="M0 0h24v24H0z"
fill="none"></path>
<path
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z">
</path>
</svg>
</div>
<p class="small gray-600 dark-gray-400">
Trusted ratings (200 reviews)
</p>
</div>
</div>
</div>
</div>
<!-- Image -->
<img alt="Image by @wocintechchat - https://unsplash.com/photos/Q80LYxv_Tbs"
style="
height: 420px;
background-size: cover;
object-fit: cover;
padding: 0;
"
src="https://images.unsplash.com/photo-1573167507387-6b4b98cb7c13?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=480&q=80"
class="md-w-50 radius-md">
</article>
</div>
<div class="container container-lg">
<div class="grid xs-grid-cols-1 md-grid-cols-2 lg-grid-cols-3 gap-6 m-b-8">
<article class="card bg-gray-50 border-gray-200 dark-border-none dark-bg-gray-800">
<h3 class="visually-hidden">Testimonial - 1</h3>
<p class="m-b-6">
"Tellus in metus vulputate eu. Hendrerit dolor magna eget est.
Dictum at tempor commodo ullamcorper a lacus vestibulum"
</p>
<div class="flex items-start gap-3">
<img class="avatar avatar-48 m-r-2"
alt="Image by @julianwan - https://unsplash.com/photos/2EdIX-O2lkI"
src="https://images.unsplash.com/photo-1586297135537-94bc9ba060aa?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=96&q=80"
width="40"
height="40">
<div class="flex flex-column">
<p class="font-semibold">Gwyneth Shawn</p>
<p class="caption">Head of Product</p>
</div>
</div>
</article>
<article class="card bg-gray-50 border-gray-200 dark-border-none dark-bg-gray-800">
<h4 class="visually-hidden">Testimonial - 2</h4>
<p class="m-b-6">
"Diam donec adipiscing tristique risus nec feugiat in fermentum
posuere. Malesuada proin libero nunc consequat."
</p>
<div class="flex items-start gap-3">
<img class="avatar avatar-48 m-r-2"
alt="Image by @itfeelslikefilm - https://unsplash.com/photos/1nizzZ-SFw4"
src="https://images.unsplash.com/photo-1479795746179-419986b1cbb5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=96&q=80"
width="40"
height="40">
<div class="flex flex-column">
<p class="font-semibold">Saige Lavonne</p>
<p class="caption">Head of Business</p>
</div>
</div>
</article>
<article class="card bg-gray-50 border-gray-200 dark-border-none dark-bg-gray-800">
<h4 class="visually-hidden">Testimonial - 3</h4>
<p class="m-b-6">
"Aliquam faucibus purus in massa tempor. Interdum posuere lorem
ipsum dolor sit amet consectetur adipiscingt"
</p>
<div class="flex items-start gap-3">
<img class="avatar avatar-48 m-r-2"
alt="Image by @art_hauntington - https://unsplash.com/photos/B5PLtlpR7YA"
src="https://images.unsplash.com/photo-1597004897768-c503466472cc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGZhY2V8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=96&q=60">
<div class="flex flex-column">
<p class="font-semibold">Alyse Dorinda</p>
<p class="caption">Head of Marketing</p>
</div>
</div>
</article>
</div>
</div>
</section>
</main>
<footer class="p-y-12 bg-white">
<div class="container container-xl">
<div class="flex xs-flex-wrap md-flex-no-wrap justify-between items-center">
<a href="https://ravenbrightcss.com"
aria-label="Ravenbright CSS">
<h2 class="h5 font-bold">Ravenbright CSS</h2>
</a>
<div class="xs-d-none md-flex md-justify-center">
<a href="https://github.com/ravenbrightdesign/ravenbrightcss"
role="button"
aria-label="GitHub link"
class="m-r-12">
<svg xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 24 24"
fill="currentColor"
stroke-width="2"
class="ai ai-GithubFill">
<path fill-rule="evenodd"
clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z">
</path>
</svg>
</a>
<a href="https://figma.com/@ravenbright"
role="button"
aria-label="Figma link"
class="m-r-12">
<svg role="img"
aria-label="figma"
width="24"
height="24"
stroke-width="2"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M6 6C6 5.20435 6.31607 4.44129 6.87868 3.87868C7.44129 3.31607 8.20435 3 9 3H12V9H9C8.20435 9 7.44129 8.68393 6.87868 8.12132C6.31607 7.55871 6 6.79565 6 6Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M12 3H15C15.394 3 15.7841 3.0776 16.1481 3.22836C16.512 3.37913 16.8427 3.6001 17.1213 3.87868C17.3999 4.15726 17.6209 4.48797 17.7716 4.85195C17.9224 5.21593 18 5.60603 18 6C18 6.39397 17.9224 6.78407 17.7716 7.14805C17.6209 7.51203 17.3999 7.84274 17.1213 8.12132C16.8427 8.3999 16.512 8.62087 16.1481 8.77164C15.7841 8.9224 15.394 9 15 9H12V3Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M12 12C12 11.606 12.0776 11.2159 12.2284 10.8519C12.3791 10.488 12.6001 10.1573 12.8787 9.87868C13.1573 9.6001 13.488 9.37913 13.8519 9.22836C14.2159 9.0776 14.606 9 15 9C15.394 9 15.7841 9.0776 16.1481 9.22836C16.512 9.37913 16.8427 9.6001 17.1213 9.87868C17.3999 10.1573 17.6209 10.488 17.7716 10.8519C17.9224 11.2159 18 11.606 18 12C18 12.394 17.9224 12.7841 17.7716 13.1481C17.6209 13.512 17.3999 13.8427 17.1213 14.1213C16.8427 14.3999 16.512 14.6209 16.1481 14.7716C15.7841 14.9224 15.394 15 15 15C14.606 15 14.2159 14.9224 13.8519 14.7716C13.488 14.6209 13.1573 14.3999 12.8787 14.1213C12.6001 13.8427 12.3791 13.512 12.2284 13.1481C12.0776 12.7841 12 12.394 12 12V12Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M6 18C6 17.2044 6.31607 16.4413 6.87868 15.8787C7.44129 15.3161 8.20435 15 9 15H12V18C12 18.7956 11.6839 19.5587 11.1213 20.1213C10.5587 20.6839 9.79565 21 9 21C8.20435 21 7.44129 20.6839 6.87868 20.1213C6.31607 19.5587 6 18.7956 6 18Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"></path>
<path d="M6 12C6 11.2044 6.31607 10.4413 6.87868 9.87868C7.44129 9.31607 8.20435 9 9 9H12V15H9C8.20435 15 7.44129 14.6839 6.87868 14.1213C6.31607 13.5587 6 12.7956 6 12Z"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"></path>
</svg>
</a>
<a href="https://codepen.io/ravenbrightdesign"
role="button"
aria-label="Codepen link">
<svg xmlns="http://www.w3.org/2000/svg"
width="22"
height="22"
viewBox="0 0 24 24"
fill="currentColor"
stroke-width="2"
class="ai ai-CodepenFill">
<path fill-rule="evenodd"
clip-rule="evenodd"
d="M11.372.19c.38-.253.875-.253 1.256 0L23.492 7.4c.317.21.508.565.508.946v7.308c0 .38-.19.736-.508.947l-10.864 7.21c-.38.252-.875.252-1.256 0L.508 16.6A1.136 1.136 0 0 1 0 15.654V8.346c0-.38.19-.736.508-.947L11.372.19zm-9.1 10.273v3.058l2.288-1.54-2.288-1.518zm4.337 2.878L3.18 15.648l7.684 5.1v-4.583L6.61 13.341zm6.527 2.824v4.582l7.684-5.1-3.43-2.306-4.254 2.824zm6.303-4.183l2.29 1.54v-3.06l-2.29 1.52zm1.371-3.636l-3.41 2.263-4.264-2.868V3.253l7.674 5.093zm-9.946-5.093V7.74l-4.263 2.868L3.19 8.346l7.674-5.093zM12 9.715l-3.35 2.254L12 14.192l3.35-2.223L12 9.715z">
</path>
</svg>
</a>
</div>
<p class="caption xs-d-none md-flex">
© Copyright 2022. All Rights Reserved.
</p>
</div>
</div>
</footer>
</body>
</html>