-
Notifications
You must be signed in to change notification settings - Fork 0
/
index1.html
65 lines (58 loc) · 3.14 KB
/
index1.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
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src='https://cdn.tailwindcss.com'></script>
</head>
<body class='antialiased text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900'>
<div class='grid md:grid-cols-3 grid-cols-1 gap-2 bg-slate-800 rounded-xl shadow-md p-8'>
<div class='border-2 border-slate-400 rounded-lg'>
<div class='p-2 uppercase tracking-wide text-sm text-green-700 font-semibold text-xl'>Lorem ipsum </div>
<a href=' ./s002.html'
class='p-2 bg-slate-600 block mt-1 text-lg leading-tight font-medium text-white hover:underline'>
286 (40)<br>The Calf, The Cow, The Heifer </a>
<p class='m-2 text-slate-500 text-sm'> <a class='text-neutral-50 text-sm'>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Ipsum odio cumque voluptates nulla corrupti hic itaque repellendus
dolor voluptatem tenetur, debitis quos libero quam inventore. Repellendus, eligendi nulla! Hic,
odit?</a>
<a class='text-sky-400 text-sm'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat
inventore vero tenetur ratione repellendus error dolorum incidunt qui corrupti, velit facere optio
odio earum amet saepe sit consequuntur nulla reiciendis.</a>
</p>
</div>
<div class='border-2 border-slate-400 rounded-lg'>
<div class='p-2 uppercase tracking-wide text-sm text-green-700 font-semibold text-xl'>Lorem ipsum </div>
<a href=' ./s002.html'
class='p-2 bg-slate-600 block mt-1 text-lg leading-tight font-medium text-white hover:underline'>
286 (40)<br>The Calf, The Cow, The Heifer </a>
<p class='m-2 text-slate-500 text-sm'> <a class='text-neutral-50 text-sm'>Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Ipsum odio cumque voluptates nulla corrupti hic itaque repellendus
dolor voluptatem tenetur, debitis quos libero quam inventore. Repellendus, eligendi nulla! Hic,
odit?</a>
<a class='text-sky-400 text-sm'>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat
inventore vero tenetur ratione repellendus error dolorum incidunt qui corrupti, velit facere optio
odio earum amet saepe sit consequuntur nulla reiciendis.</a>
</p>
</div>
</div>
<div class="grid text-center" style="--bs-columns: 3;">
<div>
First auto-column
<div class="grid">
<div>Auto-column</div>
<div>Auto-column</div>
</div>
</div>
<div>
Second auto-column
<div class="grid" style="--bs-columns: 12;">
<div class="g-col-6">6 of 12</div>
<div class="g-col-4">4 of 12</div>
<div class="g-col-2">2 of 12</div>
</div>
</div>
<div>Third auto-column</div>
</div>
</body>
</html>