Sort out the links more properly
Also fix telegram link Signed-off-by: baalajimaestro <me@baalajimaestro.me>
This commit is contained in:
parent
fb0200da88
commit
cbf4e624fd
GPG key ID:
F93C394FE9BBAFD5
1 changed files with 35 additions and 79 deletions
114
index.html
114
index.html
|
|
@ -62,92 +62,26 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="column" style="margin-top: 10%">
|
<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/avatar.webp" alt="LittleLink Logo" width="125" height="125" style="border-radius: 50%;">
|
<img src="images/avatar.webp" alt="LittleLink Logo" width="125" height="125" style="border-radius: 50%;">
|
||||||
|
|
||||||
<!-- Your Name -->
|
<!-- Your Name -->
|
||||||
<h1>baalajimaestro</h1>
|
<h1>baalajimaestro</h1>
|
||||||
|
|
||||||
<!-- Short Bio -->
|
<!-- Short Bio -->
|
||||||
<p>If you are here, you probably met me/viewed my profile from one of the list below</p>
|
<br>
|
||||||
|
<h3>Contact me with IM</h3>
|
||||||
<!--
|
<br>
|
||||||
|
<p>If you are trying to contact me with IM, please ensure your message conveys your information concisely and readably, rather than sending a dumb hi/hello and expecting me to respond on it.</p>
|
||||||
## Breaking down <a> attributes:
|
<br>
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
## 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 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="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.
|
|
||||||
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- Github -->
|
|
||||||
<a class="button button-github" href="https://github.com/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Gitlab -->
|
|
||||||
<a class="button button-gitlab" href="https://gitlab.com/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/gitlab.svg" alt="GitLab Logo">GitLab</a>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- SourceHut -->
|
|
||||||
<a class="button button-steam" href="https://git.sr.ht/~baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/sourcehut.svg" alt="Sourcehut Logo">Sourcehut</a>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Gitlab -->
|
|
||||||
<a class="button button-gitlab" href="https://git.baalajimaestro.me/explore" target="_blank" rel="noopener"><img class="icon" src="images/icons/gitlab.svg" alt="GitLab Logo">Selfhosted GitLab</a>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Files -->
|
|
||||||
<a class="button button-pinterest" href="https://mirrors.baalajimaestro.me" target="_blank" rel="noopener"><img class="icon" src="images/icons/folder.svg" alt="Folder Logo">Files</a>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Telegram -->
|
<!-- Telegram -->
|
||||||
<a class="button button-telegram" href="https://t.me/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram</a>
|
<a class="button button-telegram" href="tg://user?id=518221376" target="_blank" rel="noopener"><img class="icon" src="images/icons/telegram.svg" alt="Telegram Logo">Telegram</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Discord -->
|
<!-- Discord -->
|
||||||
<a class="button button-discord" href="https://discord.com/users/404797553272684555" target="_blank" rel="noopener"><img class="icon" src="images/icons/discord.svg" alt="Discord Logo">Discord</a>
|
<a class="button button-discord" href="https://discord.com/users/404797553272684555" target="_blank" rel="noopener"><img class="icon" src="images/icons/discord.svg" alt="Discord Logo">Discord</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Instagram -->
|
|
||||||
<a class="button button-instagram" href="https://instagram.com/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/instagram.svg" alt="Instagram Logo">Instagram</a>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<!-- Reddit -->
|
<!-- Reddit -->
|
||||||
<a class="button button-reddit" href="https://reddit.com/user/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/reddit.svg" alt="Reddit Logo">Reddit</a>
|
<a class="button button-reddit" href="https://reddit.com/user/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/reddit.svg" alt="Reddit Logo">Reddit</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
@ -164,18 +98,40 @@
|
||||||
<a class="button button-default" href="mailto:me@baalajimaestro.me" target="_blank" rel="noopener"><img class="icon" src="images/icons/email.svg" alt="Email Icon">me@baalajimaestro.me</a>
|
<a class="button button-default" href="mailto:me@baalajimaestro.me" target="_blank" rel="noopener"><img class="icon" src="images/icons/email.svg" alt="Email Icon">me@baalajimaestro.me</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
|
<!-- Instagram -->
|
||||||
|
<a class="button button-instagram" href="https://instagram.com/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/instagram.svg" alt="Instagram Logo">Instagram</a>
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
<h3>Other Online Presence</h3>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- Github -->
|
||||||
|
<a class="button button-github" href="https://github.com/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- Gitlab -->
|
||||||
|
<a class="button button-gitlab" href="https://gitlab.com/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/gitlab.svg" alt="GitLab Logo">GitLab</a>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- SourceHut -->
|
||||||
|
<a class="button button-steam" href="https://git.sr.ht/~baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/sourcehut.svg" alt="Sourcehut Logo">Sourcehut</a>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- Gitlab -->
|
||||||
|
<a class="button button-gitlab" href="https://git.baalajimaestro.me/explore" target="_blank" rel="noopener"><img class="icon" src="images/icons/gitlab.svg" alt="GitLab Logo">Selfhosted GitLab</a>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<!-- Files -->
|
||||||
|
<a class="button button-pinterest" href="https://mirrors.baalajimaestro.me" target="_blank" rel="noopener"><img class="icon" src="images/icons/folder.svg" alt="Folder Logo">Files</a>
|
||||||
|
<br>
|
||||||
|
|
||||||
<!-- PayPal-->
|
<!-- PayPal-->
|
||||||
<a class="button button-paypal" href="https://paypal.me/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/paypal.svg" alt="PayPal Logo">Donate on PayPal</a>
|
<a class="button button-paypal" href="https://paypal.me/baalajimaestro" target="_blank" rel="noopener"><img class="icon" src="images/icons/paypal.svg" alt="PayPal Logo">Donate on PayPal</a>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<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><a href="privacy.html">Privacy Policy</a> | Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>
|
<p><a href="privacy.html">Privacy Policy</a> | Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>.</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue