logos and no email button links
This commit is contained in:
parent
93941716fc
commit
a2dd3b56ed
6 changed files with 34 additions and 22 deletions
|
@ -638,3 +638,15 @@ button:hover,
|
||||||
.button.button-letterboxd:focus {
|
.button.button-letterboxd:focus {
|
||||||
filter: brightness(90%);
|
filter: brightness(90%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Added by Brian Andrews */
|
||||||
|
|
||||||
|
/* Pro Lacrosse Talk */
|
||||||
|
.button.button-PLT {
|
||||||
|
color: #2fc79e;
|
||||||
|
background-color: #000000;
|
||||||
|
}
|
||||||
|
.button.button-letterboxd:hover,
|
||||||
|
.button.button-letterboxd:focus {
|
||||||
|
filter: brightness(90%);
|
||||||
|
}
|
||||||
|
|
BIN
images/icons/ORCID_iD.svg.png
Normal file
BIN
images/icons/ORCID_iD.svg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 85 KiB |
BIN
images/icons/PLT.png
Executable file
BIN
images/icons/PLT.png
Executable file
Binary file not shown.
After Width: | Height: | Size: 16 KiB |
BIN
images/icons/ResearchGate.svg.png
Normal file
BIN
images/icons/ResearchGate.svg.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 67 KiB |
BIN
images/icons/resume.png
Normal file
BIN
images/icons/resume.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
44
index.html
44
index.html
|
@ -31,7 +31,7 @@
|
||||||
<link rel="stylesheet" href="css/skeleton-dark.css">
|
<link rel="stylesheet" href="css/skeleton-dark.css">
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/brands.css">
|
<link rel="stylesheet" href="css/brands.css">
|
||||||
|
|
||||||
<!-- Drop Down Menus
|
<!-- Drop Down Menus
|
||||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||||
<link rel="stylesheet" href="css/dropdown.css">
|
<link rel="stylesheet" href="css/dropdown.css">
|
||||||
|
@ -51,13 +51,13 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="column" style="margin-top: 10%">
|
<div class="column" style="margin-top: 10%">
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
|
|
||||||
## Getting Started with LittleLink
|
## 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.
|
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 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.
|
You can add custom icons to `images/icons/...`. It is recommended to use a 24x24 .SVG.
|
||||||
|
|
||||||
|
@ -81,7 +81,7 @@
|
||||||
<!--
|
<!--
|
||||||
|
|
||||||
## Breaking down <a> attributes:
|
## 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`.
|
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.
|
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.
|
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.
|
||||||
|
@ -94,63 +94,63 @@
|
||||||
This is especially useful when opening untrusted links. https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/noopener
|
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:
|
## 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`.
|
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.
|
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.
|
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.
|
3.) alt="Example Logo" | This alt attribute helps provides alternate text for an image, this can assist users who use screen readers.
|
||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<!-- Resume -->
|
<!-- Resume -->
|
||||||
<a class="button button-github" href="images/Andrews_Resume_2022.pdf" target="_blank" rel="noopener">
|
<a class="button button-github" href="images/Andrews_Resume_2022.pdf" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/github.svg" alt="GitHub Logo">Resume</a>
|
<img class="icon" src="images/icons/resume.png">Resume</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- GitHub -->
|
<!-- GitHub -->
|
||||||
<a class="button button-github" href="https://github.com/andrewsb8" target="_blank" rel="noopener">
|
<a class="button button-github" href="https://github.com/andrewsb8" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
|
<img class="icon" src="images/icons/github.svg" alt="GitHub Logo">GitHub</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- LinkedIn -->
|
<!-- LinkedIn -->
|
||||||
<a class="button button-linked" href="https://www.linkedin.com/in/brian-andrews-phys/" target="_blank" rel="noopener">
|
<a class="button button-linked" href="https://www.linkedin.com/in/brian-andrews-phys/" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
|
<img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- ResearchGate -->
|
<!-- ResearchGate -->
|
||||||
<a class="button button-linked" href="https://www.researchgate.net/profile/Brian-Andrews-11" target="_blank" rel="noopener">
|
<a class="button button-linked" href="https://www.researchgate.net/profile/Brian-Andrews-11" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">Research Gate</a>
|
<img class="icon" src="images/icons/ResearchGate.svg.png">Research Gate</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Orcid -->
|
<!-- Orcid -->
|
||||||
<a class="button button-linked" href="https://orcid.org/0000-0003-4469-3147" target="_blank" rel="noopener">
|
<a class="button button-linked" href="https://orcid.org/0000-0003-4469-3147" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">Orcid Record</a>
|
<img class="icon" src="images/icons/ORCID_iD.svg.png">Orcid Record</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Pro Lacrosse Talk -->
|
<!-- Pro Lacrosse Talk -->
|
||||||
<a class="button button-linked" href="https://prolacrossetalk.com/" target="_blank" rel="noopener">
|
<a class="button button-PLT" href="https://prolacrossetalk.com/" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">Pro Lacrosse Talk</a>
|
<img class="icon" src="images/icons/PLT.png">Pro Lacrosse Talk</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Email -->
|
<!-- Email -->
|
||||||
<a class="button button-default" href="#" target="_blank" rel="noopener">
|
<a class="button button-default" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/email.svg" alt="Email Icon">b9andrews@gmail.com</a>
|
<img class="icon" src="images/icons/email.svg" alt="Email Icon">b9andrews@gmail.com</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Email Alternative -->
|
<!-- Email Alternative -->
|
||||||
<a class="button button-default" href="#" target="_blank" rel="noopener">
|
<a class="button button-default" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/email.svg" alt="Email Icon">ba553@drexel.edu</a>
|
<img class="icon" src="images/icons/email.svg" alt="Email Icon">ba553@drexel.edu</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<!-- Buy Me a Coffee -->
|
<!-- Buy Me a Coffee -->
|
||||||
<a class="button button-coffee" href="https://account.venmo.com/u/Brian-Andrews-9" target="_blank" rel="noopener">
|
<a class="button button-coffee" href="https://account.venmo.com/u/Brian-Andrews-9" target="_blank" rel="noopener">
|
||||||
<img class="icon" src="images/icons/coffee.svg" alt="Buy Me a Coffee">Buy Me a Coffee</a>
|
<img class="icon" src="images/icons/coffee.svg" alt="Buy Me a Coffee">Buy Me a Coffee</a>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<!--
|
<!--
|
||||||
Footer:
|
Footer:
|
||||||
This includes a link to privacy.html page which can be setup for your Privacy Policy.
|
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.
|
This also includes a link to the LittleLink repository to make forking LittleLink easier.
|
||||||
|
|
Loading…
Reference in a new issue