added product & shop

res/css/style.css

@@ -12,6 +12,9 @@
   background-color: #d86f23 !important;
   border-color: #ba5c19 !important;
 }
+.table-success {
+  background-color: #d86f23 !important;
+}
 
 /* Navbar */
 #top_nav_bar { min-height: 40px;}
@@ -86,4 +89,95 @@
 
 .registerform .form-control:read-only {
   background-color: #f07f7f;
+}
+
+
+/* shop page */
+.shoppingpage {
+  background: #eee;
+}
+.card{
+  border:1px solid #eee;
+  cursor: pointer;
+}
+.weight{
+  margin-top: -65px; 
+  transition: all 0.5s;  
+}
+.weight small{
+  color: #e2dede;
+}
+.id small{
+  color: white;
+}
+.shopbutton {
+  padding: 10px;
+  background-color: #d6d4d44f;
+  border-radius: 4px;
+  position: relative;
+  margin-top: 7px;
+  opacity: 0;
+  transition: all 0.8s;
+}
+.cart-button {
+  height: 48px
+}
+.cart-button:focus {
+  box-shadow: none
+}
+.cart {
+  position: relative;
+  height: 48px !important;
+  width: 50px;
+  margin-right: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  padding: 11px;
+  border-radius: 5px;
+  font-size: 14px;
+  transition: 1s ease-in-out;
+  overflow: hidden;
+}
+.cart-button.clicked span.dot {
+  animation: item 0.3s ease-in forwards
+}
+@keyframes item {
+  0% {
+      opacity: 1;
+      top: 30%;
+      left: 30%
+  }
+  25% {
+      opacity: 1;
+      left: 26%;
+      top: 0%
+  }
+  50% {
+      opacity: 1;
+      left: 23%;
+      top: -22%
+  }
+  75% {
+      opacity: 1;
+      left: 19%;
+      top: -18%
+  }
+  100% {
+      opacity: 1;
+      left: 14%;
+      top: 28%
+  }
+}
+.card:hover .buttons{
+  opacity: 1;
+}
+.card:hover .weight{
+   margin-top: 10px;
+}
+.card:hover{
+  transform: scale(1.04);
+  z-index: 2;
+  overflow: hidden;
 }