-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (128 loc) · 7.6 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FAVICON -->
<link rel="apple-touch-icon" sizes="180x180" href="./assets/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicons/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<title>BaityBait | Youtuber y Streamer de Videojuegos</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- HEADER -->
<header class="relative bg-slate-900 overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="relative z-10 pb-8 bg-slate-900 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
<svg class="hidden lg:block absolute right-0 inset-y-0 h-full w-48 text-white transform translate-x-1/2"
fill="#4f46e5" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<polygon points="50,0 100,0 50,100 0,100" />
</svg>
<!-- NAVBAR -->
<div>
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
<nav class="relative flex items-center justify-between sm:h-10 lg:justify-start" aria-label="Global">
<div class="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div class="flex items-center justify-center sm:justify-center w-full md:w-auto">
<!-- LOGO -->
<a href="/">
<span class="sr-only">BaityBait</span>
<img class="w-12 lg:w-10 h-auto" src="./assets/img/baityBait_100x100.png" alt="Logo BaityBait">
</a>
<!-- LOGO -->
</div>
</div>
<div class="hidden md:block md:ml-10 md:pr-4 md:space-x-8">
<a href="#" class="font-medium text-slate-50 hover:text-slate-400">Sobre mi</a>
<a href="#videos" class="font-medium text-slate-50 hover:text-slate-400">Últimos videos</a>
<a href="https://www.twitch.tv/baitybait" class="font-medium text-slate-50 hover:text-slate-400">Streams en Twitch</a>
</div>
</nav>
</div>
</div>
<!-- NAVBAR -->
<!-- HERO -->
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
<div class="sm:text-center lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
<span class="block text-indigo-600 xl:inline">BaityBait</span>
</h1>
<p class="mt-3 text-base text-slate-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Digo tonterías sobre videojuegos en un montón de plataformas, pero sobre todo en formato video.</p>
<p class="mt-3 text-base text-slate-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Experto en monas chinas</p>
</div>
</main>
<!-- HERO -->
</div>
</div>
<!-- MAIN IMAGE -->
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
<img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full"
src="./assets/img/baity.png" alt="Baity Bait rascándose los cojones">
</div>
<!-- MAIN IMAGE -->
</header>
<!-- HEADER -->
<!-- LAST VIDEOS -->
<div id="videos" class="bg-slate-900">
<div class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8">
<h2 class="text-2xl font-extrabold tracking-tight text-slate-50">
Últimos videos
</h2>
<div id="last-videos" class="mt-6 grid grid-cols-1 gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
<!-- content -->
</div>
</div>
</div>
<!-- LAST VIDEOS -->
<!-- FOOTER -->
<footer class="bg-slate-800">
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
<h2 class="text-3xl font-extrabold tracking-tight text-slate-50 sm:text-4xl">
<span class="block">Streams todos los dias en</span>
<a href="https://www.twitch.tv/baitybait" target="_blank" class="block text-indigo-600">twitch.tv/baitybait</a>
</h2>
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
<!-- TWITCH LOGO -->
<a class="mr-2" href="https://www.twitch.tv/baitybait" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#61439f" class="bi bi-twitch" viewBox="0 0 16 16">
<path d="M3.857 0 1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0H3.857zm9.714 7.429-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142v6.286z"/>
<path d="M11.857 3.143h-1.143V6.57h1.143V3.143zm-3.143 0H7.571V6.57h1.143V3.143z"/>
</svg>
</a>
<!-- YOUTUBE LOGO -->
<a class="mr-2" href="https://www.youtube.com/c/SrBaityBait" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="#c82b29" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg>
</a>
<!-- TWITTER LOGO -->
<a href="https://twitter.com/baityBait/" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48"
style=" fill:#000000;">
<path fill="#03A9F4"
d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429">
</path>
</svg>
</a>
</div>
</div>
<!-- CREDITS -->
<div class="w-full text-center text-slate-300 pb-5">
<p>
Hecho con 🤍 por
<a class="text-indigo-600 font-bold" href="https://github.com/bl00p1ng" target="_blank" rel="noopener noreferrer">Andrés López</a>
</p>
</div>
<!-- CREDITS -->
</footer>
<!-- FOOTER -->
<!-- JAVASCRIPT -->
<script src="./assets/js/main.js"></script>
</body>
</html>