style.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. scroll-behavior: smooth;
  5. }
  6. .container {
  7. width: 1440px;
  8. margin: 0 auto;
  9. }
  10. ul {
  11. display: flex;
  12. justify-content: space-between;
  13. }
  14. .header_flex {
  15. display: flex;
  16. justify-content: space-around;
  17. align-items: center;
  18. }
  19. li {
  20. text-decoration: none;
  21. list-style-type: none;
  22. color:black;
  23. padding: 26px;
  24. }
  25. a {
  26. text-decoration: none;
  27. background-image: linear-gradient(currentColor, currentColor);
  28. background-position: 0% 100%;
  29. background-repeat: no-repeat;
  30. background-size: 0% 2px;
  31. color:black;
  32. transition: background-size .3s;
  33. }
  34. a:hover {
  35. background-size: 100% 1px;
  36. }
  37. .background {
  38. background-image: url(img/barmen.jpg);
  39. background:no-repeat;
  40. }
  41. .first-block_content {
  42. padding-top: 300px;
  43. text-align: start;
  44. }
  45. .block-for-us {
  46. display: flex;
  47. justify-content: space-evenly;
  48. align-items: center
  49. }
  50. .block-for-us_padding {
  51. padding-left: 25px;
  52. }
  53. .m-top {
  54. margin-top: 100px;
  55. }
  56. .m-bottom {
  57. margin-bottom: 100px;
  58. }
  59. .block-card {
  60. width: 365px;
  61. }
  62. .block-card_text {
  63. display: flex;
  64. justify-content: space-between;
  65. }
  66. .block-card_flex {
  67. display: flex;
  68. justify-content: space-between;
  69. }
  70. .background-guide {
  71. background-image: url(img/volga.jpg);
  72. width: 1900px;
  73. background:no-repeat;
  74. height: 629px;
  75. }
  76. .block-guide {
  77. padding-top: 150px;
  78. }
  79. .block-form_text {
  80. margin-top: 50px;
  81. }
  82. form {
  83. display: flex;
  84. }
  85. input {
  86. width: 309px;
  87. height: 56px;
  88. }
  89. ::placeholder {
  90. font-size: 24px;
  91. padding-left: 12px;
  92. }
  93. .blog {
  94. display: flex;
  95. justify-content: space-between;
  96. }
  97. .connection_position {
  98. display: flex;
  99. align-items: center;
  100. flex-direction: column
  101. }
  102. .connection_text {
  103. margin-top: 125px;
  104. margin-left: 500px;
  105. }
  106. .background-connection {
  107. background-image: url(img/Connection.png);
  108. width: 1900px;
  109. background: no-repeat;;
  110. height: 629px;
  111. }
  112. .footer_position {
  113. display: flex;
  114. text-align: center;
  115. align-items: center;
  116. flex-direction: column;
  117. }
  118. .animate-charcter
  119. {
  120. text-transform: uppercase;
  121. background-image: linear-gradient(
  122. -100deg,
  123. #000000 50%,
  124. #153d32 80%,
  125. #398d72 100%
  126. );
  127. background-size: auto auto;
  128. background-size: 200% auto;
  129. -webkit-background-clip: text;
  130. -webkit-text-fill-color: transparent;
  131. animation: textclip 2s linear infinite;
  132. display: inline-block;
  133. font-family: 'Playfair Display', serif;
  134. font-size: 48px;
  135. }
  136. @keyframes textclip {
  137. to {
  138. background-position: 200% center;
  139. }
  140. }
  141. .scale {
  142. display: inline-block; /* Строчно-блочный элемент */
  143. overflow: hidden; /* Скрываем всё за контуром */
  144. }
  145. .scale img {
  146. transition: 0.5s; /* Время эффекта */
  147. display: block; /* Убираем небольшой отступ снизу */
  148. }
  149. .scale img:hover {
  150. transform: scale(1.1); /* Увеличиваем масштаб */
  151. }