styles.css 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. /* Reset CSS */
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. body {
  8. font-family: Georgia, serif;
  9. background-color: #f7f7f7;
  10. }
  11. .container {
  12. max-width: 1200px;
  13. margin: 0 auto;
  14. padding: 20px;
  15. }
  16. header {
  17. background-color: #333;
  18. color: #fff;
  19. padding: 10px 0;
  20. }
  21. nav ul {
  22. list-style-type: none;
  23. text-align: center;
  24. }
  25. nav ul li {
  26. display: inline;
  27. margin-right: 20px;
  28. }
  29. nav ul li a {
  30. color: #fff;
  31. text-decoration: none;
  32. }
  33. section {
  34. padding: 50px 0;
  35. }
  36. h1, h2, h3 {
  37. margin-bottom: 20px;
  38. }
  39. .company-info {
  40. display: flex;
  41. align-items: center;
  42. margin-bottom: 40px;
  43. }
  44. .company-logo {
  45. max-width: 150px;
  46. height: auto;
  47. margin-right: 20px;
  48. }
  49. .company-description {
  50. flex: 1;
  51. }
  52. .product {
  53. margin-bottom: 40px;
  54. border: 1px solid #ccc;
  55. padding: 20px;
  56. display: flex;
  57. align-items: center;
  58. position: relative;
  59. }
  60. .product-image {
  61. max-width: 100px;
  62. height: auto;
  63. margin-right: 20px;
  64. }
  65. .product-info {
  66. flex: 1;
  67. }
  68. .product-header {
  69. display: flex;
  70. justify-content: space-between;
  71. align-items: flex-start;
  72. margin-bottom: 10px;
  73. }
  74. .product-header h3 {
  75. margin: 0;
  76. }
  77. .price {
  78. font-weight: bold;
  79. color: #009688;
  80. margin-bottom: 10px;
  81. }
  82. .description {
  83. margin-bottom: 20px;
  84. }
  85. .buy-button {
  86. background-color: #009688;
  87. color: #fff;
  88. padding: 10px 20px;
  89. text-decoration: none;
  90. position: absolute;
  91. bottom: 10px;
  92. right: 10px;
  93. }
  94. .buy-button:hover {
  95. background-color: #00796b;
  96. }
  97. footer {
  98. background-color: #333;
  99. color: #fff;
  100. padding: 20px 0;
  101. text-align: center;
  102. }