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.

140 lines
2.3 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
  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: 5vh 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: 25vh;
  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. #smaller_text {
  62. font-size: 6vh;
  63. }
  64. #adjust_padding {
  65. padding-top: 4vh;
  66. }
  67. #tiny {
  68. font-size: 4vh;
  69. padding: 1vh 1vw;
  70. text-align: center;
  71. }
  72. #small_centered {
  73. font-size: 6vh;
  74. text-align: center;
  75. }
  76. @media (min-width: 700px) {
  77. .content_container p {
  78. padding-bottom: 6vh;
  79. }
  80. }
  81. @media (min-width: 1000px) {
  82. .container {
  83. padding-top: 10vh;
  84. }
  85. .content_container {
  86. padding: 3vh 4vw 1vh 4vw;
  87. }
  88. .content_container img {
  89. grid-column: 1/3;
  90. grid-row: 1/3;
  91. height: 40vw;
  92. width: 40vw;
  93. align-self: center;
  94. justify-self: flex-start;
  95. }
  96. .content_container h1 {
  97. grid-column:2 ;
  98. grid-row: 1;
  99. align-self: center;
  100. letter-spacing: .3vw;
  101. }
  102. .content_container p {
  103. grid-column:2 ;
  104. grid-row: 2;
  105. margin-top: 0;
  106. width: 50vw;
  107. line-height: 5.25vh;
  108. }
  109. .content_container a {
  110. grid-column: 2;
  111. }
  112. #withbutton {
  113. padding-bottom: 6vh;
  114. }
  115. #adjust_padding {
  116. padding-top: 8vh;
  117. }
  118. }