Blame view
local/templates/vekprom/css/pages/main/bloks.css
2.79 KB
2fe1e5ce8 Первый коммит на ... |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
.bloks-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 21px; } .bloks-wrapper :not(:nth-child(3n)) { margin-right: 19px; } .bloks-item { max-width: 422px; width: 100%; height: 197px; background-color: rgba(171, 178, 191, 0.1); border-radius: 10px; margin-bottom: 15px; cursor: pointer; -webkit-transition: background-color 0.2s ease-in-out; -o-transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out; } .bloks-item:hover { background-color: rgba(171, 178, 191, 0.8); } .bloks-item:hover .item-wrapper .blocks__item-text .item-title { color: #fff; } .bloks-item:hover .item-wrapper .blocks__item-text .svg-wrapper:after { background-image: url("data:image/svg+xml,%3Csvg width='28' height='15' viewBox='0 0 28 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5247 0.9375L26.2598 7.5L19.5247 14.0625' stroke='white' stroke-width='1.875' stroke-linecap='round'/%3E%3Cpath d='M26.2598 7.5L1.24399 7.5' stroke='white' stroke-width='1.875' stroke-linecap='round'/%3E%3C/svg%3E"); } .item-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .item-wrapper .blocks__item-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 18px; margin-left: 19px; } .item-wrapper .bloks__item-img { position: absolute; top: 15px; left: 134px; z-index: 1; } .item-wrapper .img-second { top: -8px; left: 171px; } .item-wrapper .img-third { top: -23px; left: 170px; } .item-wrapper .img-four { top: 0px; left: 191px; } .item-wrapper .img-five { top: 36px; right: -71px; } .item-wrapper .img-six { top: -18px; left: 175px; } .item-title { font-weight: 600; font-size: 14px; line-height: 20px; letter-spacing: -0.01em; color: #636B78; max-width: 141px; width: 100%; z-index: 2; } .title-five, .title-four { max-width: 225px; width: 100%; } .svg-wrapper { position: relative; } .svg-wrapper:after { position: absolute; content: ""; background-image: url("data:image/svg+xml,%3Csvg width='29' height='17' viewBox='0 0 29 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.063 1.67346L26.7754 8.38589L20.063 15.0983' stroke='%23F2994A' stroke-width='1.91784' stroke-linecap='round'/%3E%3Cpath d='M26.7754 8.38586L1.84351 8.38586' stroke='%23F2994A' stroke-width='1.91784' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover; width: 25px; height: 13px; margin-top: 89px; } |