products.css 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. ul.product-list {
  2. list-style: none;
  3. text-align: center;
  4. min-height: 600px;
  5. }
  6. ul.product-list li {
  7. display: inline-block;
  8. width: 30%;
  9. vertical-align: top;
  10. padding: 10px;
  11. }
  12. li.product-details {
  13. width: 30%;
  14. float: left;
  15. }
  16. a.product-link {
  17. opacity: 0.75;
  18. text-decoration: none;
  19. color: #000;
  20. transition: ease-in 0.2s;
  21. }
  22. a.product-link:hover {
  23. opacity: 1;
  24. }
  25. .product-name {
  26. text-transform: uppercase;
  27. letter-spacing: 1px;
  28. font-size: 12px;
  29. margin-bottom: 5px;
  30. }
  31. .product-container {
  32. width: 80%;
  33. margin: 0 auto;
  34. }
  35. .product-description {
  36. font-size: 12px;
  37. opacity: 0.5
  38. }
  39. @media screen and (max-width: 47.2em) {
  40. li.product-details {
  41. width: 100%;
  42. float: left;
  43. }
  44. }
  45. .category-item a {
  46. margin: 15px 15px;
  47. font-size: 14px;
  48. letter-spacing: 1px;
  49. padding: 0px;
  50. }
  51. .product-short-desc img {
  52. width: 150px;
  53. height: 150px;
  54. display: block;
  55. margin: 0px auto;
  56. background-color: #ccc;
  57. }
  58. .product-short-desc p {
  59. font-size: 13px;
  60. text-align: justify;
  61. margin-bottom: 0px;
  62. color: #4a4a4a;
  63. padding: 0 40px;
  64. }
  65. .product-short-desc a {
  66. text-transform: uppercase;
  67. font-weight: 600;
  68. color: #888;
  69. opacity: 0.8;
  70. transition: ease-in 0.2s;
  71. text-decoration: none;
  72. padding: 0 40px;
  73. }
  74. .product-short-desc a:hover {
  75. opacity: 1;
  76. }