dilyara1322

travel.css

Nov 27th, 2020
887
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. * {
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6.  
  7. .container {
  8.     max-width: 1000px;
  9.     margin: auto;
  10. }
  11.  
  12. button {
  13.     cursor: pointer;
  14.     outline: none;
  15.     border: 0;
  16.     border-radius: 5px;
  17.     padding: 5px;
  18.     background-color: black;
  19.     color: rgb(255, 115, 0);
  20.     font-size: 16px;
  21.     transition: all 0.5s;
  22. }
  23. button:hover {
  24.     background-color: rgb(255, 255, 255);
  25. }
  26.  
  27. a {
  28.     margin: 5px;
  29.     padding: 5px;
  30.     text-decoration: none;
  31.     background-color: black;
  32.     color: rgb(255, 115, 0);
  33.     font-size: 20px;
  34.     font-weight: 700;
  35.     border-radius: 5px;
  36.     transition: all 0.5s;
  37. }
  38. header a:hover {
  39.     background-color: white;
  40.     color: rgb(255, 115, 0);
  41. }
  42.  
  43. h2 {
  44.     font-size: 20px;
  45.     color: rgb(255, 246, 239);
  46. }
  47.  
  48. h4 {
  49.     font-size: 16px;
  50.     color: rgb(41, 18, 0);
  51. }
  52.  
  53. /* Шапка */
  54. header {
  55.     background: rgb(255, 115, 0);
  56.     height: 60px;
  57.     width: 100%;
  58.     position: fixed;
  59.     border-bottom: 1px solid black;
  60. }
  61. header .container {
  62.     display: flex;
  63.     justify-content: space-between;
  64.     align-items: center;
  65.     height: 100%;
  66. }
  67. .logo {
  68.     height: 50px;
  69.     width: 50px;
  70. }
  71. .logo img {
  72.     width: 100%;
  73. }
  74. .menu {
  75.     height: 100%;
  76. }
  77. .menu_list {
  78.     display: flex;
  79.     justify-content: space-between;
  80.     align-items: center;
  81.     height: 100%;
  82. }
  83. header li {
  84.     list-style: none;
  85.     display: block;
  86. }
  87. header a {
  88.     margin: 5px;
  89.     padding: 5px;
  90.     background-color: black;
  91.     color: rgb(255, 115, 0);
  92.     font-size: 20px;
  93.     font-weight: 700;
  94.     border-radius: 5px;
  95.     transition: all 0.5s;
  96. }
  97. header a:hover {
  98.     background-color: white;
  99.     color: rgb(255, 115, 0);
  100. }
  101. .burger {
  102.     border-radius: 50%;
  103.     padding: 10px;
  104.     display: none;
  105. }
  106. .burger div {
  107.     width: 20px;
  108.     height: 5px;
  109.     background-color: white;
  110.     margin: 2px;
  111.     border-radius: 5px;
  112.     transition: all 0.2s;
  113. }
  114. .burger:hover div {
  115.     background-color: black;
  116. }
  117. /*  */
  118.  
  119. /*  */
  120. .call {
  121.     display: flex;
  122.     flex-direction: column;
  123.     justify-content: center;
  124.     align-items: center;
  125. }
  126.  
  127. /* Блок со слоганом */
  128. .slogan {
  129.     padding-top: 80px;
  130.     margin-bottom: 20px;
  131. }
  132. .slogan .container {
  133.     display: flex;
  134.     justify-content: space-evenly;
  135.     align-items: center;
  136. }
  137. .slogan_text {
  138.     width: 65%;
  139.     padding: 20px;
  140.     font-size: 20px;
  141.     text-align: justify;
  142.     border: 3px solid rgb(255, 115, 0);
  143.     padding: 15px;
  144. }
  145. .slogan_btn {
  146.     height: 250px;
  147.     width: 250px;
  148.     text-align: center;
  149.     border-radius: 50%;
  150.     font-size: 40px;
  151.     padding: 80px 0;
  152. }
  153. .slogan_btn:hover {
  154.     border: 10px solid rgb(255, 115, 0);
  155. }
  156.  
  157. /* Особенности горящих туров */
  158. .specifices {
  159.     padding: 40px 0;
  160.     background: url("../Media/Images/4995833-plyazh-shezlongi-okean-rayskoe-mesto-letniy-otdyh-ekzotika-otpusk-uspokaivayuschie-iyul.jpg") no-repeat;
  161.     background-size: 100%;
  162. }
  163. .preim, .nedost {
  164.     display: flex;
  165.     justify-content: center;
  166.     align-items: center;
  167. }
  168. .preim_text, .nedost_text {
  169.     margin: 20px 0 10px;
  170.     color: black;
  171.     text-transform: uppercase;
  172.     background-color: rgba(255, 255, 255, 0.733);
  173.     border: 3px solid rgb(255, 115, 0);
  174.     border-radius: 50%;
  175.     width: 200px;
  176.     height: 200px;
  177.     padding-top: 80px;
  178.     text-align: center;
  179. }
  180. .preim_content, .nedost_content {
  181.     margin: 20px;
  182.     padding: 30px;
  183.     background-color: rgba(255, 115, 0, 0.7);
  184.     border-radius: 10px;
  185. }
  186. .preim_content h4, .nedost_content h4 {
  187.     margin: 10px 0 20px;
  188. }
  189.  
  190. /* Туры */
  191. .tours {
  192.     padding: 40px 0;
  193. }
  194. .tours_items {
  195.     display: flex;
  196.     flex-direction: row;
  197.     flex-wrap: wrap;
  198. }
  199. .tour {
  200.     width: 30%;
  201.     border: 2px solid black;
  202.     padding: 20px;
  203.     margin: 10px;
  204.     text-align: center;
  205. }
  206. .tour_text {
  207.     margin-top: 10px;
  208.     background-color: rgba(255, 115, 0, 0.7);
  209.     border-radius: 3px;
  210. }
  211. .tour_text h4 {
  212.     color: brown;
  213.     font-size: 30px;
  214.     line-height: 1.5;
  215. }
  216. .tour img {
  217.     width: 100%;
  218.     height: auto;
  219. }
  220.  
  221. .filter {
  222.     display: flex;
  223.     justify-content: center;
  224. }
  225. input[type="radio"] {
  226.     display: none;
  227. }
  228. .filter label {
  229.     background: orangered;
  230.     color: wheat;
  231.     font-size: 18px;
  232.     padding: 10px;
  233.     margin: 10px;
  234.     border-radius: 5px;
  235.     cursor: pointer;
  236. }
  237. #tf1:checked ~ .russia_tours,
  238. #tf1:checked ~ .indonezia_tours,
  239. #tf1:checked ~ .china_tours,
  240. #tf1:checked ~ .vietnam_tours {
  241.     display: flex;
  242. }
  243. #tf2:checked ~ .russia_tours {
  244.     display: flex;
  245. }
  246. #tf2:checked ~ .indonezia_tours,
  247. #tf2:checked ~ .china_tours,
  248. #tf2:checked ~ .vietnam_tours {
  249.     display: none;
  250. }
  251. #tf3:checked ~ .indonezia_tours {
  252.     display: flex;
  253. }
  254. #tf3:checked ~ .russia_tours,
  255. #tf3:checked ~ .china_tours,
  256. #tf3:checked ~ .vietnam_tours {
  257.     display: none;
  258. }
  259. #tf4:checked ~ .china_tours {
  260.     display: flex;
  261. }
  262. #tf4:checked ~ .indonezia_tours,
  263. #tf4:checked ~ .russia_tours,
  264. #tf4:checked ~ .vietnam_tours {
  265.     display: none;
  266. }
  267. #tf5:checked ~ .vietnam_tours {
  268.     display: flex;
  269. }
  270. #tf5:checked ~ .indonezia_tours,
  271. #tf5:checked ~ .china_tours,
  272. #tf5:checked ~ .russia_tours {
  273.     display: none;
  274. }
  275.  
  276. /* Отзывы */
  277. .otzyvi {
  278.     background: rgb(255, 115, 0);
  279.     padding-top: 10px;
  280. }
  281. .otzyvi .container {
  282.     overflow: hidden;
  283. }
  284. .otz_labels {
  285.     display: flex;
  286.     justify-content: center;
  287.     align-items: center;
  288. }
  289. .otzl {
  290.     display: block;
  291.     width: 10px;
  292.     height: 10px;
  293.     border-radius: 50%;
  294.     border: 2px solid white;
  295.     margin: 5px;
  296.     cursor: pointer;
  297. }
  298. .otzl:hover {
  299.     background-color: white;
  300. }
  301. .slider {
  302.     margin: 40px 0;
  303.     width: 400%;
  304.     display: flex;
  305. }
  306. .otzyv {
  307.     width: 25%;
  308.     padding: 40px;
  309.     border: honeydew 1px solid;
  310. }
  311. .otzyv_name {
  312.     text-transform: uppercase;
  313. }
  314. .otzyv_date {
  315.     font-size: 14px;
  316.     color: rgb(71, 71, 71);
  317.     margin-top: 5px;
  318. }
  319. .otzyv_text {
  320.     margin-top: 15px;
  321.     text-align: justify;
  322.     line-height: 1.5;
  323. }
  324. .otzyvi #o1:checked ~ .slider>.otzyv:first-child {
  325.     margin-left: 0;
  326.     transition: all 0.5s;
  327. }
  328. .otzyvi #o2:checked ~ .slider>.otzyv:first-child {
  329.     margin-left: -25%;
  330.     transition: all 0.5s;
  331. }
  332. .otzyvi #o3:checked ~ .slider>.otzyv:first-child {
  333.     margin-left: -50%;
  334.     transition: all 0.5s;
  335. }
  336. .otzyvi #o4:checked ~ .slider>.otzyv:first-child {
  337.     margin-left: -75%;
  338.     transition: all 0.5s;
  339. }
  340.  
  341. .up_btn {
  342.     position: fixed;
  343.     bottom: 10px;
  344.     right: 10px;
  345.     width: 50px;
  346.     height: 50px;
  347.     border-radius: 50%;
  348.     font-size: 14px;
  349.     padding-top: 15px;
  350.     transition: all 1s;
  351. }
  352.  
  353.  
  354.  
  355. @media (max-width: 812px) {
  356.     .container {
  357.         width: 811px;
  358.     }
  359. }
  360.  
  361. @media (max-width: 375px) {
  362.     .container {
  363.         width: 375px;
  364.     }
  365.     .menu {
  366.         display: none;
  367.         position: absolute;
  368.         top: 60px;
  369.         background-color: rgba(255, 115, 0, 0.5);
  370.         width: 100%;
  371.     }
  372.     .burger {
  373.         display: block;
  374.     }
  375.     .burger:hover ~ #menu {
  376.         display: block;
  377.     }
  378.     .burger:hover ~ .menu_list {
  379.         display: flex;
  380.         flex-direction: column;
  381.         align-items: center;
  382.         width: 100%;
  383.     }
  384.     .burger:hover ~ .menu_list li {
  385.         display: block;
  386.         width: 100%;
  387.     }
  388.     h2 {
  389.         font-size: 16px;
  390.     }
  391.     h4 {
  392.         font-size: 13px;
  393.     }
  394.     .slogan .container {
  395.         flex-direction: column;
  396.     }
  397.     .slogan_btn {
  398.         margin-top: 15px;
  399.         font-size: 16px;
  400.         width: 150px;
  401.         height: 150px;
  402.     }
  403.     .specifices {
  404.         background-repeat: repeat;
  405.     }
  406.     .specifices div {
  407.         flex-direction: column;
  408.     }
  409.     .tours div {
  410.         flex-direction: column;
  411.     }
  412.     .tour {
  413.         width: 100%;
  414.     }
  415.     .filter {
  416.         display: flex;
  417.         flex-direction: column;
  418.     }
  419.     .filter label {
  420.         display: block;
  421.     }
  422. }
  423.  
RAW Paste Data