mirror of
https://github.com/Dannecron/littlelink.git
synced 2025-12-25 16:12:34 +03:00
212 lines
8.3 KiB
HTML
212 lines
8.3 KiB
HTML
<!--
|
||
|
||
Version 2.5.0
|
||
|
||
This is to help you track what version of LittleLink you forked.
|
||
|
||
-->
|
||
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
|
||
<!-- Page Information
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta charset="utf-8">
|
||
<title>Dannecron LittleLink</title>
|
||
<meta name="description" content="https://littlelink.io">
|
||
<meta name="author" content="Seth Cottle">
|
||
|
||
<!-- Mobile Specific Metas
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
|
||
<!-- CSS
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="stylesheet" href="css/normalize.css">
|
||
|
||
<!-- Themes:
|
||
Auto: css/skeleton-auto.css
|
||
Light: css/skeleton-light.css
|
||
Dark: css/skeleton-dark.css
|
||
-->
|
||
<link rel="stylesheet" href="css/skeleton-auto.css">
|
||
|
||
<!-- Brand Styles -->
|
||
<link rel="stylesheet" href="css/brands.css">
|
||
<link rel="stylesheet" href="css/brands-extended.css">
|
||
|
||
|
||
<!-- Favicon
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<link rel="icon" type="image/png" href="images/littlelink.png">
|
||
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- Primary Page Layout
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="column" style="margin-top: 10%">
|
||
|
||
<!--
|
||
|
||
## Getting Started with LittleLink
|
||
|
||
This page has been built with every pre-designed button available in LittleLink by default. You can rearrange and delete as needed.
|
||
|
||
You can add your own brand or others brands you may need in the `css/brands.css` file.
|
||
|
||
You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG.
|
||
|
||
Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo!
|
||
|
||
Edit the "Title" section to change the page heading. You can use something like your name, your social handle, or your brand name.
|
||
|
||
Edit the "Short Bio" section tell users about yourself or your brand.
|
||
|
||
-->
|
||
|
||
<!-- Your Image Here -->
|
||
<img src="images/yui.png" class="avatar" alt="">
|
||
|
||
<!-- Title -->
|
||
<h1 role="heading">Denis Savosin</h1>
|
||
|
||
<!-- Short Bio -->
|
||
<p>Vary lazy backend developer</p>
|
||
|
||
<!--
|
||
|
||
## Breaking down <a> attributes:
|
||
|
||
1.) class="button button-default" | The first "button" here is telling this <a> tag that it should make this element a button and applies the default styling in `css/brands.css`.
|
||
The second portion, button-default, is declaring the specific brand style you would like to apply. Here we're applying the "default" style and color.
|
||
If you want to make this button to use the brand colors for Discord, just change "button-default" to "button-discord". Brands are found in `css/brands.css`. You can always edit & add your own there.
|
||
|
||
2.) Replace the # in href="#" with the desired target URL for the button.
|
||
|
||
3.) target="_blank" | This attribute opens links in a new tab. Remove this attribute to prevent links from opening in a new tab.
|
||
|
||
4.) rel="noopener" | This attribute instructs the browser to navigate to the target resource without granting the new browsing context access to the document that opened it.
|
||
This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
|
||
|
||
5.) role="button" | The button role identifies an element as a button to assistive technology such as screen readers.
|
||
|
||
## Breaking down the <img> attributes:
|
||
|
||
1.) class="icon" | This class is telling the <img> tag that it should use the styling for icons found in `css/brands.css`.
|
||
|
||
2.) src="images/icons/[icon-name].svg" | This defines the icon you would like to display from the 'images/icons/' folder. For example, you can change this to src="images/icons/discord.svg" to use the Discord icon.
|
||
Add your own 24x24 icons to the "icons" folder to reference them. We recommend providing a SVG.
|
||
|
||
3.) alt="" | Since the text at the end of the snippet, "..>[Button Text]</a><br>", explains what the button is, we use "alt=""" to nullify the icon annoucement from the accessibility tree.
|
||
This can improve the experience for assistive technology users by hiding what is essentially duplicated
|
||
|
||
-->
|
||
|
||
<!-- Generic Blog -->
|
||
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button">
|
||
<img class="icon" src="images/icons/generic-blog.svg" alt="">
|
||
Read my blog
|
||
</a>
|
||
<br>
|
||
|
||
<!-- MyAnimeList -->
|
||
<a class="button button-myanimelist" href="#" target="_blank" rel="noopener">
|
||
<img class="icon" src="images/icons-extended/myanimelist.svg" alt="MyAnimeList Logo">
|
||
MyAnimeList
|
||
</a>
|
||
<br>
|
||
|
||
<!-- Steam -->
|
||
<a class="button button-steam" href="#" target="_blank" rel="noopener" role="button">
|
||
<img class="icon" src="images/icons/steam.svg" alt="">
|
||
Steam
|
||
</a>
|
||
<br>
|
||
|
||
<!-- GitHub -->
|
||
<a class="button button-github" href="#" target="_blank" rel="noopener" role="button">
|
||
<img class="icon" src="images/icons/github.svg" alt="">
|
||
GitHub
|
||
</a>
|
||
<br>
|
||
|
||
<!-- Last.fm -->
|
||
<a class="button button-last-fm" href="#" target="_blank" rel="noopener" role="button">
|
||
<img class="icon" src="images/icons/last-fm.svg" alt="">
|
||
Last.fm
|
||
</a>
|
||
<br>
|
||
|
||
<!-- Spotify -->
|
||
<a class="button button-spotify" href="#" target="_blank" rel="noopener" role="button">
|
||
<img class="icon" src="images/icons/spotify.svg" alt="">
|
||
Spotify
|
||
</a>
|
||
<br>
|
||
|
||
<!-- LiveLib -->
|
||
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button">
|
||
<img class="icon" src="images/icons-extended/livelib.svg" alt="">
|
||
LiveLib
|
||
</a>
|
||
<br>
|
||
|
||
<!-- LiveLib -->
|
||
<a class="button button-default" href="#" target="_blank" rel="noopener" role="button">
|
||
<img class="icon" src="images/icons-extended/playstation.svg" alt="">
|
||
PlayStation Network
|
||
</a>
|
||
<br>
|
||
|
||
<!-- Instagram -->
|
||
<a class="button button-instagram" href="#" target="_blank" rel="noopener" role="button">
|
||
<img class="icon" src="images/icons/instagram.svg" alt="">
|
||
Instagram
|
||
</a>
|
||
<br>
|
||
|
||
<!-- X -->
|
||
<a class="button button-x" href="#" target="_blank" rel="noopener" role="button">
|
||
<img class="icon" src="images/icons/x.svg" alt="">
|
||
Follow on X
|
||
</a>
|
||
<br>
|
||
|
||
<!-- LinkedIn -->
|
||
<a class="button button-linked" href="#" target="_blank" rel="noopener" role="button">
|
||
<img class="icon" src="images/icons/linkedin.svg" alt="">
|
||
LinkedIn
|
||
</a>
|
||
<br>
|
||
|
||
<br>
|
||
<!--
|
||
Footer:
|
||
This includes a link to privacy.html page which can be setup for your Privacy Policy.
|
||
This also includes a link to the LittleLink repository to make forking LittleLink easier.
|
||
You can edit or remove anything here to make your own footer.
|
||
-->
|
||
<p style="font-size: 10px; color: rgba(42, 42, 42, 0.76);">
|
||
Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener" role="button">LittleLink</a>.
|
||
Some icons by <a href="https://icons8.com" target="_blank" rel="noopener" role="button">icons8.com</a>.
|
||
</p>
|
||
|
||
<p></p>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- End Document
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
</body>
|
||
|
||
</html>
|