news.css 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
  2. body {
  3. margin: 0;
  4. font-family: Montserrat, sans-serif;
  5. }
  6. p {
  7. margin: 0;
  8. }
  9. .aio-news-wrapper {
  10. background-color: #ffd3b6;
  11. width: 100vw;
  12. height: 100vh;
  13. display: flex;
  14. justify-content: center;
  15. gap: 60px;
  16. }
  17. @media only screen and (max-width: 768px) {
  18. .aio-news-wrapper {
  19. flex-direction: column;
  20. }
  21. }
  22. .aio-news-wrapper .news-element {
  23. background-color: #dcedc1;
  24. display: flex;
  25. flex-direction: column;
  26. justify-content: center;
  27. width: 40%;
  28. height: 40%;
  29. align-self: center;
  30. }
  31. @media only screen and (max-width: 1200px) {
  32. .aio-news-wrapper .news-element {
  33. width: 30%;
  34. }
  35. }
  36. @media only screen and (max-width: 768px) {
  37. .aio-news-wrapper .news-element {
  38. width: 80%;
  39. }
  40. }
  41. .aio-news-wrapper .news-element p {
  42. margin-left: 30px;
  43. }
  44. .aio-news-wrapper .news-element p:nth-child(1) {
  45. font-weight: 300;
  46. font-size: 20px;
  47. padding-bottom: 0px;
  48. }
  49. @media only screen and (max-width: 768px) {
  50. .aio-news-wrapper .news-element p:nth-child(1) {
  51. font-size: 30px;
  52. }
  53. }
  54. .aio-news-wrapper .news-element p:nth-child(2) {
  55. font-weight: 500;
  56. font-size: 60px;
  57. line-height: 60px;
  58. padding-bottom: 20px;
  59. }
  60. .aio-news-wrapper .news-element p:nth-child(3) {
  61. font-weight: 400;
  62. font-size: 20px;
  63. padding-bottom: 20px;
  64. width: 80%;
  65. }
  66. .aio-news-wrapper .news-element a {
  67. align-self: flex-end;
  68. margin-right: 30px;
  69. background-color: #ffffff;
  70. color: #ffd3b6;
  71. text-decoration: none;
  72. font-weight: 500;
  73. padding: 8px;
  74. }
  75. .aio-news-wrapper .news-element a:hover {
  76. background-color: #ffd3b6;
  77. color: #ffffff;
  78. }
  79. @media only screen and (max-width: 1200px) {
  80. .aio-news-wrapper .news-element a:hover {
  81. background-color: #ffffff;
  82. color: #ffd3b6;
  83. }
  84. }/*# sourceMappingURL=news.css.map */