Made each product a link to its own product page

static/css/products.css

@@ -1,5 +1,28 @@
 /* Product Information*/
 
+.product-link:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 15%;
+    width: 0%;
+    border-bottom: 2px solid var(--fg);
+    transition: 0.4s;
+}
+
+.product-link:hover:after {
+    width: 70%;
+    color: var(--hover);
+}
+
+.product-link:hover {
+    color: var(--hover);
+}
+
+.product-link:active {
+    color: var(--header);
+}
+
 .product-container {
     width: 95%;
     background-color: var(--bg-grad-3);

templates/content.html

@@ -3,7 +3,7 @@
 <div class="product-container">
     {% if products != None %}
         {% for product in products %}
-            <div class="product">
+            <a href="/products/{{product.id}}" class="product product-link">
                 <div class="product-title">{{product.name}}</div>
                     <div class="product-information">
                         <div class="product-image">
@@ -15,7 +15,7 @@
                         </div>
                     </div>
                 <div class="product-add-to-cart"></div>
-            </div>
+            </a>
         {% endfor %}    
     {% endif %}
 </div>