cannabinieri website
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.

172 lines
2.7 KiB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
  1. .container {
  2. height: calc(100% -30vh);
  3. width: 100vw;
  4. font-family: 'Lato', sans-serif;
  5. padding-top: 5vh;
  6. }
  7. img {
  8. border-radius: 50%;
  9. }
  10. .content_container {
  11. display: grid;
  12. justify-items: center;
  13. padding: 0 1vw 2vh 1vw;
  14. }
  15. .content_container img {
  16. grid-row: 2;
  17. grid-column: 1/2;
  18. height: 80vw;
  19. width: 80vw;
  20. }
  21. .content_container h1 {
  22. grid-row: 1;
  23. color: #333;
  24. font-size: 7vh;
  25. text-transform: uppercase;
  26. padding: 1vh 0;
  27. letter-spacing: .15vw;
  28. }
  29. .content_container h1 span {
  30. opacity: 70%;
  31. }
  32. .content_container p {
  33. grid-row: 2/3;
  34. grid-column: 1/2;
  35. text-align: center;
  36. background-color: rgba(255, 255, 255, 0.5);
  37. margin-top: 35vh;
  38. color: #333;
  39. font-size: 2.5vh;
  40. padding: 2vh 2vw 4vh 2vw;
  41. letter-spacing: .1vw;
  42. line-height: 4.25vh;
  43. }
  44. .content_container a {
  45. grid-row: 3;
  46. text-decoration: none;
  47. background-color: rgba(61, 189, 146, 1);
  48. opacity: 80%;
  49. color: #eee;
  50. padding: 2vh 7vw;
  51. text-transform: uppercase;
  52. letter-spacing: .35vw;
  53. transition: all ease .4s;
  54. }
  55. .content_container a:active {
  56. box-shadow: 0px 0px 10px #63caa7;
  57. }
  58. #withbutton {
  59. padding-bottom: 4vh;
  60. }
  61. #withbutton p {
  62. padding-bottom: 10vh;
  63. }
  64. #smaller_text {
  65. font-size: 6vh;
  66. }
  67. #smaller {
  68. font-size: 4.5vh;
  69. }
  70. #mid_padding_bottom {
  71. font-size: 10vw;
  72. text-align: center;
  73. margin-bottom: 2vh;
  74. }
  75. #adjust_padding {
  76. padding-top: 4vh;
  77. }
  78. #tiny {
  79. font-size: 4vh;
  80. padding: 1vh 1vw;
  81. text-align: center;
  82. }
  83. #small_centered {
  84. font-size: 6vh;
  85. text-align: center;
  86. line-height: 8vh;
  87. }
  88. #padding_bottom {
  89. padding-bottom: 4vh;
  90. }
  91. #space_between {
  92. padding-bottom: 8vh;
  93. }
  94. @media (min-width: 700px) {
  95. .content_container p {
  96. padding-bottom: 6vh;
  97. }
  98. .content_container {
  99. display: grid;
  100. justify-items: center;
  101. padding: 1vh 1vw 2vh 1vw;
  102. }
  103. }
  104. @media (min-width: 1000px) {
  105. .container {
  106. padding-top: 10vh;
  107. }
  108. .content_container {
  109. padding: 3vh 4vw 1vh 4vw;
  110. }
  111. .content_container img {
  112. grid-column: 1/3;
  113. grid-row: 1/3;
  114. height: 40vw;
  115. width: 40vw;
  116. align-self: center;
  117. justify-self: flex-start;
  118. }
  119. .content_container h1 {
  120. grid-column:2 ;
  121. grid-row: 1;
  122. align-self: center;
  123. letter-spacing: .3vw;
  124. }
  125. .content_container p {
  126. grid-column:2 ;
  127. grid-row: 2;
  128. margin-top: 0;
  129. width: 50vw;
  130. line-height: 5.25vh;
  131. }
  132. .content_container a {
  133. grid-column: 2;
  134. }
  135. #withbutton {
  136. padding-bottom: 6vh;
  137. }
  138. #adjust_padding {
  139. padding-top: 8vh;
  140. }
  141. }