go
/
go-web-starter-kit
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity
A small project that collects various nice things to get started with Go Web Development.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
15 Commits
1 Branch
0 Tags
908 KiB
Tag: Branch: Tree: d96a2b2a23
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'd96a2b2a23'
${ noResults }
go-web-starter-kit/pages/examples/twitch.html

204 lines
7.9 KiB
Raw Normal View History Unescape

First commit to get a basic thing going, does run but not much there.
2 months ago
<div class="text-gray-950 bg-gray-200">
<bar class="bg-gray-400 justify-evenly items-center">
<img src="/icons/twitch.svg" />
<span>Browse</span>
<img src="/icons/menu.svg" />
<bar class="p-0! bg-gray-300 rounded-lg border-1 border-gray-700">
<input placeholder="Search" />
<img src="/icons/search.svg" />
</bar>
<img src="/icons/crown.svg" />
<button type="button">Log In</button>
<button type="button">Sign Up</button>
<img src="/icons/person-standing.svg" />
</bar>
<div class="p-1">
<bar>
<img src="/icons/chevron-left.svg" />
<shape class="video">
Main Video
</shape>
<img src="/icons/chevron-right.svg" />
</bar>
<block>
<a class="text-xl">Live on Twitch</a>
<grid class="grid-cols-2 p-0! gap-2">
<block class="p-0!">
<shape class="video">Sample Video</shape>
<div class="flex align-top gap-3">
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</div>
</block>
<block class="p-0!">
<shape class="video">Sample Video</shape>
<div class="flex align-top gap-3">
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</div>
</block>
</bar>
</block>
<div class="flex justify-center items-center">
<a href="#">Show more v</a>
</div>
<block>
<span><a href="#">Categories</a> we think you'll like</span>
<grid class="grid-cols-4 p-0! gap-2">
<block class="p-0!">
<shape class="aspect-[9/12]!">Category</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</block>
<block class="p-0!">
<shape class="aspect-[9/12]!">Category</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</block>
<block class="p-0!">
<shape class="aspect-[9/12]!">Category</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</block>
<block class="p-0!">
<shape class="aspect-[9/12]!">Category</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</block>
</grid>
</block>
<grid class="grid-cols-3">
<stack class="p-0!">
<button type="button" class="rounded-xxl text-left text-xxl">Games</button>
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/gamepad.svg" />
</stack>
<stack class="p-0!">
<button type="button" class="rounded-xxl text-left text-xxl">IRL</button>
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/mic.svg" />
</stack>
<stack class="p-0!">
<button type="button" class="rounded-xxl text-left text-xxl">Music</button>
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/headphones.svg" />
</stack>
<stack class="p-0!">
<button type="button" class="rounded-xxl text-left text-xxl">Creative</button>
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/paintbrush.svg" />
</stack>
<stack class="p-0!">
<button type="button" class="rounded-xxl text-left text-xxl">Esports</button>
<img class="left-40 bottom-6 max-w-20 max-h-20" src="/icons/trophy.svg" />
</stack>
</grid>
<block>
<a class="text-xl">Live on Twitch</a>
<grid class="grid-cols-2 p-0! gap-2">
<block class="p-0!">
<shape class="video">Sample Video</shape>
<div class="flex align-top gap-3">
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</div>
</block>
<block class="p-0!">
<shape class="video">Sample Video</shape>
<div class="flex align-top gap-3">
<shape class="bg-green-400! top-3 left-3 rounded-full aspect-square! max-w-15 max-h-15">Avatar</shape>
<div class="flex flex-col gap-1">
<span class="font-bold">Title</span>
<span>Name</span>
<span>Game Title</span>
<span>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
<a class="bg-gray-700 text-gray-300 rounded-lg p-1" href="#">Pill</a>
</span>
</div>
</div>
</block>
</bar>
</block>
<block class="justify-center items-center">
<h4>an amazon company</h4>
</block>
</div>
</div>