-
Notifications
You must be signed in to change notification settings - Fork 0
/
hero.html
79 lines (74 loc) · 5.36 KB
/
hero.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/src/style.css" />
<title>Vite + TS</title>
</head>
<body>
<div class="w-screen h-dvh group flex items-center justify-center">
<div class="h-full w-full flex items-center mx-auto">
<div class="w-5/12 flex flex-shrink-0 justify-end border-t border-b border-dashed border-gray-200">
<div class="max-w-xl lg:p-10">
<div>
<p class="text-4xl text-black font-semibold lg:text-5xl">
Medium length hero headline goes here
</p>
<p class="max-w-xl mt-4 text-lg tracking-tight text-gray-600">
Ready to take your business to the next level? Check out our product and see how it can help
you grow. From automating tasks to streamlining your workflow, we've got you covered.
</p>
</div>
<div class="flex flex-col gap-3 mt-10 sm:flex-row">
<a class="inline-flex items-center justify-center w-full px-6 py-3 text-center text-white duration-200 bg-black border-2 border-black hover:bg-transparent hover:border-black rounded-xl hover:text-black focus:outline-none lg:w-auto focus-visible:outline-black focus-visible:ring-black"
href="#">
Primary button
</a>
<a class="inline-flex items-center justify-center w-full rounded-xl px-6 py-3 text-center text-black duration-200 hover:bg-gray-100 focus:outline-none lg:w-auto focus-visible:outline-gray-600 focus-visible:ring-gray-300"
href="#">
<span>
Secondary button
</span>
</a>
</div>
</div>
</div>
<div class="w-7/12">
<div class="h-full min-h-[400px] w-full">
<div class="w-full h-full perspective-distant">
<div
class="absolute starting:opacity-0 opacity-100 starting:rotate-y-0 delay-300 transition-all starting:-translate-x-32 [transition-timing-function:cubic-bezier(0.65,0,0.35,1)] duration-1000 delay-500 starting:scale-100 bottom-0 left-0 w-[250px] z-20 border border-gray-200 border-r-4 border-gray-200 h-auto rounded-xl starting:opacity-0 opacity-100 delay-300 transition-all duration-1000 overflow-hidden shadow-sm transform-3d translate-y-[115px] -rotate-y-16 rotate-x-3 -rotate-z-1 scale-70 -translate-x-12 z-0">
<img src="https://cdn.devdojo.com/images/november2024/website-sidebar.png"
class="w-full h-full object-cover" alt="hero sidebar" />
</div>
<div
class="absolute w-auto h-auto rounded-xl starting:opacity-0 opacity-100 pl-5 starting:-translate-x-20 pr-20 py-5 bg-gradient-to-r from-white/20 via-white/50 to-white starting:rotate-y-0 rotate-x-3 -rotate-z-1 starting:scale-100 delay-300 transition-all [transition-timing-function:cubic-bezier(0.65,0,0.35,1)] duration-1000 overflow-hidden shadow-xl transform-3d translate-y-4 -rotate-y-16 scale-[78%] border border-gray-200 border-r-4 border-r-gray-300 translate-x-5 translate-y-0 z-10">
<header id="header" class="md:flex md:items-start">
<div class="flex-auto max-w-4xl">
<p class="mb-2 text-sm leading-6 font-semibold text-sky-500 dark:text-sky-400">
Installation</p>
<h1
class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight dark:text-slate-200">
Get started with Tailwind CSS</h1>
<p class="mt-2 text-lg text-slate-700 dark:text-slate-400">Tailwind CSS works by
scanning all of your HTML files, and any other templates
for class names, generating the corresponding styles and writing them to a
static CSS file.</p>
</div>
</header>
</div>
<div
class="w-full h-full rounded-xl overflow-hidden border-r-4 border border-gray-200 border-r-gray-300 shadow-xl transition-all starting:rotate-y-0 duration-1000 ease-out starting:translate-x-0 rotate-x-3 starting:scale-150 scale-[99%] starting:opacity-0 opacity-100 -translate-x-20 -rotate-y-[23deg]">
<img src="https://cdn.devdojo.com/images/november2024/website-screen.png"
class="w-full h-full object-cover" alt="hero image" />
</div>
</div>
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>