go
/
twitter-for-coders
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
This is an idea for a Twitter clone for programmers, similar to how Dribbble is twitter for designers. It'll most likely not feature any images other than people's avatars, and no videos, or audio. Just text. 'Cause we're coders.
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.
11 Commits
1 Branch
0 Tags
608 KiB
Tag: Branch: Tree: 4bd6cfc8ce
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '4bd6cfc8ce'
${ noResults }
twitter-for-coders/pages/examples/linkedin.html

98 lines
3.4 KiB
Raw Normal View History Unescape

Initial commit with a simple starter UI for mobile.
2 months ago
<div class="text-gray-950">
<bar class="justify-evenly border-b-1 border-gray-300">
<img src="/icons/linkedin.svg" />
<img src="/icons/search.svg" />
<img src="/icons/person-standing.svg" />
<img src="/icons/briefcase.svg" />
<img src="/icons/message-square.svg" />
<img src="/icons/bell.svg" />
</bar>
<stack>
<shape class="max-h-10">Header Image</shape>
<shape class="tiny bg-green-400! top-3 left-3 rounded-full">Avatar</shape>
</stack>
<block>
<h5 class="pb-0!">Zed Shaw</h5>
<span>I write books and stuff.</span>
<span class="font-light">Miami Beach, Florida</span>
<span class="font-bold">Shavian Publishing, LLC</span>
</block>
<shape class="w-full h-15">Show More <img class="inline" src="/icons/chevron-down.svg" /></shape>
<bar>
<shape class="tiny bg-green-400! top-3 left-3 rounded-full">Avatar</shape>
<input type="text" class="w-full rounded-xl" />
</bar>
<bar class="justify-evenly">
<span><img class="inline" src="/icons/video.svg" /> Video</span>
<span><img class="inline" src="/icons/camera.svg" /> Photo</span>
<span><img class="inline" src="/icons/file-spreadsheet.svg" /> Write article</span>
</bar>
<bar class="bg-gray-300 justify-end">
<span>Sort by: <b>Top</b></span>
</bar>
<post class="flex flex-col border-b-1 border-gray-300">
<bar class="gap-0! items-center">
<shape class="tiny max-h-15! bg-green-400! top-3 left-3 rounded-full">Avatar</shape>
<block class="gap-0!">
<span>Some Dude</span>
<span class="font-light">Title</span>
<span class="font-light">14h Edited</span>
</block>
</bar>
<block>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia?</p>
</block>
<shape class="video">Some Image</shape>
<bar class="justify-evenly">
<span><img src="/icons/thumbs-up.svg" /></span>
<span><img src="/icons/message-square.svg" /></span>
<span><img src="/icons/repeat.svg" /></span>
<span><img src="/icons/send.svg" /></span>
</bar>
</post>
<post class="flex flex-col border-b-1 border-gray-300">
<bar class="gap-0! items-center">
<shape class="tiny max-h-15! bg-green-400! top-3 left-3 rounded-full">Avatar</shape>
<block class="gap-0!">
<span>Some Dude</span>
<span class="font-light">Title</span>
<span class="font-light">14h Edited</span>
</block>
</bar>
<block>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit​​, morbo vel maleficia?</p>
</block>
<shape class="video">Some Image</shape>
<bar class="justify-evenly">
<span><img src="/icons/thumbs-up.svg" /></span>
<span><img src="/icons/message-square.svg" /></span>
<span><img src="/icons/repeat.svg" /></span>
<span><img src="/icons/send.svg" /></span>
</bar>
</post>
<grid class="grid-cols-2">
<block>
<span>Job search smarter</span>
<span class="font-light">Zed reactivate this bullshit.</span>
<span>John and millions more use</span>
<button class="bg-blue-400 rounded-full">Claim Offer</button>
</block>
<shape class="tiny bg-green-400! top-3 left-3 rounded-full">Avatar</shape>
</grid>
</div>