init

css/index/products.css

@@ -0,0 +1,67 @@
+.products{
+
+    display: none !important;
+
+    position: relative;
+    z-index: 2;
+
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+
+    color: white;
+}
+.products-container{
+    display: grid;
+    grid-gap: 1em;
+    grid-template-columns: repeat(2, 1fr);
+
+    padding: 3em;
+}
+.products-item{
+    flex: 0 0 45%;
+
+    margin-top: 2em;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    background-color: #212121;
+
+    border-radius: 2em;
+
+    transition: transform 0.3s ease; /* Smooth transition on transform */
+    box-shadow: 0 0.5em 0.5em 0 rgba(0,0,0,0.2), 0 0.25em 0.25em 0 rgba(0,0,0,0.19) !important;
+}
+.products-item:hover{
+    transform: scale(1.2);
+}
+.products-item:active{
+    transform: scale(1.2);
+}
+
+.products-img{
+    padding-top: 2em;
+}
+.products-item a{
+    padding: 1em;
+    font-size: 1.5em;
+    color: white;
+
+    text-decoration: none;
+}
+
+@media screen and (min-width: 900px){
+    .products-container{
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 2em;
+    }
+    .products{
+        margin: auto;
+        width: 70%;
+    }
+}