3a477974b2
Updated .icon padding to make iconography appear centered. Updated container alignment to center to remove outdated attribute. Removed underline from links within buttons.
144 lines
5.8 KiB
HTML
144 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
|
||
<!-- Page Information
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta charset="utf-8">
|
||
<title>LittleLink</title>
|
||
<meta name="description" content="">
|
||
<meta name="author" content="">
|
||
|
||
<!-- 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">Facebook</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>
|
||
|
||
<!-- 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">Pinterest</a>
|
||
<br>
|
||
|
||
<!-- SoundCloud -->
|
||
<a class="button button-soundcloud" href="#"><img class="icon" src="icons/soundcloud.svg">SoundCloud</a>
|
||
<br>
|
||
|
||
<!-- Spectrum -->
|
||
<a class="button button-spectrum" href="#"><img class="icon" src="icons/spectrum.svg">Spectrum</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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- Mixer -->
|
||
<a class="button button-mixer" href="#"><img class="icon" src="icons/mixer.svg">Mixer</a>
|
||
<br>
|
||
<br>
|
||
<p>Build your own by forking <a href="https://littlelink.io">LittleLink</a>.</p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- End Document
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
</body>
|
||
</html>
|