drop down buttons added with articles

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;}

index.html

@@ -106,45 +106,63 @@
 
         -->
 
+        <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>
-        <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>
+
+            <!-- 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 -->
+        <div class="dropdown">
-        <a class="button button-linked" href="https://www.linkedin.com/in/brian-andrews-phys/" target="_blank" rel="noopener">
+          <button class="dropbtn-PLT"><img class="icon" src="images/icons/PLT.png">Pro Lacrosse Talk<img class="icon" src="images/downarrow.png"></button>
-            <img class="icon" src="images/icons/linkedin.svg" alt="LinkedIn Logo">LinkedIn</a>
+          <div class="dropdown-content">
-        <br>
+            <!-- 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-spotify" href="https://open.spotify.com/show/7q93fvsj94F2Hrlwp5LaP8?si=68fb445dce4a4517" 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/spotify.svg" alt="Spotify Logo">Bet on Lacrosse Podcast</a>
-            <img class="icon" src="images/icons/ResearchGate.svg.png">Research Gate</a>
-        <br>
 
-        <!-- Orcid -->
+            <a class="button button-PLT" href="https://prolacrossetalk.com/?s=science" 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/PLT.png" alt="">Sports Science Article</a>
-            <img class="icon" src="images/icons/ORCID_iD.svg.png">Orcid Record</a>
-        <br>
 
-        <!-- Pro Lacrosse Talk -->
+            <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">
-        <a class="button button-PLT" href="https://prolacrossetalk.com/" target="_blank" rel="noopener">
+                <img class="icon" src="images/icons/PLT.png" alt="">Latest Lacrosse Article</a>
-            <img class="icon" src="images/icons/PLT.png">Pro Lacrosse Talk</a>
+          </div>
-        <br>
+        </div>
 
+        <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>
-        <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>
-        <br>
+          </div>
+        </div>
 
         <!-- Buy Me a Coffee -->
         <a class="button button-coffee" href="https://account.venmo.com/u/Brian-Andrews-9" target="_blank" rel="noopener">