From 709fef84bca504581e974bafec889fb482f0433b Mon Sep 17 00:00:00 2001
From: brian <b9andrews@gmail.com>
Date: Fri, 21 Oct 2022 15:53:49 -0400
Subject: [PATCH] drop down buttons added with articles

---
 css/dropdown.css     |  18 ++++++++---
 images/downarrow.png | Bin 0 -> 2772 bytes
 index.html           |  74 +++++++++++++++++++++++++++----------------
 3 files changed, 59 insertions(+), 33 deletions(-)
 create mode 100644 images/downarrow.png

diff --git a/css/dropdown.css b/css/dropdown.css
index 75c7020..cfb236f 100644
--- a/css/dropdown.css
+++ b/css/dropdown.css
@@ -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;}
diff --git a/images/downarrow.png b/images/downarrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..3605ac7548ef7bce05f933c45afafedc217aa7c2
GIT binary patch
literal 2772
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
ax&8;R=E@tpe==SG0000<MNUMnLSTZ%u0MMK

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 2dce355..535838d 100644
--- a/index.html
+++ b/index.html
@@ -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">