main.css 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. main, html {
  2. background-color: #dcb495;
  3. }
  4. #header_block {
  5. position: absolute;
  6. margin-bottom: 60%;
  7. }
  8. .header_block {
  9. width: 100%;
  10. height: 75vw;
  11. background-position: center;
  12. display: flex;
  13. justify-content: center;
  14. flex-direction: column;
  15. background: linear-gradient( rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85) ), url(../images/back_main_one.jpg);background-repeat: repeat; background-position: center;
  16. }
  17. .header_title {
  18. margin-left: 10%;
  19. color: #ffffff;
  20. font: bold;
  21. font-size: 4vw;
  22. transition: font-size 0.5s ease-in, text-shadow 1s ease-in;
  23. }
  24. .header_title:hover {
  25. font-size: 4.05vw;
  26. text-shadow: 0px 0px 20px #ffffff;
  27. }
  28. .header_title_2 {
  29. margin-left: 10%;
  30. color: #afafaf;
  31. font: bold;
  32. font-size: 2vw;
  33. transition: font-size 0.5s ease-in, text-shadow 1s ease-in;
  34. }
  35. .header_title_2:hover {
  36. font-size: 2.05vw;
  37. text-shadow: 0px 0px 20px #ffffff;
  38. }
  39. .header_buttons {
  40. margin-top: 5%;
  41. margin-left: 10%;
  42. width: 90%;
  43. display: flex;
  44. justify-content: flex-start;
  45. align-items: center;
  46. }
  47. .header_button {
  48. background-color: #f5c99f;
  49. width: 20vw;
  50. height: 5vw;
  51. color: #000000;
  52. border-radius: 30px;
  53. vertical-align: middle;
  54. }
  55. .header_button:hover {
  56. text-decoration: none;
  57. color: #000000;
  58. }
  59. #link_to_about {
  60. margin-left: 40px;
  61. background-color: #000000;
  62. color: #ffffff;
  63. border: 2px solid #ffffff;
  64. }
  65. .header_button_text {
  66. width: 100%;
  67. height: 100%;
  68. text-align: center;
  69. font-size: 1.5vw;
  70. margin-top: 5%;
  71. }
  72. .body_block {
  73. background-color: #dcb495;
  74. }
  75. .about_block {
  76. margin-top: 10%;
  77. margin-left: 5%;
  78. width: 90%;
  79. }
  80. .about_title {
  81. color: #000000;
  82. font-size: 4vw;
  83. }
  84. .about_info_block {
  85. margin-top: 50px;
  86. width: 100%;
  87. display: inline-flex;
  88. justify-content: space-between;
  89. }
  90. .about_article_block {
  91. display: flex;
  92. flex-direction: column;
  93. align-content: space-around;
  94. }
  95. .about_article {
  96. display: inline-flex;
  97. justify-content: flex-start;
  98. align-items: center;
  99. }
  100. .article_image {
  101. width: 10vw;
  102. height: 10vw;
  103. }
  104. .main_image {
  105. width: 40vw;
  106. height: 26vw;
  107. }
  108. .article_text {
  109. max-width: 70%;
  110. margin-left: 10px;
  111. font-size: 1.3vw;
  112. }
  113. .how_work_block {
  114. margin-top: 20%;
  115. margin-left: 5%;
  116. width: 90%;
  117. }
  118. .how_work_title {
  119. text-align: center;
  120. color: #000000;
  121. font-size: 4vw;
  122. }
  123. .how_work_info_block {
  124. display: inline-flex;
  125. justify-content: space-evenly;
  126. margin-top: 100px;
  127. }
  128. .how_work_image {
  129. width: 10vw;
  130. height: 10vw;
  131. }
  132. .how_work_info, .how_work_article {
  133. display: flex;
  134. flex-direction: column;
  135. align-items: center;
  136. justify-content: center;
  137. }
  138. .how_work_article_title {
  139. text-align: center;
  140. font-size: 1.5vw;
  141. }
  142. .how_work_article_text {
  143. text-align: center;
  144. margin-top: 1vw;
  145. font-size: 1.1vw;
  146. }
  147. .reg_block {
  148. margin-top: 20%;
  149. width: 100%;
  150. height: 50vw;
  151. }
  152. .reg_content_block {
  153. margin-top: 100px;
  154. width: 90%;
  155. margin-left: 5%;
  156. display: inline-flex;
  157. justify-content: space-between;
  158. flex-wrap: nowrap;
  159. align-content: center;
  160. }
  161. .reg_title {
  162. text-align: center;
  163. color: #000000;
  164. font-size: 4vw;
  165. }
  166. .reg_content {
  167. display: flex;
  168. flex-direction: column;
  169. align-self: center;
  170. align-content: space-evenly;
  171. }
  172. .reg_button_group {
  173. display: flex;
  174. justify-content: flex-start;
  175. align-items: center;
  176. }
  177. .reg_button_title {
  178. margin-bottom: 10%;
  179. color: #000000;
  180. font-size: 2.5vw;
  181. text-align: left;
  182. }
  183. .reg_button_info {
  184. margin-top: 8%;
  185. }
  186. .reg_button_group {
  187. width: 100%;
  188. display: flex;
  189. justify-content: space-between;
  190. align-items: center;
  191. }
  192. .reg_button {
  193. background-color: #a8886f;
  194. width: 20vw;
  195. height: 5vw;
  196. color: #ffffff;
  197. border-radius: 30px;
  198. vertical-align: middle;
  199. }
  200. .reg_button:hover {
  201. text-decoration: none;
  202. color: #ffffff;
  203. }
  204. .reg_button_text {
  205. width: 100%;
  206. height: 100%;
  207. text-align: center;
  208. font-size: 1.5vw;
  209. margin-top: 6%;
  210. }
  211. #link_to_start{
  212. width: 18vw;
  213. background-color:#f5d3b8;
  214. }
  215. #link_to_start_text {
  216. color: #000000;
  217. }
  218. .feedback_block {
  219. display: flex;
  220. justify-content: center;
  221. align-items: center;
  222. height: 75vw;
  223. background: linear-gradient( rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85) ), url(../images/back_main_two.jpg);background-repeat: repeat; background-position: center;
  224. }
  225. .feedback {
  226. width: 50%;
  227. height: 80%;
  228. margin-left: 25%;
  229. margin-right: 25%;
  230. background-color: #dcb495;
  231. display: flex;
  232. flex-direction: column;
  233. justify-content: center;
  234. align-items: center;
  235. align-content: space-around;
  236. }
  237. .feedback_title {
  238. width: 80%;
  239. margin-bottom: 20%;
  240. text-align: center;
  241. color: #000000;
  242. font-size: 3vw;
  243. }
  244. .feedback_logo {
  245. margin-bottom: 20%;
  246. width: 10vw;
  247. height: 10vw;
  248. }
  249. .feedback_mail, .feedback_mail_link {
  250. font-size: 1.5vw;
  251. color: #000000;
  252. transition: color 0.5s ease-in, border-bottom 0.5s ease-in;
  253. }
  254. .feedback_mail_link:hover {
  255. color: #694a2d;
  256. border-bottom: 3px solid #f3c79e;
  257. text-decoration: none;
  258. }