-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
79 lines (67 loc) · 4.58 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LuksOracle</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="shortcut icon" type="png" href="./images/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/>
<!--Replace with your tailwind.css once created-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet">
</head>
<body class="leading-normal tracking-normal text-gray-900" style="font-family: 'Source Sans Pro', sans-serif;">
<div class="h-screen pb-14 bg-cover " style="background-image:url('./images/header.png');">
<!--Nav-->
<div class="w-full container mx-auto p-6">
<div class="w-full flex items-center justify-between">
<a class="flex items-center hover:text-indigo-300 text-indigo-400 no-underline hover:no-underline font-bold text-2xl lg:text-4xl" href="index.html">
<img src="./images/logo.png" class="h-8 pr-2" viewBox="0 0 20 20"></img> LuksOracle
</a>
<div class="flex w-1/2 justify-end content-center">
<a class="inline-block text-blue-100 no-underline hover:text-indigo-300 hover:text-underline text-center h-10 p-2 md:h-auto md:p-4" href="https://luksoracle.github.io/documentation">
<i class="fa-solid fa-book fa-2x"></i>
</a>
<a class="inline-block text-blue-100 no-underline hover:text-indigo-300 hover:text-underline text-center h-10 p-2 md:h-auto md:p-4" href="https://twitter.com/luksOracle">
<i class="fa-brands fa-twitter fa-2x"></i>
</a>
<a class="inline-block text-blue-100 no-underline hover:text-indigo-300 hover:text-underline text-center h-10 p-2 md:h-auto md:p-4" href="https://github.com/LuksOracle/frontend">
<i class="fa-brands fa-github fa-2x"></i>
</a>
</div>
</div>
</div>
<!--Main-->
<div class="container pt-24 md:pt-48 px-6 mx-auto flex flex-wrap flex-col md:flex-row items-center text-center content-center justify-items-center justify-center">
<!--Left Col-->
<div class="flex flex-col w-full xl:w-2/5 justify-center lg:items-start overflow-y-hidden">
<h1 class="my-4 text-3xl drop-shadow-2xl md:text-5xl text-white font-bold leading-tight slide-in-bottom-h1 self-center">Lukso Oracle</h1>
<p class="leading-normal drop-shadow-2xl backdrop-blur-2xl text-white text-base md:text-2xl mb-8 self-center text-center slide-in-bottom-subtitle">Bringing Twitter to Lukso with ChainLink <br> Oracle Services</p>
<div class="flex justify-center md:justify-start pb-24 lg:pb-0 fade-in self-center">
<form action="faucet.html" method="get">
<button type="submit" class="transition hover:scale-105 transform duration-300 ease-in-out py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Get LINK</button>
<!-- <button type="submit" class="transition hover:scale-105 transform duration-300 ease-in-out py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-blue-600 focus:outline-none bg-white rounded-lg border-blue-600 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Get LINK</button> -->
</form>
<form action="twitter.html" method="get">
<button type="submit" class="rounded-lg bg-gradient-to-r leading-tight from-purple-800 to-pink-500 hover:from-pink-500 hover:to-purple-800 text-white focus:ring focus:outline-none transition hover:scale-105 transform duration-300 ease-in-out px-5 py-2.5 text-center mr-2 mb-2">Connect your Twitter</button>
</form>
</div>
</div>
<!--Right Col-->
<!-- <div class="w-full xl:w-3/5 py-6 overflow-y-hidden">
<img class="w-5/6 mx-auto lg:mr-0 slide-in-bottom" src="/images/luksooracle.png">
</div> -->
<!-- Footer-->
<!-- <div class="w-full pt-16 pb-6 text-sm text-center md:text-left fade-in">
<a class="text-gray-500 no-underline hover:no-underline" href="#">© Faucet 2021</a>
</div> -->
</div>
</div>
<!-- jQuery if you need it
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->
</body>
</html>