main.css 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. html {
  2. box-sizing: border-box;
  3. height: 100%;
  4. }
  5. body {
  6. height: 100%;
  7. }
  8. *,
  9. :before,
  10. :after {
  11. box-sizing: inherit;
  12. }
  13. a {
  14. text-decoration: none;
  15. }
  16. .container {
  17. max-width: 1150px;
  18. margin: 0 auto;
  19. padding: 0 15px;
  20. }
  21. .body__wrapper {
  22. width: 100%;
  23. overflow: hidden;
  24. position: relative;
  25. min-height: 100vh;
  26. display: flex;
  27. flex-direction: column;
  28. }
  29. .header {
  30. min-height: 93px;
  31. background-color: #d3b715;
  32. padding: 20px;
  33. display: flex;
  34. justify-content: space-between;
  35. align-items: center;
  36. }
  37. .main {
  38. flex-grow:1;
  39. }
  40. .header__nav {
  41. display: flex;
  42. justify-content: space-evenly;
  43. align-items: center;
  44. list-style: none;
  45. }
  46. .header__nav li{
  47. padding-left: 10px;
  48. }
  49. .header__nav a {
  50. color: black;
  51. font-weight: 700;
  52. }
  53. .main__wrapper {
  54. display: flex;
  55. }
  56. .main__content {
  57. order: 2;
  58. padding: 32px 15px;
  59. text-align: center;
  60. }
  61. h1 {
  62. text-transform: uppercase;
  63. margin-bottom: 30px;
  64. }
  65. .card__row {
  66. display: flex;
  67. flex-wrap: wrap;
  68. margin: 0 -15px;
  69. }
  70. .col {
  71. width: 33.333%;
  72. padding:0 15px 30px;
  73. }
  74. .card {
  75. display: flex;
  76. flex-direction: column;
  77. border: solid black 2px;
  78. text-align: center;
  79. min-height: 100%;
  80. border-radius: 14px;
  81. padding: 20px 15px;
  82. }
  83. .col:hover {
  84. cursor: pointer;
  85. transition: all .5s ease-in;
  86. transform: rotateY(360deg);
  87. }
  88. .card__img {
  89. width: 75px;
  90. height: 75px;
  91. margin: 0 auto;
  92. border: 10px solid #9cb0c8;
  93. border-radius:100%;
  94. background: url('img/card_img.jpg') center center/cover no-repeat;
  95. }
  96. .card__body {
  97. flex-grow: 1;
  98. text-align: center;
  99. }
  100. .card__btn {
  101. background-color: #695077;
  102. border-radius:20px;
  103. padding: 4px 18px;
  104. color: aliceblue;
  105. }
  106. aside {
  107. padding: 10px;
  108. }
  109. .aside_l {
  110. background-color:#c798ba;
  111. max-width: 234px;
  112. width: 100%;
  113. order: 1;
  114. text-align: center;
  115. padding-top: 10px;
  116. }
  117. .aside_r {
  118. background-color:#9cb0c8;
  119. min-width: 234px;
  120. order: 3;
  121. text-align: center;
  122. padding-top: 10px;
  123. }
  124. .holder {
  125. min-height: 110px;
  126. max-width: 400px;
  127. margin: 0 auto;
  128. border: 2px solid black;
  129. display: flex;
  130. justify-content: center;
  131. flex-wrap: wrap;
  132. border-radius:20px 20px 0 0;
  133. overflow: hidden;
  134. }
  135. .item {
  136. height: 55px;
  137. text-align: center;
  138. padding: 15px;
  139. }
  140. .item:first-child {
  141. background-color: #fd634d;
  142. width: 50%;
  143. order: 1;
  144. flex-grow: 1;
  145. }
  146. .item:nth-child(5) {
  147. background-color: #fea429;
  148. order: 2;
  149. flex-grow: 1;
  150. width: 50%;
  151. }
  152. .item:nth-child(2) {
  153. background-color: #4984b0
  154. ;
  155. order: 4;
  156. width: 33.33%;
  157. }
  158. .item:nth-child(3) {
  159. background-color: #663a94
  160. ;
  161. order: 3;
  162. width: 33.33%;
  163. }
  164. .item:nth-child(4) {
  165. background-color:#0e7f13
  166. ;
  167. order: 5;
  168. width: 33.33%;
  169. }
  170. .main-nav {
  171. display: none;
  172. }
  173. .footer {
  174. min-height:35px;
  175. background-color:#86ed84;
  176. text-align: center;
  177. }
  178. @media (max-width: 991px) {
  179. .col {
  180. max-width: 50%;
  181. padding:0 10px 20px 0;
  182. }
  183. .aside_l {
  184. min-width: 174px;
  185. }
  186. .aside_r {
  187. min-width: 174px;
  188. }
  189. }
  190. @media (max-width: 767px) {
  191. h1 {
  192. margin-bottom: 10px;
  193. font-size: 28px;
  194. }
  195. .col {
  196. width: 100%;
  197. padding:0 10px 20px 0;
  198. }
  199. .aside_l {
  200. min-width: 144px;
  201. }
  202. .aside_r {
  203. min-width: 144px;
  204. }
  205. }
  206. @media (max-width: 575px) {
  207. .header {
  208. position: fixed;
  209. width: 100%;
  210. padding:10px;
  211. }
  212. .main__wrapper {
  213. flex-direction: column;
  214. }
  215. .col {
  216. width: 100%;
  217. padding:0 10px 20px 0;
  218. }
  219. .aside_l {
  220. min-width: 100%;
  221. order:2;
  222. min-height: auto;
  223. }
  224. .aside_r {
  225. min-width: 100%;
  226. min-height: auto;
  227. }
  228. nav {
  229. display: none;
  230. }
  231. .main-nav {
  232. display: block;
  233. }
  234. #menu__toggle {
  235. opacity: 0;
  236. }
  237. .menu__btn {
  238. display: flex;
  239. align-items: center;
  240. position: absolute;
  241. top: 20px;
  242. right: 20px;
  243. width: 26px;
  244. height: 26px;
  245. z-index: 1;
  246. }
  247. .menu__btn > span,
  248. .menu__btn > span::before,
  249. .menu__btn > span::after {
  250. display: block;
  251. position: absolute;
  252. width: 100%;
  253. height: 2px;
  254. background-color: #616161;
  255. }
  256. .menu__btn > span::before {
  257. content: '';
  258. top: -8px;
  259. }
  260. .menu__btn > span::after {
  261. content: '';
  262. top: 8px;
  263. }
  264. .menu__box {
  265. display: block;
  266. position: fixed;
  267. visibility: hidden;
  268. top: 0;
  269. left: -100%;
  270. width: 50%;
  271. height: 100%;
  272. margin: 0;
  273. padding: 80px 0;
  274. list-style: none;
  275. text-align: center;
  276. background-color: #fff;
  277. border-radius: 0 10px 10px 0;
  278. }
  279. .menu__item {
  280. display: block;
  281. padding: 12px 24px;
  282. color: #d3b715;
  283. font-size: 20px;
  284. font-weight: 500;
  285. text-decoration: none;
  286. text-transform: uppercase;
  287. }
  288. #menu__toggle:checked ~ .menu__btn > span {
  289. transform: rotate(45deg);
  290. }
  291. #menu__toggle:checked ~ .menu__btn > span::before {
  292. top: 0;
  293. transform: rotate(0);
  294. }
  295. #menu__toggle:checked ~ .menu__btn > span::after {
  296. top: 0;
  297. transform: rotate(90deg);
  298. }
  299. #menu__toggle:checked ~ .menu__box {
  300. visibility: visible;
  301. left: 0;
  302. }
  303. .menu__btn > span,
  304. .menu__btn > span::before,
  305. .menu__btn > span::after {
  306. transition-duration: .25s;
  307. }
  308. .menu__box {
  309. transition-duration: .25s;
  310. }
  311. .menu__item {
  312. transition-duration: .25s;
  313. }
  314. }