237 lines
9.1 KiB
HTML
237 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Page Information
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
<meta charset="utf-8" />
|
||
<title>OSSDEVS</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%">
|
||
<!--
|
||
|
||
## 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.
|
||
|
||
Edit the "Your Image Here" section to add your own personal branding, like a picture of yourself or your brand logo!
|
||
|
||
Edit the "Your Name" 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
|
||
height="100vw"
|
||
src="https://cloud-j0gpa8nno-hack-club-bot.vercel.app/0jodcxosdc.png"
|
||
alt="JODC OSDC Logo"
|
||
/>
|
||
|
||
<!-- Your Name -->
|
||
<h1 class="hero">OSSDEVS</h1>
|
||
|
||
<!-- Short Bio
|
||
<p>
|
||
LittleLink is an open source DIY alternative to services like
|
||
<a href="https://linktr.ee" target="_blank" rel="noopener"
|
||
>Linktree</a
|
||
>
|
||
and
|
||
<a href="https://many.link" target="_blank" rel="noopener"
|
||
>many.link</a
|
||
>. LittleLink was built using
|
||
<a href="http://www.getskeleton.com" target="_blank" rel="noopener"
|
||
>Skeleton</a
|
||
>, a dead simple, responsive boilerplate—we’ve just created some
|
||
branded buttons and stripped out the things you won't need. 😊
|
||
</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
|
||
|
||
## 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="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="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.
|
||
|
||
-->
|
||
<div class="all-link-buttons">
|
||
<!-- Github -->
|
||
<a
|
||
class="button button-github"
|
||
href="https://github.com/JIITODC"
|
||
target="_blank"
|
||
rel="noopener"
|
||
><img
|
||
class="icon"
|
||
src="icons/github.svg"
|
||
alt="GitHub Logo"
|
||
/>GitHub</a
|
||
>
|
||
<br />
|
||
|
||
<!-- Twitter -->
|
||
<a
|
||
class="button button-twitter"
|
||
href="https://twitter.com/JIITODC"
|
||
target="_blank"
|
||
rel="noopener"
|
||
><img
|
||
class="icon"
|
||
src="icons/twitter.svg"
|
||
alt="Twitter Logo"
|
||
/>Twitter</a
|
||
>
|
||
<br />
|
||
|
||
<!-- Discord -->
|
||
<a
|
||
class="button button-discord"
|
||
href="https://discord.gg/TC3DymJ"
|
||
target="_blank"
|
||
rel="noopener"
|
||
><img
|
||
class="icon"
|
||
src="icons/discord.svg"
|
||
alt="Discord Logo"
|
||
/>Discord</a
|
||
>
|
||
<br />
|
||
|
||
<!-- Telegram -->
|
||
<a
|
||
class="button button-telegram"
|
||
href="https://t.me/jiitodc"
|
||
target="_blank"
|
||
rel="noopener"
|
||
><img
|
||
class="icon"
|
||
src="icons/telegram.svg"
|
||
alt="Telegram Logo"
|
||
/>Telegram</a
|
||
>
|
||
<br />
|
||
|
||
<!-- Github -->
|
||
<a
|
||
class="button button-github"
|
||
href="https://github.com/osdc/"
|
||
target="_blank"
|
||
rel="noopener"
|
||
><img
|
||
class="icon"
|
||
src="icons/github.svg"
|
||
alt="GitHub Logo"
|
||
/>GitHub</a
|
||
>
|
||
<br />
|
||
|
||
<!-- Twitter -->
|
||
<a
|
||
class="button button-twitter"
|
||
href="https://twitter.com/osdcjiit"
|
||
target="_blank"
|
||
rel="noopener"
|
||
><img
|
||
class="icon"
|
||
src="icons/twitter.svg"
|
||
alt="Twitter Logo"
|
||
/>Twitter</a
|
||
>
|
||
<br />
|
||
|
||
<!-- Discord -->
|
||
<a
|
||
class="button button-discord"
|
||
href="https://discord.gg/vfhyHW5BkJ"
|
||
target="_blank"
|
||
rel="noopener"
|
||
><img
|
||
class="icon"
|
||
src="icons/discord.svg"
|
||
alt="Discord Logo"
|
||
/>Discord</a
|
||
>
|
||
<br />
|
||
|
||
<!-- Telegram -->
|
||
<a
|
||
class="button button-telegram"
|
||
href="https://t.me/jiitosdc"
|
||
target="_blank"
|
||
rel="noopener"
|
||
><img
|
||
class="icon"
|
||
src="icons/telegram.svg"
|
||
alt="Telegram Logo"
|
||
/>Telegram</a
|
||
>
|
||
<br />
|
||
<br />
|
||
|
||
<br />
|
||
<br />
|
||
<p>
|
||
Built with
|
||
<a href="https://littlelink.io" target="_blank" rel="noopener"
|
||
>LittleLink</a
|
||
>
|
||
❤️.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- End Document
|
||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||
</body>
|
||
</html>
|