-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
29 lines (26 loc) · 1.18 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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Dad Joke Generator</title>
</head>
<body class="flex flex-col items-center justify-center min-h-screen">
<main class=" w-full max-w-4xl p-20 text-center bg-white rounded rounded-md">
<h1 class="py-6 text-5xl font-bold">Welcome to the Dad Joke Generator!</h1>
<p class="text-3xl font-thin">Click the button below to get a new joke</p>
<p class="py-8 text-3xl" id="joke">What do you call Batman and Robin after they get run over by
a steam
roller? Flatman and Ribbon!</p>
<button
class="text-violet-100 hover:scale-95 hover:bg-gradient-to-tl hover:from-violet-800 hover:to-fuchsia-800 bg-gradient-to-br from-violet-500 to-fuchsia-500 drop-shadow-md p-4 mt-3 transition-all duration-700 ease-in-out rounded rounded-md"
id="generate-joke">Get A
Joke</button>
</main>
<script src="app.js"></script>
</body>
</html>