style.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. *, html {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .container {
  6. position: relative;
  7. max-width: 1140px;
  8. margin: 0 auto;
  9. padding: 50px;
  10. }
  11. td {
  12. border-style: ridge;
  13. width: 40px;
  14. height: 40px;
  15. text-align: center;
  16. vertical-align: middle;
  17. }
  18. tr:nth-child(2n + 1) {
  19. background-color: rgb(223, 227, 235);
  20. }
  21. .calc__wrapper {
  22. width: 540px;
  23. height: 350px;
  24. padding: 20px;
  25. margin: 0 auto;
  26. border: 2px solid grey;
  27. background-color: ivory;
  28. box-shadow: 12px 12px 2px 1px rgba(93, 93, 95, 0.2);
  29. border-radius: 25px;
  30. text-align: center;
  31. }
  32. h3 {
  33. margin-bottom: 20px;
  34. }
  35. input {
  36. width: 60px;
  37. margin-left: 10px;
  38. padding: 2px;
  39. }
  40. .calc__item {
  41. display: grid;
  42. grid-template-columns: 1fr 90px 1fr;
  43. align-items: baseline;
  44. padding: 10px;
  45. text-align: left;
  46. }
  47. .price__item{
  48. display: none;
  49. margin-top: 20px;
  50. }
  51. .outer {
  52. margin-top: 20px;
  53. margin-bottom: 10px;
  54. font-size: 24px;
  55. font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  56. color: rgb(19, 16, 207);
  57. }
  58. .btn {
  59. display: none;
  60. margin: 0 auto;
  61. padding: 5px;
  62. border-radius: 10px;
  63. background-color:linen;
  64. color: rgb(92, 44, 44);
  65. box-shadow: 3px 3px 2px 1px rgba(95, 93, 94, 0.2);
  66. align-self: end;
  67. }