<div class="carsHome__basicCar">
<img src="https://i.postimg.cc/5N11DnNc/car-home.png" class="basicCar__img" alt="">
<div class="car-hovers" id="car-hovers">
<svg width="735" height="392" class="car-hovers__group" viewBox="0 0 735 392" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="detail-1" class="group-el" d="M517.808 294.267L540.904 281.334C541.301 281.112 541.718 280.928 542.149 280.784L543.499 280.334C544.148 280.117 544.706 279.691 545.085 279.122C545.358 278.713 545.528 278.245 545.583 277.757L545.834 275.494C545.945 274.501 545.935 273.5 545.806 272.51L544.5 262.5L543.5 251.5L543.5 245.371C543.5 241.801 543.883 238.241 544.641 234.752L546 228.5L549 208.5L550.032 196.809C550.344 193.28 550.279 189.727 549.84 186.212L549.001 179.5L549.001 172.5L547.5 157.5L546 149.5L543.5 139L542.319 135.454C541.774 133.82 541.114 132.227 540.344 130.686C537.816 125.631 536.501 120.058 536.501 114.407L536.501 111C536.501 106.648 532.857 103.182 528.51 103.399L521.984 103.726C518.776 103.886 516.105 106.244 515.546 109.407C515.2 111.372 514.018 113.089 512.307 114.116L507.501 117L496.982 121.508C494.664 122.501 492.275 123.318 489.834 123.951L480.001 126.5L466.501 131L457.001 134.5L446.501 139L433.501 144L420.001 149.5L407.001 155.5L394.501 162.5L382.501 169.5L370.001 176.5L356.001 186.5L346.513 193.141C346.192 193.366 346 193.734 346 194.126C346 194.854 346.641 195.415 347.362 195.318L361.001 193.5L378.501 193.5L389.812 193.5C392.931 193.5 396.043 193.792 399.107 194.371L408.969 196.237C411.652 196.745 414.289 197.471 416.854 198.41L429.027 202.863C431.974 203.941 434.65 205.65 436.869 207.869L439.533 210.533C439.841 210.841 440.209 211.084 440.614 211.245C441.766 211.706 443.081 211.464 443.993 210.622L448.337 206.612C448.778 206.205 449.249 205.829 449.744 205.489L453.558 202.867C455.844 201.295 458.317 200.015 460.92 199.056C464.611 197.696 468.514 197 472.447 197L475.492 197C478.478 197 481.445 197.481 484.278 198.426C488.37 199.79 492.088 202.088 495.138 205.138L496.424 206.423C497.806 207.805 499.071 209.299 500.207 210.89L500.399 211.158C502.457 214.039 504.118 217.185 505.338 220.51L509.001 230.5L511.193 239.895C512.062 243.619 512.501 247.431 512.501 251.256L512.501 257.407C512.501 260.794 512.844 264.171 513.527 267.488L515.154 275.394C515.717 278.126 516.05 280.901 516.149 283.69L516.5 293.5C516.5 294.172 517.222 294.595 517.808 294.267Z" />
<path id="detail-2" class="group-el" d="M114.5 122L87.0001 133L69.0001 142L54.5001 150L45.0001 156L39.5166 159.085C37.8424 160.026 36.2576 161.119 34.782 162.348L32.7464 164.045C31.5893 165.009 30.5885 166.147 29.7798 167.418C28.2908 169.757 27.5 172.473 27.5 175.246L27.5 178.052C27.5 178.681 27.5799 179.308 27.7379 179.918L29.83 187.986C30.3477 189.983 32.8389 190.661 34.2974 189.203C34.4321 189.068 34.5808 188.948 34.7411 188.845L39.3496 185.882C40.7761 184.965 42.3242 184.253 43.9487 183.765C45.6405 183.258 47.3974 183 49.1637 183L56 183L69.0001 184.5L81 186.5L91.5 189L96.1322 190.425C97.3101 190.788 98.2534 191.676 98.6862 192.83C99.1891 194.171 100.375 195.138 101.789 195.361L106.237 196.064C108.042 196.349 109.891 196.118 111.571 195.398C112.189 195.133 112.832 194.934 113.491 194.802L115.063 194.487C116.684 194.163 118.333 194 119.985 194L125 194L148.5 194L177 196.5L190.184 199.052C191.726 199.35 193.243 199.765 194.722 200.294C197.886 201.424 200.846 203.06 203.485 205.14L204.033 205.571C211.67 211.588 221.452 214.187 231.069 212.752L328.09 198.277C335.862 197.117 343.127 193.72 349 188.5L365 176.5L388.5 162.5L413 149.5L449.5 134.5L476.5 125L496.747 119.095C499.245 118.366 501.683 117.443 504.037 116.335L508.256 114.35C508.751 114.117 509.229 113.848 509.684 113.544L510.076 113.283C512.268 111.821 513.79 109.548 514.307 106.965L514.445 106.275C514.482 106.092 514.5 105.906 514.5 105.72C514.5 104.201 513.3 102.953 511.782 102.893L463.5 101L380 98L244.973 94.6364C241.335 94.5458 237.698 94.8526 234.127 95.5513L170.5 108L138 115.5L114.5 122Z" />
<path id="detail-3" class="group-el" d="M537.5 120.931C537.5 118.621 539.073 116.607 541.314 116.046L563.5 110.5L582.367 105.783C585.776 104.931 589.277 104.5 592.791 104.5V104.5C595.259 104.5 597.723 104.287 600.154 103.864L608 102.5L613.94 101.758C615.308 101.587 616.648 101.241 617.928 100.729L619.705 100.018C620.56 99.6762 621.335 99.1646 621.986 98.5141V98.5141C622.971 97.5286 624.236 96.8701 625.609 96.6279L629.941 95.8634C631.284 95.6263 632.668 95.7863 633.922 96.3237V96.3237C634.959 96.768 635.873 97.4558 636.587 98.3287L638.46 100.618C639.483 101.868 640.342 103.242 641.019 104.708L643 109V109C643.992 111.645 644.5 114.447 644.5 117.272V119V119C644.5 122.323 644.864 125.637 645.585 128.881L646.5 133L647.5 142V147V155L646.857 164.006C646.62 167.324 645.99 170.602 644.982 173.771L644.364 175.712C643.46 178.554 643 181.518 643 184.5V184.5V194.5V203V210.5L642 219L640 227V227C638.401 231.796 634.937 235.746 630.391 237.958L546.899 278.563C546.484 278.765 546 278.462 546 278V278V277.089C546 276.365 546.072 275.642 546.214 274.932V274.932C546.404 273.981 546.467 273.01 546.403 272.043L546 266L544.5 254V249.5V244.72C544.5 241.259 545.005 237.816 546 234.5V234.5L549.5 211.5L551.5 192.5V190.553C551.5 188.187 551.332 185.824 550.997 183.482L550.5 180L549.5 169L548 157L546 145.5L543 136L539.5 126.5L537.934 122.976C537.648 122.333 537.5 121.636 537.5 120.931V120.931Z" />
<path id="detail-4" class="group-el" d="M640 93.5L661.5 88.5L686 84L689.889 83.0278C689.963 83.0093 690.038 83 690.115 83V83C690.361 83 690.598 83.098 690.773 83.2725L691 83.5L691.049 83.5613C693.662 86.828 695.677 90.5313 697 94.5V94.5L699.5 101L701.5 107.5L703 114L704 122V124.324C704 127.765 703.645 131.198 702.94 134.567L699.5 151L690 181L680.5 206L680.118 207.146C679.383 209.352 678.144 211.356 676.5 213V213L675.858 213.578C672.963 216.184 669.772 218.442 666.353 220.308L655 226.5L640.835 233.338C640.615 233.445 640.371 233.5 640.126 233.5V233.5C639.232 233.5 638.5 232.776 638.5 231.882V231.882C638.5 231.631 638.558 231.383 638.671 231.158L639.865 228.77C640.287 227.926 640.615 227.038 640.844 226.123L641.5 223.5L642.5 220.5V220.5C643.164 217.843 643.5 215.115 643.5 212.377V212V207.5V202.5V190.5V183V183C643.5 181.67 643.631 180.343 643.892 179.039L644.143 177.785C644.381 176.597 644.714 175.43 645.139 174.295V174.295C645.711 172.77 646.116 171.186 646.347 169.573L646.5 168.5L647 164.5L647.5 158.5L648 151V145L647.5 140L647 134.5L646 129.5L645.5 127L645.493 126.959C645.165 124.99 645 122.997 645 121V121L644.5 116L644.472 115.746C644.158 112.926 643.496 110.156 642.5 107.5V107.5V107.5C641.836 105.839 640.975 104.264 639.935 102.809L639 101.5L637.5 99L635.5 96.5L635.059 95.8391C634.762 95.3935 634.923 94.7885 635.402 94.549V94.549C635.467 94.5165 635.536 94.492 635.607 94.4762L640 93.5Z" />
<path id="detail-5" class="group-el" d="M692 78.5L692.5 77L694.5 76L700.5 73.5L702 73L705 75L710.5 78.5L715 82L717.5 84.5L720.5 89.5L719.5 92L720.5 95.5L728 108.5L730 112L733 118.5L735 125L734 130L731.5 135L730 140.5L727 145L725 148.5L723.5 143L721.5 139.5L719.5 138L717.5 137H715L711.5 139L709 141.5L707 144.5L704 149.5L698.5 162L693.5 180.5L690 193.5L689.5 197.5L689 200.5L688 201.5L685 203H683V201L685.5 194.5L687.5 189.5L689 185L692 175.5L694 169L698.5 155L701.5 143L703.5 134L704 130L704.5 125L704 120.5L703.5 114.5L702 108.5L700.5 102.5L697 93.5L694.5 88L692.5 84.5L691.5 83L692 81V78.5Z" />
<path id="detail-6" class="group-el" d="M14 204L17 206.5L21.5 216.5L28.5 222.5L32 226V229.5L33.5 237.5L35.5 242L41 247L46.5 250.5L58 253.5L68.5 256L77.5 258H83L86 256L89 253L91 250.5H94L97 252V254.5L100 260L103.5 263L117 266L133 268H148.5H162.5L173 266L183 261.5L191.5 256L198 253H205H230H244H254H261.5L264 250.5L271 246.5L277 244.5H284H288.5V248V252H295.5H316.5L334 250.5L351 248L367 240.5L379.5 233.5L388.5 227L394.5 219.5L403 209L407 204L410.5 200.5H414.5L425.5 204L432 206L437 209L439.5 212V215L432 224L423 237L415.5 252L410.5 264.5L404.5 282.5L398.5 312L394.5 336L393 348L392 368V377L381 380L353 386.5L311.5 392H301L290.5 390.5L272.5 386.5L252 383L232.5 380L214 377L191.5 375L177.5 373L152 367.5L118.5 360.5L79 350.5L63.5 345.5L51.5 341.5L41 338.5L32 333.5L26.5 328L19.5 326L12.5 323L4.5 319.5L0.5 314L4.5 307.5L11 294.5L12.5 290L4.5 261L2 253.5L0.5 247L2 239.5V229.5V224.5L4.5 219L8.5 213L12 207.5L14 204Z" />
</svg>
</div>
<div class="priceHome">
<div class="priceHome__det priceHome__det1">
<ul class="det1__category-list">
<li class="category-list__category-item" id="category-1">
<div class="category-item">
<button type="button" class="category-item__btn">
полировка
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="https://i.postimg.cc/4yc6tXH0/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-1">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-2">
<div class="category-item">
<button type="button" class="category-item__btn">
глубокие царапины
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-2">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-3">
<div class="category-item">
<button type="button" class="category-item__btn">
небольшая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-3">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-4">
<div class="category-item">
<button type="button" class="category-item__btn">
большая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-4">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="priceHome__det priceHome__det2">
<ul class="det1__category-list">
<li class="category-list__category-item" id="category-1">
<div class="category-item">
<button type="button" class="category-item__btn">
полировка
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-1">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
1000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-2">
<div class="category-item">
<button type="button" class="category-item__btn">
глубокие царапины
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-2">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
1000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-3">
<div class="category-item">
<button type="button" class="category-item__btn">
небольшая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-3">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
1000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-4">
<div class="category-item">
<button type="button" class="category-item__btn">
большая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-4">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
1000 руб.
</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="priceHome__det priceHome__det3">
<ul class="det1__category-list">
<li class="category-list__category-item" id="category-1">
<div class="category-item">
<button type="button" class="category-item__btn">
полировка
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-1">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
2000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-2">
<div class="category-item">
<button type="button" class="category-item__btn">
глубокие царапины
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-2">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
2000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-3">
<div class="category-item">
<button type="button" class="category-item__btn">
небольшая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-3">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
2000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-4">
<div class="category-item">
<button type="button" class="category-item__btn">
большая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-4">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
2000 руб.
</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="priceHome__det priceHome__det4">
<ul class="det1__category-list">
<li class="category-list__category-item" id="category-1">
<div class="category-item">
<button type="button" class="category-item__btn">
полировка
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-1">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-2">
<div class="category-item">
<button type="button" class="category-item__btn">
глубокие царапины
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-2">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-3">
<div class="category-item">
<button type="button" class="category-item__btn">
небольшая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-3">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-4">
<div class="category-item">
<button type="button" class="category-item__btn">
большая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-4">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="priceHome__det priceHome__det5">
<ul class="det1__category-list">
<li class="category-list__category-item" id="category-1">
<div class="category-item">
<button type="button" class="category-item__btn">
полировка
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-1">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-2">
<div class="category-item">
<button type="button" class="category-item__btn">
глубокие царапины
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-2">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-3">
<div class="category-item">
<button type="button" class="category-item__btn">
небольшая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-3">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-4">
<div class="category-item">
<button type="button" class="category-item__btn">
большая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-4">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="priceHome__det priceHome__det6">
<ul class="det1__category-list">
<li class="category-list__category-item" id="category-1">
<div class="category-item">
<button type="button" class="category-item__btn">
полировка
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-1">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-2">
<div class="category-item">
<button type="button" class="category-item__btn">
глубокие царапины
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-2">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-3">
<div class="category-item">
<button type="button" class="category-item__btn">
небольшая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-3">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
<li class="category-list__category-item" id="category-4">
<div class="category-item">
<button type="button" class="category-item__btn">
большая вмятина
</button>
<button type="button" class="category-item__btn-arrowRight">
<img src="img/category-arrowright.png" class="btn-arrowRight__icon" alt="">
</button>
</div>
<ul class="category-list__submenu" id="submenu-4">
<li class="submenu__item">
<div class="submenu__bg">
<p class="submenu__price">
3000 руб.
</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>.carsHome__basicCar {
position: relative;
}
.basicCar__img {
width: 780px;
display: block;
}
.car-hovers {
position: absolute;
top: 0;
left: 0;
width: 780px;
}
.car-hovers__group {
position: absolute;
top: 52px;
left: 18px;
}
.group-el {
fill-opacity: 0;
fill: #149808;
transition: 1s;
}
.group-el:hover {
fill-opacity: 0.3;
transition: 1s;
}
.group-el.active {
fill-opacity: 0.8;
}
.priceHome {
position: absolute;
bottom: 0;
right: 500px;
}
.priceHome__det {
display: none;
}
.category-list__category-item {
transition: 1s;
}
.category-list__category-item:not(:last-of-type) {
margin-bottom: 5px;
}
.category-item {
width: 393px;
height: 60px;
background: linear-gradient(180deg, rgba(217, 217, 217, 0.8) 0%, rgba(217, 217, 217, 0.248) 100%);
border: 1.5px solid #282828;
border-radius: 1px;
display: flex;
align-items: center;
position: relative;
clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
}
.category-item::after {
position: absolute;
content: '';
display: block;
height: 2.5px;
width: 100px;
background: #282828;
transform: rotate(298deg);
top: 32px;
right: -33px;
}
.category-item__btn {
color: #FFFFFF;
font-family: 'Tkachenko Sketch 4F';
font-weight: 400;
font-size: 36px;
line-height: 36px;
width: 319px;
height: 51px;
padding-left: 10px;
text-align: left;
clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
margin-left: -1px;
background: linear-gradient(180deg, #252525 0%, rgba(31, 30, 30, 0.74) 100%);
}
.category-item__btn-arrowRight {
margin-left: 13px;
}
.btn-arrowRight__icon {
display: block;
width: 28px;
}
.category-list__submenu {
position: absolute;
opacity: 0;
right: -270px;
}
#submenu-1 {
top: 5px;
}
#submenu-2 {
top: 70px;
}
#submenu-3 {
top: 135px;
}
#submenu-4 {
top: 200px;
}
.submenu__item {
width: 280px;
height: 50px;
background: linear-gradient(180deg, rgba(217, 217, 217, 0.8) 0%, rgba(217, 217, 217, 0.248) 100%);
border: 1.5px solid #282828;
border-radius: 1px;
display: flex;
align-items: center;
position: relative;
transform: skew(331deg);
}
.submenu__bg {
background: linear-gradient(180deg, #252525 0%, rgba(31, 30, 30, 0.74) 100%);
width: 221px;
height: 43px;
display: flex;
align-items: center;
padding-left: 10px;
}
.submenu__price {
transform: skew(24deg);
font-size: 36px;
}
#category-1:hover>#submenu-1,
#category-2:hover>#submenu-2,
#category-3:hover>#submenu-3,
#category-4:hover>#submenu-4 {
opacity: 1;
transition: 1s;
}$('path').click(function(){
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$('.priceHome__det1').css({'display' : 'none'});
} else {
$(this).addClass("active");
$('.priceHome__det1').css({'display' : 'block'});
}
});
External CSS
This Pen doesn't use any external CSS resources.