сотрудники.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654
  1. body {
  2. font-family: Arial, sans-serif;
  3. margin: 0;
  4. padding: 0;
  5. background-image: url("../картинки/фон.jpg");
  6. }
  7. .shapka {
  8. margin: 0 auto;
  9. background-color: #22242B;
  10. }
  11. .container {
  12. width: 70%;
  13. height: auto;
  14. margin: 20px auto;
  15. padding: 20px;
  16. background-color: #fff;
  17. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  18. border-radius: 5px;
  19. }
  20. h1 {
  21. text-align: center;
  22. margin-bottom: 30px;
  23. color: #333;
  24. }
  25. h2 {
  26. margin-top: 30px;
  27. color: #333;
  28. }
  29. ul {
  30. list-style: none;
  31. padding: 0;
  32. margin-bottom: 20px;
  33. }
  34. li {
  35. margin-bottom: 10px;
  36. }
  37. .contact-info, .payment-details {
  38. margin-bottom: 30px;
  39. }
  40. .contact-info ul, .payment-details ul {
  41. padding-left: 20px;
  42. }
  43. a {
  44. color: #007bff;
  45. text-decoration: none;
  46. }
  47. a:hover {
  48. text-decoration: underline;
  49. }
  50. /* Стиль для скрытого блока с контактами сотрудников */
  51. #staff-contacts {
  52. background-color: #f0f0f0;
  53. padding: 15px;
  54. border: 1px solid #ddd;
  55. border-radius: 5px;
  56. }
  57. * {
  58. padding: 0;
  59. margin: 0;
  60. box-sizing: border-box;
  61. border: none;
  62. outline: none;
  63. scroll-behavior: smooth;
  64. }
  65. html {
  66. scroll-behavior: smooth;
  67. font-family: 'Tac', sans-serif;
  68. }
  69. a {
  70. text-decoration: none;
  71. font-family: 'Tac', sans-serif;
  72. font-size: 0.875rem;
  73. font-weight: 400;
  74. color: white;
  75. }
  76. header {
  77. display: flex;
  78. justify-content: space-between;
  79. align-items: center;
  80. padding: 33px 0;
  81. }
  82. .big_con {
  83. width: 1475px;
  84. margin: 0 auto;
  85. }
  86. .logo {
  87. display: flex;
  88. justify-content: space-between;
  89. align-items: center;
  90. }
  91. .line {
  92. border: 1px solid #444444;
  93. height: 30px;
  94. margin: 0 20px;
  95. }
  96. .p18 {
  97. font-size: clamp(1rem, 0.75rem + 0.33vw, 1.125rem);
  98. font-weight: 700;
  99. color: white;
  100. }
  101. .p16 {
  102. font-size: clamp(0.8rem, 0.4rem + 0.53vw, 1rem);
  103. font-weight: 400;
  104. color: white;
  105. }
  106. .p14 {
  107. font-family: 'Tac', sans-serif;
  108. font-size: clamp(0.7rem, 0.35rem + 0.47vw, 0.875rem);
  109. font-weight: 400;
  110. color: white;
  111. }
  112. .p15 {
  113. font-family: 'Tac', sans-serif;
  114. color: black;
  115. }
  116. .requisites {
  117. display: flex;
  118. justify-content: space-between;
  119. align-items: center;
  120. color: white;
  121. }
  122. .requisites .p18 {
  123. color: #444444;
  124. cursor: pointer;
  125. }
  126. .requisites img {
  127. padding-right: 16px;
  128. }
  129. .requisites .line {
  130. margin: 0 70px;
  131. }
  132. .opacity {
  133. position: relative;
  134. background: none;
  135. border: none;
  136. cursor: pointer;
  137. width: 310px;
  138. height: 40px;
  139. display: flex;
  140. justify-content: space-around;
  141. align-items: center;
  142. border: 1px solid white;
  143. background-color: rgba(255, 255, 255, 0);
  144. transition: all ease 0.3s;
  145. cursor: pointer;
  146. }
  147. .opacity:hover {
  148. background-color: #5585ff;
  149. }
  150. .arrow svg {
  151. width: 9px;
  152. display: flex;
  153. justify-content: center;
  154. transition: all ease 0.3s;
  155. }
  156. .opacity:hover svg path {
  157. stroke: white;
  158. }
  159. .location {
  160. display: flex;
  161. flex-direction: column;
  162. align-items: flex-start;
  163. background-color: rgba(48, 54, 58, 0.85);
  164. padding: 80px 33px;
  165. gap: 20px;
  166. position: absolute;
  167. top: 2px;
  168. left: 230px;
  169. }
  170. .location .logo {
  171. flex-direction: column;
  172. align-items: flex-start;
  173. gap: 20px;
  174. }
  175. .location .line {
  176. display: flex;
  177. align-items: flex-start;
  178. border: 1px solid #444444;
  179. width: 125px;
  180. height: 0px;
  181. margin: 0;
  182. }
  183. .location .logo p {
  184. font-weight: 700;
  185. }
  186. .location .requisites {
  187. flex-direction: column;
  188. }
  189. .address {
  190. display: flex;
  191. padding-bottom: 20px;
  192. }
  193. .location .requisites .p16 {
  194. color: #444444;
  195. }
  196. .mode_work {
  197. display: flex;
  198. padding-top: 20px;
  199. }
  200. /*футер*/
  201. .data_foot {
  202. display: flex;
  203. flex-direction: column;
  204. align-items: center;
  205. gap: 35px;
  206. padding: 77px 200px;
  207. }
  208. nav {
  209. width: 100%;
  210. display: flex;
  211. justify-content: space-between;
  212. align-items: center;
  213. }
  214. nav a {
  215. font-size: 1rem;
  216. }
  217. .info {
  218. width: 100%;
  219. display: flex;
  220. justify-content: space-between;
  221. }
  222. .info .p14 {
  223. width: 500px;
  224. }
  225. hr {
  226. width: 100%;
  227. border: 1px solid #D1D1D1;
  228. }
  229. .i:hover svg path {
  230. fill: #D1D1D1;
  231. }
  232. @media screen and (max-width: 1440px) {
  233. .big_con {
  234. width: 1200px;
  235. margin: 0 auto;
  236. }
  237. .title {
  238. top: 70px;
  239. }
  240. .opacity, .orange, .black {
  241. width: 220px;
  242. }
  243. .line {
  244. height: 80px;
  245. }
  246. .requisites .line {
  247. margin: 0 20px;
  248. }
  249. .back_img {
  250. width: 100%;
  251. }
  252. .carts {
  253. width: 100%;
  254. }
  255. .path1 {
  256. padding: 0;
  257. }
  258. .location {
  259. padding: 89px 33px;
  260. }
  261. .location .requisites {
  262. align-items: flex-start;
  263. }
  264. .data_foot {
  265. padding: 77px 100px;
  266. }
  267. }
  268. .opacity .arrow {
  269. position: absolute;
  270. top: 50%;
  271. transform: translateY(-50%);
  272. right: 10px;
  273. }
  274. .container {
  275. width: 100%;
  276. max-width: 2000px;
  277. margin: 0 auto; /* Center the container */
  278. position: relative; /* Make the container the parent for absolute positioning */
  279. }
  280. .content {
  281. position: absolute;
  282. top: 5%;
  283. left: 20%;
  284. padding: 30px;
  285. transform: translate(-10%, -10%);
  286. color: #fff;
  287. margin-top: 100px; /* Внешние отступы сверху 100px */
  288. z-index: 1; /* Помещаем текст поверх изображения */
  289. }
  290. .content h2 {
  291. font-size: 24px;
  292. }
  293. h2 {
  294. text-align: center;
  295. }
  296. p {
  297. text-align: justify;
  298. line-height: 1.6;
  299. margin-bottom: 15px;
  300. }
  301. .info-box {
  302. background-color: rgba(160, 160, 160, 0.7);
  303. border: 1px solid #ccc;
  304. padding: 15px;
  305. margin-bottom: 20px;
  306. border-radius: 5px;
  307. }
  308. .info-box h3 {
  309. margin-top: 0;
  310. }
  311. .info-box ul {
  312. list-style-type: disc;
  313. margin-left: 20px;
  314. }
  315. .logo {
  316. font-size: 24px;
  317. font-weight: bold;
  318. color: #0022ff; /* Синий цвет */
  319. text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); /* Тень */
  320. }
  321. nav {
  322. display: flex;
  323. }
  324. nav a {
  325. text-decoration: none;
  326. color: #faf3f3;
  327. padding: 10px 20px;
  328. position: relative;
  329. margin-left: 20px;
  330. }
  331. nav a::after {
  332. content: "";
  333. position: absolute;
  334. bottom: 0;
  335. left: 0;
  336. width: 100%;
  337. height: 3px;
  338. background: linear-gradient(to right, #007bff, #663399, #ff0000); /* Градиент */
  339. transform: scaleX(0);
  340. transition: transform 0.3s ease-in-out;
  341. }
  342. nav a:hover::after {
  343. transform: scaleX(1);
  344. }
  345. .icon {
  346. margin-left: 20px;
  347. cursor: pointer;
  348. }
  349. .icon img {
  350. width: 30px;
  351. height: 30px;
  352. }
  353. /* Стили для фонов */
  354. section {
  355. padding: 50px;
  356. text-align: center;
  357. min-height: 100vh;
  358. }
  359. .footer-link {
  360. position: fixed;
  361. bottom: 20px;
  362. left: 50%;
  363. transform: translateX(-50%);
  364. color: white;
  365. text-decoration: none;
  366. font-weight: bold;
  367. background-color: #444444;
  368. padding: 10px 20px;
  369. border-radius: 5px;
  370. z-index: 2;
  371. }
  372. .footer-link:hover {
  373. background-color: #6e6e6e;
  374. }
  375. .scroll-to-top {
  376. position: fixed;
  377. bottom: 20px;
  378. right: 20px;
  379. display: none;
  380. z-index: 10;
  381. cursor: pointer;
  382. }
  383. .scroll-to-top img {
  384. width: 50px;
  385. }
  386. .car-cards {
  387. /* Стили для блока с классом 'car-cards' */
  388. display: flex; /* Использование flexbox для расположения в строку с переносом */
  389. flex-wrap: wrap; /* Перенос элементов на новую строку в случае нехватки места */
  390. }
  391. .car-card {
  392. /* Стили для элементов с классом 'car-card' */
  393. position: relative; /* Относительное позиционирование */
  394. margin: 20px; /* Внешние отступы 20px */
  395. overflow: hidden; /* Скрытие содержимого, выходящего за границы */
  396. transition: transform 0.3s; /* Плавное изменение свойства трансформации за 0.3 секунды */
  397. background: rgba(0, 0, 0, 0); /* Цвет фона */
  398. border-radius: 10px; /* Скругление углов 10px */
  399. border-color: #ffffff;
  400. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Тень */
  401. padding: 10px; /* Внутренние отступы 10px */
  402. }
  403. .car-card:hover {
  404. /* Стили для наведения на элемент с классом 'car-card' */
  405. transform: scale(1.1); /* Увеличение масштаба при наведении */
  406. }
  407. .car-card h2, .car-card p {
  408. /* Стили для заголовков и параграфов внутри элемента 'car-card' */
  409. color: black; /* Цвет текста */
  410. text-align: center; /* Выравнивание текста по центру */
  411. margin: 5px 0; /* Внешние отступы сверху и снизу 5px, слева и справа 0 */
  412. font-size: 16px; /* Размер шрифта 16px */
  413. }
  414. .car-card img {
  415. /* Стили для изображения внутри элемента 'car-card' */
  416. width: 80%; /* Ширина 100% */
  417. height: auto; /* Автоматическая высота */
  418. }
  419. .car-info {
  420. /* Стили для информации об автомобиле */
  421. background-color: rgba(160, 160, 160, 0.7); /* Цвет фона с прозрачностью */
  422. position: absolute; /* Абсолютное позиционирование */
  423. bottom: 0; /* Расположение внизу */
  424. width: 100%; /* Ширина 100% */
  425. text-align: center; /* Выравнивание по центру */
  426. padding: 10px; /* Внутренние отступы 10px */
  427. }
  428. .availability {
  429. /* Стили для информации о доступности автомобиля */
  430. display: none; /* Начальное скрытие элемента */
  431. position: absolute; /* Абсолютное позиционирование */
  432. bottom: 10px; /* Расположение снизу 10px */
  433. left: 50%; /* Расположение по центру по горизонтали */
  434. transform: translateX(-50%); /* Центрирование по горизонтали */
  435. background-color: rgba(255, 255, 255, 0.7); /* Цвет фона с прозрачностью */
  436. color: rgb(0, 0, 0); /* Цвет текста */
  437. padding: 5px 10px; /* Внутренние отступы 5px сверху и снизу, 10px слева и справа */
  438. border-radius: 5px; /* Скругление углов 5px */
  439. }
  440. .car-card:hover .availability {
  441. /* Отображение информации о доступности при наведении на элемент 'car-card' */
  442. display: block; /* Показ элемента */
  443. }
  444. .popup {
  445. display: none;
  446. position: fixed;
  447. top: 50%;
  448. left: 50%;
  449. transform: translate(-50%, -50%);
  450. background-color:rgba(255, 255, 255, 0.9);
  451. padding: 20px;
  452. border-radius: 5px;
  453. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  454. z-index: 1000;
  455. text-align: center;
  456. width: 400px;
  457. max-width: 90%; /* Чтобы окно не выходило за пределы экрана */
  458. }
  459. .close-button {
  460. position: absolute;
  461. top: 10px;
  462. right: 10px;
  463. cursor: pointer;
  464. }
  465. .order-button {
  466. background-color: #444444;
  467. color: white;
  468. padding: 10px 20px;
  469. border: none;
  470. border-radius: 5px;
  471. cursor: pointer;
  472. }
  473. .opacity {
  474. position: relative;
  475. background: none;
  476. border: none;
  477. cursor: pointer;
  478. width: 310px;
  479. height: 40px;
  480. display: flex;
  481. justify-content: space-around;
  482. align-items: center;
  483. border: 1px solid white;
  484. background-color: rgba(255, 255, 255, 0);
  485. transition: all ease 0.3s;
  486. cursor: pointer;
  487. }
  488. .opacity:hover {
  489. background-color: #5585ff;
  490. }
  491. .arrow svg {
  492. width: 9px;
  493. display: flex;
  494. justify-content: center;
  495. transition: all ease 0.3s;
  496. }
  497. .opacity:hover svg path {
  498. stroke: white;
  499. }
  500. .opacity .arrow {
  501. position: absolute;
  502. top: 50%;
  503. transform: translateY(-50%);
  504. right: 10px;
  505. }
  506. .dropdown {
  507. display: none;
  508. position: absolute;
  509. background-color: #5585ff;
  510. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  511. top: 100%;
  512. right: 1px;
  513. left: 0px;
  514. z-index: 2;
  515. width: 310px; /* Ширина списка */
  516. }
  517. .dropdown a {
  518. color: rgb(255, 255, 255);
  519. padding: 12px 16px;
  520. text-decoration: none;
  521. display: block;
  522. }
  523. .dropdown a:hover {
  524. background-color: #ffffff;
  525. color: #5585ff;
  526. }
  527. .opacity:hover .dropdown {
  528. display: block;
  529. }
  530. .close-button {
  531. color: #aaa;
  532. float: right;
  533. font-size: 28px;
  534. font-weight: bold;
  535. cursor: pointer;
  536. }
  537. .close-button:hover,
  538. .close-button:focus {
  539. color: black;
  540. text-decoration: none;
  541. cursor: pointer;
  542. }