vylion/littlelink
vylion/littlelink
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

drop down buttons added with articles

Browse source
This commit is contained in:
brian 2022-10-21 15:53:49 -04:00
parent 95ca1f394a
commit 709fef84bc
3 changed files with 59 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
css/dropdown.css
View file

@ -2,9 +2,17 @@
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
background-color: #000000;
color: white;
padding: 16px;
padding: 0px;
font-size: 16px;
border: none;
}
.dropbtn-PLT {
background-color: #000000;
color: #2fc79e;
padding: 0px;
font-size: 16px;
border: none;
}
@ -19,7 +27,7 @@
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
background-color: #121212;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
@ -28,7 +36,7 @@
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
padding: 0px 0px;
text-decoration: none;
display: block;
}
@ -40,4 +48,4 @@
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.dropdown:hover .dropbtn {background-color: #000001;}

BIN
images/downarrow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.7 KiB

74
index.html
View file

@ -106,45 +106,63 @@
-->
<!-- Resume -->
<a class="button button-github" href="images/Andrews_Resume_2022.pdf" target="_blank" rel="noopener">
<img class="icon" src="images/icons/resume.png">Resume</a>
<br>
<div class="dropdown">
<button class="dropbtn">Professional Resources<img class="icon" src="images/downarrow.png"></button>
<div class="dropdown-content">
<!-- Resume -->
<a class="button button-github" href="images/Andrews_Resume_2022.pdf" target="_blank" rel="noopener">
<img class="icon" src="images/icons/resume.png">Resume</a>
<!-- LinkedIn -->
<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>
<!-- ResearchGate -->
<a class="button button-github" href="https://www.researchgate.net/profile/Brian-Andrews-11" target="_blank" rel="noopener">
<img class="icon" src="images/icons/ResearchGate.svg.png">Research Gate</a>
<!-- Orcid -->
<a class="button button-github" href="https://orcid.org/0000-0003-4469-3147" target="_blank" rel="noopener">
<img class="icon" src="images/icons/ORCID_iD.svg.png">Orcid Record</a>
</div>
</div>
<!-- GitHub -->
<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>
<br>
<!-- LinkedIn -->
<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>
<br>
<div class="dropdown">
<button class="dropbtn-PLT"><img class="icon" src="images/icons/PLT.png">Pro Lacrosse Talk<img class="icon" src="images/downarrow.png"></button>
<div class="dropdown-content">
<!-- Put here spotify links and links to an article or two!
Also change the PLT font color in the drop down field -->
<a class="button button-spotify" href="https://open.spotify.com/show/1wvPf4MiVvv6HY7tIGcdYJ?si=c3a123beab884c64" target="_blank" rel="noopener">
<img class="icon" src="images/icons/spotify.svg" alt="Spotify Logo">PLT Podcast</a>
<!-- ResearchGate -->
<a class="button button-linked" href="https://www.researchgate.net/profile/Brian-Andrews-11" target="_blank" rel="noopener">
<img class="icon" src="images/icons/ResearchGate.svg.png">Research Gate</a>
<br>
<a class="button button-spotify" href="https://open.spotify.com/show/7q93fvsj94F2Hrlwp5LaP8?si=68fb445dce4a4517" target="_blank" rel="noopener">
<img class="icon" src="images/icons/spotify.svg" alt="Spotify Logo">Bet on Lacrosse Podcast</a>
<!-- Orcid -->
<a class="button button-linked" href="https://orcid.org/0000-0003-4469-3147" target="_blank" rel="noopener">
<img class="icon" src="images/icons/ORCID_iD.svg.png">Orcid Record</a>
<br>
<a class="button button-PLT" href="https://prolacrossetalk.com/?s=science" target="_blank" rel="noopener">
<img class="icon" src="images/icons/PLT.png" alt="">Sports Science Article</a>
<!-- Pro Lacrosse Talk -->
<a class="button button-PLT" href="https://prolacrossetalk.com/" target="_blank" rel="noopener">
<img class="icon" src="images/icons/PLT.png">Pro Lacrosse Talk</a>
<br>
<a class="button button-PLT" href="https://prolacrossetalk.com/2022-nll-division-finals-preview-who-has-the-betting-edge-in-the-chase-for-the-championship/" target="_blank" rel="noopener">
<img class="icon" src="images/icons/PLT.png" alt="">Latest Lacrosse Article</a>
</div>
</div>
<!-- Email -->
<a class="button button-default" target="_blank" rel="noopener">
<img class="icon" src="images/icons/email.svg" alt="Email Icon">b9andrews@gmail.com</a>
<br>
<div class="dropdown">
<button class="dropbtn">Contact<img class="icon" src="images/downarrow.png"></button>
<div class="dropdown-content">
<!-- Email -->
<a class="button button-default" target="_blank" rel="noopener">
<img class="icon" src="images/icons/email.svg" alt="Email Icon">b9andrews@gmail.com</a>
<!-- Email Alternative -->
<a class="button button-default" target="_blank" rel="noopener">
<img class="icon" src="images/icons/email.svg" alt="Email Icon">ba553@drexel.edu</a>
<br>
<!-- Email Alternative -->
<a class="button button-default" target="_blank" rel="noopener">
<img class="icon" src="images/icons/email.svg" alt="Email Icon">ba553@drexel.edu</a>
</div>
</div>
<!-- Buy Me a Coffee -->
<a class="button button-coffee" href="https://account.venmo.com/u/Brian-Andrews-9" target="_blank" rel="noopener">