8425f9dd55
- Added TikTok - Added generic email icon - Added alternative email icon - Added default button to brands.css for your own branding
172 lines
6.9 KiB
HTML
172 lines
6.9 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,700,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>
|
||
|
||
<!-- ProductHunt -->
|
||
<a class="button button-producthunt" href="#"><img class="icon" src="icons/producthunt.svg">Product Hunt</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>
|
||
|
||
<!-- TikTok -->
|
||
<a class="button button-tiktok" href="#"><img class="icon" src="icons/tiktok.svg">TikTok</a>
|
||
<br>
|
||
|
||
<!-- Email -->
|
||
<a class="button button-default" href="#"><img class="icon" src="icons/email.svg">hello@littlelink.io</a>
|
||
<br>
|
||
|
||
<!-- Email Alternative -->
|
||
<a class="button button-default" href="#"><img class="icon" src="icons/email_alt.svg">hello@littlelink.io</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>
|