1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
| * { padding: 0; margin: 0; list-style: none; }
body { box-sizing: border-box; }
#load_products_btn{ width: 120px; height: 80px; color: #ccc; background-color:rgb(8, 81, 81); font-size: 20px; padding: 10px; margin: 20px 30px; }
#load_products_btn:hover ,#products_lists button:hover{ color:rgb(8, 81, 81); background-color:rgb(156, 176, 20); cursor : pointer; }
.msg { position: absolute; top: 20px; width: 200px; height: 30px; display: none; background-color: #EDCAC7; color: #902105; padding: 10px; margin: 20px 0; border-radius: 5px;
}
.msg{ animation: my_message 5s; opacity:0; }
@keyframes my_message{ from { left: 200px; opacity: 100;} to{ left: 300px; opacity: 0;}
}
#load_products_btn:hover ,#products_lists button:hover{ color:rgb(8, 81, 81); background-color:rgb(156, 176, 20); cursor : pointer; }
#products_lists { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; }
#products_lists li { width: 200px; margin: 10px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; background-color: #f9f9f9; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
#products_lists span { text-align: center; color: rgb(100, 100, 100); margin-bottom: 10px; }
#products_lists button { width: 100px; padding: 5px; margin-top: 10px; color:rgb(238, 245, 245); background-color:rgb(69, 69, 68); border-radius: 5px; }
#products_lists img { width: 100px; height: 100px; object-fit: contain; margin-bottom: 10px; }
|