Add trophy case styles

Author: kenanwright1988

profiles/templates/profiles/profile.html

@@ -42,13 +42,14 @@
                 {% endif %}
                 </div>
             </div>
-            <div class="card mt-3 trophy-case">
-                <div class="p-3">
-                    <label class="w-100">Hackathon Badges</label>
+            <div class="card mt-3 trophy-case justify-content-center">
+                <div class="p-0">
+                    <label class="w-100 text-center p-1" style="font-size: larger; font-weight: 800;">Trophy Case</label>
+                    <hr class="m-0 mb-1">
                     {% for team in user.get_participated_teams %}
                         {% if team.hackathon.badge_url %}
-
-                            <img class="card-img-top profile-image" src="{{ team.hackathon.badge_url }}" alt="Hackathon badge" style="height: 70px; width: 70px;" data-toggle="modal" data-target="#badgeModal" data-badge-url="{{ team.hackathon.badge_url }}">
+                            <img class="card-img-top profile-image hack-badge ml-3" src="{{ team.hackathon.badge_url }}" alt="Hackathon badge" style="height: 75px; width: 75px;" data-toggle="modal" data-target="#badgeModal" data-badge-url="{{ team.hackathon.badge_url }}">
+                           
                         {% endif %}
                     {% endfor %}
                 </div>

static/css/profile.css

@@ -73,12 +73,14 @@ html form label,
 
 .trophy-case {
     background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
-    border: 2px solid #d1d1d1;
+    border: 2px solid var(--p-orange);
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     padding: 20px;
     margin-top: 20px;
+    box-shadow: 0 4px 8px darkgray;
     position: relative;
+    overflow: hidden; /* Ensure the shine effect doesn't overflow the card */
 }
 
 .trophy-case::before {
@@ -89,7 +91,7 @@ html form label,
     transform: translateX(-50%);
     width: 60px;
     height: 10px;
-    background: #d1d1d1;
+    background: var(--p-orange);
     border-radius: 5px 5px 0 0;
 }
 
@@ -101,12 +103,47 @@ html form label,
     transform: translateX(-50%);
     width: 60px;
     height: 10px;
-    background: #d1d1d1;
+    background: var(--p-orange);
     border-radius: 0 0 5px 5px;
 }
 
 .trophy-case .card-img-top {
     border: 2px solid #d1d1d1;
     border-radius: 5px;
     margin: 5px;
+}
+
+.trophy-case::before,
+.trophy-case::after {
+    transition: all 0.3s ease;
+}
+
+.trophy-case:hover::before,
+.trophy-case:hover::after {
+    background: #b0e0e6;
+}
+
+.trophy-case::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -75%;
+    width: 50%;
+    height: 100%;
+    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1));
+    transform: skewX(-25deg);
+    transition: all 0.5s ease;
+}
+
+.trophy-case:hover::before {
+    left: 125%;
+    transition: all 0.5s ease;
+}
+
+.hack-badge {
+    cursor: pointer;
+}
+
+.hack-badge:hover {
+    box-shadow: 0px 2px 4px 0px darkgray
 }