Sin descripción
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

main.css 1.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /*
  2. 0 - 600px: Phone
  3. 600 - 900px: Tablet portrait
  4. 900 - 1200px: Tablet landscape
  5. [1200 - 1800] is where our normal styles apply
  6. 1800px + : Big desktop
  7. $breakpoint arguement choices:
  8. - phone
  9. - tab-port
  10. - tab-land
  11. - big-desktop
  12. ORDER: Base + typography > general layout + grid > page layout > components
  13. 1em = 16px
  14. */
  15. *,
  16. *::after,
  17. *::before {
  18. margin: 0;
  19. padding: 0;
  20. box-sizing: inherit; }
  21. html {
  22. font-size: 100%; }
  23. body {
  24. box-sizing: border-box; }
  25. @media only screen and (max-width: 56.25em) {
  26. body {
  27. padding: 0; } }
  28. .bg-green {
  29. background-color: #3bb78f;
  30. background: linear-gradient(90deg, #3bb78f 0%, #0bab64 35%, #3bb78f 100%); }
  31. .font-3 {
  32. font-size: 3rem; }
  33. .font-1_5 {
  34. font-size: 2rem; }
  35. .font-1_7 {
  36. font-size: 1.7rem; }
  37. .font-2 {
  38. font-size: 2.2rem; }
  39. .font-2_2 {
  40. font-size: 2.2rem; }
  41. .subtitle_1 {
  42. font-size: 1.5rem; }
  43. .gap-1 {
  44. gap: 0.7rem; }
  45. .banner_heading_4 {
  46. font-size: 3rem; }
  47. .padding_top_14 {
  48. padding-top: 14rem; }
  49. .p-6 {
  50. padding: 5rem; }
  51. .vh_60 {
  52. height: 60vh; }
  53. .vh-77 {
  54. height: 77vh; }
  55. .vh-85 {
  56. height: 85vh; }
  57. .vh-15 {
  58. height: 15vh; }
  59. .fw-600 {
  60. font-weight: 600; }
  61. .button_dark {
  62. clip-path: polygon(75% 0, 86% 30%, 99% 66%, 100% 100%, 0 100%, 0 61%, 0 0);
  63. padding-right: 1.7rem;
  64. padding-bottom: 0.6rem;
  65. padding-top: 0.6rem;
  66. border-radius: 10px; }
  67. .photo_dual {
  68. width: 40rem; }
  69. .price_footer {
  70. background-color: #52cba5; }
  71. .boxImgContainer {
  72. width: 4rem; }
  73. .priceCut_multi {
  74. font-size: .7rem; }
  75. .productOverview .overviewProductHeading {
  76. font-size: 2.1rem; }
  77. .productOverview .overviewProductFullTitle {
  78. padding: 2rem 13rem;
  79. font-size: 3rem; }
  80. .productOverview .overviewProductDes {
  81. padding: 0 2rem;
  82. font-size: 1.5rem; }
  83. .PO_galleryContainer .PO_gallery_display {
  84. min-height: 500px;
  85. width: 100%;
  86. background: white;
  87. background: linear-gradient(180deg, white 7%, #ff8e9e4d 52%, #eb869478 100%); }