-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
78 lines (68 loc) · 3.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>RustleWeb</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" sizes="16x16" type="image/png" href="https://www.rust-lang.org//static/images/apple-touch-icon.png?v=ngJW8jGAmR">
</head>
<body>
<!-- Hero -->
<div class="relative overflow-hidden mt-[4%]">
<div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 py-10">
<div class="max-w-2xl text-center mx-auto">
<h1
class="block text-3xl font-bold text-black sm:text-4xl md:text-5xl dark:text-white"
>
Rust <span class="text-[#ffc832]">Language</span>
</h1>
<p class="mt-3 text-lg text-gray-500 font-bold dark:text-gray-400">
A language empowering everyone
to build reliable and efficient software
</p>
</div>
<div class="mt-10 relative max-w-5xl mx-auto">
<div
class="w-full object-cover h-96 sm:h-[480px] bg-[url('https://c4.wallpaperflare.com/wallpaper/888/898/476/coding-logo-mozilla-firefox-programming-language-wallpaper-preview.jpg')] bg-no-repeat bg-center bg-cover rounded-xl"
></div>
<div class="absolute inset-0 w-full h-full mt-48">
<div class="flex flex-col justify-center items-center w-full h-full">
<a
class="inline-flex justify-center items-center gap-x-1.5 text-center text-sm bg-white text-gray-800 hover:text-gray-600 rounded-full transition focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 dark:bg-black dark:text-gray-200 dark:hover:text-gray-400 dark:focus:ring-offset-black"
href="https://www.youtube.com/watch?v=BpPEoZW5IiY"
>
<svg
class="w-6 h-6"
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
>
<path
d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"
/>
</svg>
Play the best crash course
</a>
</div>
</div>
<div
class="absolute bottom-12 -left-20 -z-[1] w-48 h-48 bg-gradient-to-b from-orange-500 to-white p-px rounded-lg dark:to-slate-900"
>
<div class="bg-white w-48 h-48 rounded-lg dark:bg-slate-900"></div>
</div>
<div
class="absolute -top-12 -right-20 -z-[1] w-48 h-48 bg-gradient-to-t from-blue-600 to-cyan-400 p-px rounded-full"
>
<div class="bg-white w-48 h-48 rounded-full dark:bg-slate-900"></div>
</div>
</div>
</div>
</div>
<h1 class="text-3xl text-center my-3 text-[#e7002e] font-bold sm:text-5xl lg:text-3xl lg:leading-tight dark:text-gray-200">
<span class="text-gray-500">Performance and Reliability and Productivity all in one programming language
</span>
</h1>
</body>
</html>