3ae139e32c
Removed a few deprecated brands, including Mixer and Spectrum. Updated iconography and brand colors to align with guidelines set by brands and to help increase visual accessibility. This will likely be the new style moving forward, so if you want to go back to brand color button backgrounds and solid white or black iconography, you'll need to do that on your own. Added Facebook Messenger and Vimeo, please keep the suggestions coming for popular services that you believe should be included in the main branch for everyone by default.
157 lines
6.2 KiB
HTML
157 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
|
||
<!-- Page Information
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta charset="utf-8">
|
||
<title>LittleLink</title>
|
||
<meta name="description" content="Find us online!">
|
||
<meta name="author" content="Seth Cottle">
|
||
|
||
<!-- Mobile Specific Metas
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<!-- FONT
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
|
||
|
||
<!-- CSS
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="stylesheet" href="css/normalize.css">
|
||
<link rel="stylesheet" href="css/skeleton-light.css">
|
||
<link rel="stylesheet" href="css/brands.css">
|
||
|
||
<!-- Favicon
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="icon" type="image/png" href="images/avatar.png">
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Primary Page Layout
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="column" style="margin-top: 10%">
|
||
<!-- Your Image Here -->
|
||
<img src="images/avatar.png" srcset="images/avatar@2x.png 2x">
|
||
|
||
<!-- Your Name -->
|
||
<h1>LittleLink</h1>
|
||
|
||
<!-- Short Bio -->
|
||
<p>LittleLink is an open source DIY alternative to services like <a href="https://linktr.ee">Linktree</a> and <a href="https://many.link">many.link</a>. LittleLink was built using <a href="http://www.getskeleton.com">Skeleton</a>, a dead simple, responsive boilerplate—we’ve just created some branded buttons and stripped out the things you won't need. 😊</p>
|
||
|
||
|
||
<!-- Replace # with your profile URL. Delete whatever you don't need & create your own brand styles in css/brands.css -->
|
||
|
||
<!-- Github -->
|
||
<a class="button button-github" href="#"><img class="icon" src="icons/github.svg">Github</a>
|
||
<br>
|
||
|
||
<!-- Twitter -->
|
||
<a class="button button-twitter" href="#"><img class="icon" src="icons/twitter.svg">Twitter</a>
|
||
<br>
|
||
|
||
<!-- Instagram -->
|
||
<a class="button button-instagram" href="#"><img class="icon" src="icons/instagram.svg">Instagram</a>
|
||
<br>
|
||
|
||
<!-- Facebook -->
|
||
<a class="button button-facebook" href="#"><img class="icon" src="icons/facebook.svg">Find us on Facebook</a>
|
||
<br>
|
||
|
||
<!-- Facebook Messenger -->
|
||
<a class="button button-messenger" href="#"><img class="icon" src="icons/messenger.svg">Chat on Messenger</a>
|
||
<br>
|
||
|
||
<!-- LinkedIn -->
|
||
<a class="button button-linkedin" href="#"><img class="icon" src="icons/linkedin.svg">LinkedIn</a>
|
||
<br>
|
||
|
||
<!-- YouTube -->
|
||
<a class="button button-youtube" href="#"><img class="icon" src="icons/youtube.svg">YouTube</a>
|
||
<br>
|
||
|
||
<!-- Discord -->
|
||
<a class="button button-discord" href="#"><img class="icon" src="icons/discord.svg">Discord</a>
|
||
<br>
|
||
|
||
<!-- Twitch -->
|
||
<a class="button button-twitch" href="#"><img class="icon" src="icons/twitch.svg">Twitch</a>
|
||
<br>
|
||
|
||
<!-- Snapchat -->
|
||
<a class="button button-snapchat" href="#"><img class="icon" src="icons/snapchat.svg">Snapchat</a>
|
||
<br>
|
||
|
||
<!-- Spotify -->
|
||
<a class="button button-spotify" href="#"><img class="icon" src="icons/spotify.svg">Spotify</a>
|
||
<br>
|
||
|
||
<!-- Reddit -->
|
||
<a class="button button-reddit" href="#"><img class="icon" src="icons/reddit.svg">Reddit</a>
|
||
<br>
|
||
|
||
<!-- Medium -->
|
||
<a class="button button-medium" href="#"><img class="icon" src="icons/medium.svg">Medium</a>
|
||
<br>
|
||
|
||
<!-- Pinterest -->
|
||
<a class="button button-pinterest" href="#"><img class="icon" src="icons/pinterest.svg">Follow on Pinterest</a>
|
||
<br>
|
||
|
||
<!-- SoundCloud -->
|
||
<a class="button button-soundcloud" href="#"><img class="icon" src="icons/soundcloud.svg">SoundCloud</a>
|
||
<br>
|
||
|
||
<!-- Figma -->
|
||
<a class="button button-figma" href="#"><img class="icon" src="icons/figma.svg">Figma</a>
|
||
<br>
|
||
|
||
<!-- Kit -->
|
||
<a class="button button-kit" href="#"><img class="icon" src="icons/kit.svg">Kit</a>
|
||
<br>
|
||
|
||
<!-- Telegram -->
|
||
<a class="button button-telegram" href="#"><img class="icon" src="icons/telegram.svg">Telegram</a>
|
||
<br>
|
||
|
||
<!-- Tumblr -->
|
||
<a class="button button-tumblr" href="#"><img class="icon" src="icons/tumblr.svg">Tumblr</a>
|
||
<br>
|
||
|
||
<!-- Steam -->
|
||
<a class="button button-steam" href="#"><img class="icon" src="icons/steam.svg">Steam</a>
|
||
<br>
|
||
|
||
<!-- Vimeo -->
|
||
<a class="button button-vimeo" href="#"><img class="icon" src="icons/vimeo.svg">Vimeo</a>
|
||
<br>
|
||
|
||
<!-- Wordpress -->
|
||
<a class="button button-wordpress" href="#"><img class="icon" src="icons/wordpress.svg">Wordpress</a>
|
||
|
||
<!-- Goodreads -->
|
||
<a class="button button-goodreads" href="#"><img class="icon" src="icons/goodreads.svg">Goodreads</a>
|
||
<br>
|
||
|
||
<!-- Skoob -->
|
||
<a class="button button-skoob" href="#"><img class="icon" src="icons/skoob.svg">Skoob</a>
|
||
<br>
|
||
|
||
<br>
|
||
<br>
|
||
<p>Build your own by forking <a href="https://littlelink.io">LittleLink</a>.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- End Document
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
</body>
|
||
</html>
|