Task 2 | feat add page about and fix styles

project_cosmopet
parent 8c51488478
commit 8af2afc108
  1. 173
      assets/css/style.css
  2. 10
      assets/img/advantage1.svg
  3. 25
      assets/img/advantage2.svg
  4. 25
      assets/img/advantage3.svg
  5. 1
      assets/img/etaps_right.svg
  6. BIN
      assets/img/protein.png
  7. 21
      index.html
  8. 2
      return.html

@ -1835,7 +1835,7 @@ body:has(.modal_open) .modal_back{
z-index: 1; z-index: 1;
} }
.hero .cont{ .hero .cont{
padding-top: 151px; padding-top: 245px;
padding-bottom: 132px; padding-bottom: 132px;
position: relative; position: relative;
} }
@ -1847,7 +1847,7 @@ body:has(.modal_open) .modal_back{
mix-blend-mode: soft-light; mix-blend-mode: soft-light;
} }
.hero_title{ .hero_title{
font-size: 96px; font-size: 82px;
font-weight: 700; font-weight: 700;
line-height: normal; line-height: normal;
text-transform: uppercase; text-transform: uppercase;
@ -1890,7 +1890,7 @@ body:has(.modal_open) .modal_back{
font-weight: 700; font-weight: 700;
line-height: 110.5%; line-height: 110.5%;
text-transform: uppercase; text-transform: uppercase;
margin: 0 0 25px 0; margin: 0 0 15px 0;
color: var(--grey-black); color: var(--grey-black);
} }
.description{ .description{
@ -1924,6 +1924,9 @@ body:has(.modal_open) .modal_back{
width: 435px; width: 435px;
max-width: calc(50% - 15px); max-width: calc(50% - 15px);
} }
.advantage_item:last-child .advantage_title, .advantage_item:last-child .description:not(.for_border .description){
width: 100%;
}
.advantage_title{ .advantage_title{
font-size: 36px; font-size: 36px;
font-weight: 700; font-weight: 700;
@ -1931,19 +1934,24 @@ body:has(.modal_open) .modal_back{
text-transform: uppercase; text-transform: uppercase;
color: var(--grey-black); color: var(--grey-black);
margin: 0 0 24px 0; margin: 0 0 24px 0;
z-index: 0; width: 85%;
} }
.advantage_image{ .advantage_image{
position: absolute; position: absolute;
left: 0; left: 0;
z-index: -1; z-index: -1;
top: -170px; top: -130px;
max-width: 234px;
max-height: 234px;
}
.advantage_item .description:not(.for_border .description){
width: 80%;
} }
.advantage_image2{ .advantage_image2{
width: 100%; width: 100%;
} }
.advantage_row .advantage_item:nth-child(2) .advantage_image{ .advantage_row .advantage_item:nth-child(3) .advantage_image{
top: -130px; top: -165px;
} }
.advantage_row .advantage_item:nth-child(3){ .advantage_row .advantage_item:nth-child(3){
margin: 82px 0 0 0; margin: 82px 0 0 0;
@ -1978,7 +1986,40 @@ body:has(.modal_open) .modal_back{
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
z-index: -1; z-index: -1;
animation: rotateAnimation 10s infinite;
} }
@keyframes rotateAnimation {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(45deg);
}
100% {
transform: rotate(0deg);
}
}
.protein .description{
position: absolute;
z-index: 1;
}
.protein .description:first-child{
left: 16px;
top: -23px;
}
.protein .description:nth-child(2){
top: -25px;
right: 0;
}
.protein .description:nth-child(3){
left: 0;
bottom: 112px;
}
.protein .description:nth-child(4){
right: 0;
bottom: 113px;
}
.diagram{ .diagram{
margin: 0 0 200px 0; margin: 0 0 200px 0;
} }
@ -2001,6 +2042,8 @@ body:has(.modal_open) .modal_back{
gap: 120px; gap: 120px;
justify-content: flex-start; justify-content: flex-start;
margin: 135px 0 100px 0; margin: 135px 0 100px 0;
position: relative;
padding-right: 252px;
} }
.etaps_col{ .etaps_col{
display: flex; display: flex;
@ -2013,6 +2056,16 @@ body:has(.modal_open) .modal_back{
align-items: flex-start; align-items: flex-start;
gap: 25px; gap: 25px;
} }
.etap_item:nth-child(2) .description{
max-width: 67%;
}
.etaps_anim{
max-width: 252px;
position: absolute;
right: 0;
top: 50%;
transform: translate(0,-50%);
}
.faq_section{ .faq_section{
background: radial-gradient(358.38% 263.16% at 123.55% -27.98%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%); background: radial-gradient(358.38% 263.16% at 123.55% -27.98%, #0F5881 0%, #1EA49C 36.98%, #76CE75 66.67%, #ECF39F 91.15%);
padding: 140px 0 160px 0; padding: 140px 0 160px 0;
@ -2413,6 +2466,18 @@ body:has(.modal_open) .modal_back{
.advantage_title { .advantage_title {
font-size: 28px; font-size: 28px;
} }
.protein .description:nth-child(4) {
bottom: 98px;
}
.protein .description:nth-child(3) {
bottom: 98px;
}
.etaps_anim{
display: none;
}
.etaps_row{
padding-right: 0;
}
} }
@media only screen and (max-width: 776px){ @media only screen and (max-width: 776px){
@ -2759,11 +2824,14 @@ body:has(.modal_open) .modal_back{
max-height: 150px; max-height: 150px;
width: 100%; width: 100%;
height: auto; height: auto;
object-fit: cover; object-fit: contain;
top: -100px; top: -100px;
} }
.advantage_row .advantage_item:nth-child(2) .advantage_image { .advantage_row .advantage_item:nth-child(2) .advantage_image {
top: -65px; top: -108px;
}
.advantage_row .advantage_item:nth-child(3) .advantage_image {
top: -115px;
} }
.for_border .advantage_item{ .for_border .advantage_item{
padding: 25px 24px 25px 30px; padding: 25px 24px 25px 30px;
@ -2798,6 +2866,9 @@ body:has(.modal_open) .modal_back{
margin: 150px 0 100px 0; margin: 150px 0 100px 0;
gap: 90px; gap: 90px;
} }
.advantage_title:not(.advantage_row2 .advantage_title){
width: 54%;
}
.etaps_row { .etaps_row {
margin: 80px 0; margin: 80px 0;
} }
@ -2810,6 +2881,18 @@ body:has(.modal_open) .modal_back{
.advantage_title { .advantage_title {
font-size: 20px; font-size: 20px;
} }
.protein .description:first-child {
top: -16px;
}
.protein .description:nth-child(2) {
top: -16px;
}
.protein .description:nth-child(3) {
bottom: 78px;
}
.protein .description:nth-child(4) {
bottom: 78px;
}
} }
@media only screen and (max-width: 576px){ @media only screen and (max-width: 576px){
@ -3397,7 +3480,7 @@ body:has(.modal_open) .modal_back{
} }
.description{ .description{
font-size: 12px; font-size: 12px;
line-height: 100%; line-height: 115%;
} }
.main_link { .main_link {
font-size: 12px; font-size: 12px;
@ -3407,21 +3490,19 @@ body:has(.modal_open) .modal_back{
padding: 7px; padding: 7px;
} }
.hero .cont { .hero .cont {
padding-top: 0; padding-top: 217px;
padding-bottom: 54px; padding-bottom: 54px;
} }
.hero_block { .hero_block {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end; justify-content: flex-end;
min-height: 66svh;
gap: 18px; gap: 18px;
padding: 0 0 54px 0; padding: 0 0 54px 0;
} }
.hero_title { .hero_title {
font-size: 32px; font-size: 32px;
width: 100%; width: 100%;
word-break: break-word;
padding: 0; padding: 0;
} }
@ -3457,12 +3538,27 @@ body:has(.modal_open) .modal_back{
} }
.advantage_title { .advantage_title {
font-size: 12px; font-size: 12px;
margin: 0 0 2px 0; margin: 0 0 5px 0;
}
.advantage_image2{
margin: 10px 0 0 0;
} }
.advantage_image{ .advantage_image{
max-width: 87px; max-width: 87px;
max-height: 87px; max-height: 87px;
top: -68px; top: -55px;
}
.advantage_row .advantage_item:nth-child(2) .advantage_image {
top: -58px;
}
.advantage_row .advantage_item:nth-child(3) .advantage_image {
top: -70px;
}
.advantage_item .description:not(.for_border .description) {
width: 84%;
}
.for_border .advantage_item .description{
line-height: 115%;
} }
.advantage_row { .advantage_row {
margin: 90px 0 70px 0; margin: 90px 0 70px 0;
@ -3489,6 +3585,15 @@ body:has(.modal_open) .modal_back{
} }
.diagram_texts{ .diagram_texts{
margin: 30px 0 10px 0; margin: 30px 0 10px 0;
gap: 19px;
}
.diagram_texts .description {
width: 26.3%;
}
.diagram img {
width: 110%;
left: -5%;
position: relative;
} }
.etaps_row { .etaps_row {
margin: 10px 0 0 0; margin: 10px 0 0 0;
@ -3503,11 +3608,11 @@ body:has(.modal_open) .modal_back{
gap: 5px; gap: 5px;
} }
.etap_item img{ .etap_item img{
max-width: 30px; width: 29px;
max-height: 30px; height: 26px;
height: auto; }
width: 100%; .etap_item .description{
object-fit: cover; line-height: 135%;
} }
.etaps_col { .etaps_col {
gap: 50px; gap: 50px;
@ -3540,6 +3645,27 @@ body:has(.modal_open) .modal_back{
width: 17px; width: 17px;
height: 17px; height: 17px;
} }
.protein .description{
max-width: 106px;
}
.protein .description:first-child {
top: -25px;
}
.protein .description:nth-child(2) {
top: -25px;
}
.protein .description:nth-child(3) {
bottom: 59px;
}
.protein .description:nth-child(4) {
bottom: 57px;
}
.protein::before{
top: -15%;
}
.etap_item:nth-child(2) .description {
max-width: 100%;
}
} }
@media only screen and (min-width: 576px){ @media only screen and (min-width: 576px){
@ -3618,4 +3744,11 @@ body:has(.modal_open) .modal_back{
margin: 0 -22px 0 0; margin: 0 -22px 0 0;
gap: 1px; gap: 1px;
} }
.protein .description:nth-child(3) {
bottom: 48px;
}
.protein .description:nth-child(4) {
bottom: 46px;
right: -25px;
}
} }

@ -1,9 +1 @@
<svg width="234" height="234" viewBox="0 0 234 234" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="ehLxXUyeP0H1" viewBox="0 0 212 212"><style> #ehLxXUyeP0H2_tr {animation: ehLxXUyeP0H2_tr__tr 80000ms linear infinite normal forwards}@keyframes ehLxXUyeP0H2_tr__tr { 0% {transform: translate(105.523003px,105.523003px) rotate(0deg)} 100% {transform: translate(105.523003px,105.523003px) rotate(359.999997deg)}} </style><defs><linearGradient id="ehLxXUyeP0H2-fill" x1="8.11966" y1="144.395" x2="51.5715" y2="35.1744" spreadMethod="pad" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0)"><stop id="ehLxXUyeP0H2-fill-0" offset="0%" stop-color="#f44242"></stop><stop id="ehLxXUyeP0H2-fill-1" offset="100%" stop-color="#569ef0"></stop></linearGradient></defs><g id="ehLxXUyeP0H2_tr" transform="translate(105.523003,105.523003) rotate(0)"><path d="M78.1944,29.8172C78.1944,14.438,90.446,2,105.523,2s27.329,12.438,27.329,27.8172-12.252,27.8171-27.329,27.8171-27.3286-12.438-27.3286-27.8171ZM105.523,0C89.3093,0,76.1944,13.3658,76.1944,29.8172c0,2.279.2517,4.4989.7285,6.6322-1.1768-1.8772-2.5818-3.6522-4.215-5.2854-11.6886-11.6886-30.6395-11.6885-42.3281,0s-11.6887,30.6396-.0001,42.3282c1.6588,1.6587,3.4638,3.0821,5.3735,4.27-1.9184-.3875-3.9035-.5909-5.9361-.5909C13.3495,77.1713,0,90.5209,0,106.988c-.000002,16.468,13.3495,29.818,29.8171,29.818c1.2223,0,2.4273-.074,3.6111-.217-.7804.637-1.5361,1.319-2.2636,2.047-11.6886,11.689-11.6887,30.64-.0001,42.328c11.6886,11.689,30.6396,11.689,42.3282,0c1.0714-1.071,2.0446-2.204,2.9195-3.386-.1437,1.197-.2178,2.415-.2178,3.651c0,16.452,13.1149,29.817,29.3286,29.817c16.214,0,29.329-13.365,29.329-29.817c0-1.383-.093-2.744-.272-4.078.926,1.283,1.967,2.509,3.122,3.664c11.689,11.689,30.64,11.689,42.329,0c11.688-11.688,11.688-30.639,0-42.328-.655-.655-1.333-1.273-2.03-1.854c1.06.114,2.137.173,3.228.173c16.468,0,29.817-13.35,29.817-29.818c0-16.4671-13.349-29.8167-29.817-29.8167-1.838,0-3.638.1664-5.384.4849c1.761-1.135,3.429-2.4733,4.97-4.0149c11.689-11.6886,11.689-30.6395,0-42.3281-11.688-11.6886-30.639-11.6886-42.328,0-1.773,1.7732-3.277,3.7136-4.513,5.7704.574-2.3263.878-4.7606.878-7.2664C134.852,13.3658,121.737,0,105.523,0Zm25.064,45.3085c-5.145,8.5862-14.439,14.3258-25.064,14.3258-10.4233,0-19.5659-5.5239-24.7667-13.8402c2.1513,9.6608-.5315,20.1812-8.0484,27.6981-7.3766,7.3766-17.6457,10.0979-27.1564,8.1638c8.455,5.2626,14.0828,14.6403,14.0828,25.332c0,9.318-4.2738,17.637-10.968,23.105c8.8294-1.082,18.0488,1.765,24.8264,8.543c6.7493,6.749,9.6014,15.92,8.5562,24.716c5.3475-7.247,13.8668-11.94,23.4741-11.94c9.73,0,18.344,4.813,23.677,12.218-1.19-8.925,1.644-18.284,8.503-25.143c6.679-6.68,15.73-9.542,24.443-8.587-6.56-5.47-10.734-13.703-10.734-22.912c0-10.5203,5.449-19.7684,13.678-25.0758-9.354,1.7199-19.369-1.037-26.603-8.2709-7.682-7.6818-10.315-18.5004-7.9-28.3328ZM37.7241,133.666c1.8722-1.048,3.8331-1.879,5.8459-2.492c8.4003-4.788,14.0643-13.825,14.0643-24.186c0-15.3626-12.4542-27.8167-27.8172-27.8167s-27.8171,12.4541-27.8171,27.8167c0,15.363,12.4541,27.818,27.8171,27.818c2.7468,0,5.4007-.399,7.907-1.14Zm-5.1453,6.384c1.8118-1.812,3.8106-3.323,5.9343-4.532c2.0513-.625,4.0089-1.465,5.8464-2.493c9.5052-2.82,20.2156-.478,27.719,7.025c10.9075,10.908,10.9075,28.592,0,39.5-10.9076,10.907-28.5922,10.907-39.4997,0-10.9076-10.908-10.9076-28.592,0-39.5ZM181.229,79.1713c15.363,0,27.817,12.4541,27.817,27.8167c0,15.363-12.454,27.818-27.817,27.818-2.459,0-4.844-.32-7.115-.919-2.307-1.367-4.758-2.398-7.283-3.093-8.044-4.875-13.419-13.713-13.419-23.806c0-15.3626,12.454-27.8167,27.817-27.8167Zm-7.904,56.5757c-2.585-.709-5.03-1.757-7.283-3.094-9.303-2.463-19.63-.047-26.925,7.248-10.908,10.908-10.908,28.592,0,39.5c10.907,10.908,28.592,10.908,39.499,0c10.908-10.908,10.908-28.592,0-39.5-1.627-1.627-3.406-3.012-5.291-4.154ZM78.1944,181.229c0-15.379,12.2516-27.817,27.3286-27.817s27.329,12.438,27.329,27.817-12.252,27.817-27.329,27.817-27.3286-12.438-27.3286-27.817ZM71.2937,32.5782c10.9075,10.9076,10.9075,28.5922,0,39.4998-10.9076,10.9075-28.5922,10.9075-39.4998,0-10.9075-10.9076-10.9075-28.5922.0001-39.4997s28.5921-10.9076,39.4997-.0001ZM179.401,72.2271c-10.908,10.9076-28.592,10.9076-39.5,0-10.907-10.9075-10.907-28.5922,0-39.4997c10.908-10.9076,28.592-10.9075,39.5,0s10.908,28.5922,0,39.4997Z" transform="translate(-105.523003,-105.523003)" clip-rule="evenodd" fill="url(#ehLxXUyeP0H2-fill)" fill-rule="evenodd"></path></g></svg>
<path fill-rule="evenodd" clip-rule="evenodd" d="M88.1944 40.8172C88.1944 25.438 100.446 13 115.523 13C130.6 13 142.852 25.438 142.852 40.8172C142.852 56.1963 130.6 68.6343 115.523 68.6343C100.446 68.6343 88.1944 56.1963 88.1944 40.8172ZM115.523 11C99.3093 11 86.1944 24.3658 86.1944 40.8172C86.1944 43.0962 86.4461 45.3161 86.9229 47.4494C85.7461 45.5722 84.3411 43.7972 82.7079 42.164C71.0193 30.4754 52.0684 30.4755 40.3798 42.164C28.6912 53.8526 28.6911 72.8036 40.3797 84.4922C42.0385 86.1509 43.8435 87.5743 45.7532 88.7622C43.8348 88.3747 41.8497 88.1713 39.8171 88.1713C23.3495 88.1713 10 101.521 10 117.988C10 134.456 23.3495 147.806 39.8171 147.806C41.0394 147.806 42.2444 147.732 43.4282 147.589C42.6478 148.226 41.8921 148.908 41.1646 149.636C29.476 161.325 29.4759 180.276 41.1645 191.964C52.8531 203.653 71.8041 203.653 83.4927 191.964C84.5641 190.893 85.5373 189.76 86.4122 188.578C86.2685 189.775 86.1944 190.993 86.1944 192.229C86.1944 208.681 99.3093 222.046 115.523 222.046C131.737 222.046 144.852 208.681 144.852 192.229C144.852 190.846 144.759 189.485 144.58 188.151C145.506 189.434 146.547 190.66 147.702 191.815C159.391 203.504 178.342 203.504 190.031 191.815C201.719 180.127 201.719 161.176 190.031 149.487C189.376 148.832 188.698 148.214 188.001 147.633C189.061 147.747 190.138 147.806 191.229 147.806C207.697 147.806 221.046 134.456 221.046 117.988C221.046 101.521 207.697 88.1713 191.229 88.1713C189.391 88.1713 187.591 88.3377 185.845 88.6562C187.606 87.5212 189.274 86.1829 190.815 84.6413C202.504 72.9527 202.504 54.0018 190.815 42.3132C179.127 30.6246 160.176 30.6246 148.487 42.3132C146.714 44.0864 145.21 46.0268 143.974 48.0836C144.548 45.7573 144.852 43.323 144.852 40.8172C144.852 24.3658 131.737 11 115.523 11ZM140.587 56.3085C135.442 64.8947 126.148 70.6343 115.523 70.6343C105.1 70.6343 95.9571 65.1104 90.7563 56.7941C92.9076 66.4549 90.2248 76.9753 82.7079 84.4922C75.3313 91.8688 65.0622 94.5901 55.5515 92.656C64.0065 97.9186 69.6343 107.296 69.6343 117.988C69.6343 127.306 65.3605 135.625 58.6663 141.093C67.4957 140.011 76.7151 142.858 83.4927 149.636C90.242 156.385 93.0941 165.556 92.0489 174.352C97.3964 167.105 105.916 162.412 115.523 162.412C125.253 162.412 133.867 167.225 139.2 174.63C138.01 165.705 140.844 156.346 147.703 149.487C154.382 142.807 163.433 139.945 172.146 140.9C165.586 135.43 161.412 127.197 161.412 117.988C161.412 107.468 166.861 98.2196 175.09 92.9122C165.736 94.6321 155.721 91.8752 148.487 84.6413C140.805 76.9595 138.172 66.1409 140.587 56.3085ZM47.7241 144.666C49.5963 143.618 51.5572 142.787 53.57 142.174C61.9703 137.386 67.6343 128.349 67.6343 117.988C67.6343 102.625 55.1801 90.1713 39.8171 90.1713C24.4541 90.1713 12 102.625 12 117.988C12 133.351 24.4541 145.806 39.8171 145.806C42.5639 145.806 45.2178 145.407 47.7241 144.666ZM42.5788 151.05C44.3906 149.238 46.3894 147.727 48.5131 146.518C50.5644 145.893 52.522 145.053 54.3595 144.025C63.8647 141.205 74.5751 143.547 82.0785 151.05C92.986 161.958 92.986 179.642 82.0785 190.55C71.1709 201.457 53.4863 201.457 42.5788 190.55C31.6712 179.642 31.6712 161.958 42.5788 151.05ZM191.229 90.1713C206.592 90.1713 219.046 102.625 219.046 117.988C219.046 133.351 206.592 145.806 191.229 145.806C188.77 145.806 186.385 145.486 184.114 144.887C181.807 143.52 179.356 142.489 176.831 141.794C168.787 136.919 163.412 128.081 163.412 117.988C163.412 102.625 175.866 90.1713 191.229 90.1713ZM183.325 146.747C180.74 146.038 178.295 144.99 176.042 143.653C166.739 141.19 156.412 143.606 149.117 150.901C138.209 161.809 138.209 179.493 149.117 190.401C160.024 201.309 177.709 201.309 188.616 190.401C199.524 179.493 199.524 161.809 188.616 150.901C186.989 149.274 185.21 147.889 183.325 146.747ZM88.1944 192.229C88.1944 176.85 100.446 164.412 115.523 164.412C130.6 164.412 142.852 176.85 142.852 192.229C142.852 207.608 130.6 220.046 115.523 220.046C100.446 220.046 88.1944 207.608 88.1944 192.229ZM81.2937 43.5782C92.2012 54.4858 92.2012 72.1704 81.2937 83.078C70.3861 93.9855 52.7015 93.9855 41.7939 83.078C30.8864 72.1704 30.8864 54.4858 41.794 43.5783C52.7015 32.6707 70.3861 32.6707 81.2937 43.5782ZM189.401 83.2271C178.493 94.1347 160.809 94.1347 149.901 83.2271C138.994 72.3196 138.994 54.6349 149.901 43.7274C160.809 32.8198 178.493 32.8199 189.401 43.7274C200.309 54.635 200.309 72.3196 189.401 83.2271Z" fill="url(#paint0_linear_1981_7829)"/>
<defs>
<linearGradient id="paint0_linear_1981_7829" x1="18.1197" y1="155.395" x2="61.5715" y2="46.1744" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB

@ -1,24 +1 @@
<svg width="212" height="213" viewBox="0 0 212 213" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="eAbSZFt1Mvj1" viewBox="0 0 212 213.01"><style> #eAbSZFt1Mvj4_to {animation: eAbSZFt1Mvj4_to__to 40000ms linear infinite normal forwards}@keyframes eAbSZFt1Mvj4_to__to { 0% {transform: translate(107.122537px,158.225498px)} 50% {transform: translate(107.122537px,53.225498px)} 100% {transform: translate(107.122537px,158.225498px)}} #eAbSZFt1Mvj5_to {animation: eAbSZFt1Mvj5_to__to 40000ms linear infinite normal forwards}@keyframes eAbSZFt1Mvj5_to__to { 0% {transform: translate(106.132898px,132.1339px)} 50% {transform: translate(106.132898px,79.1339px)} 100% {transform: translate(106.132898px,132.1339px)}} #eAbSZFt1Mvj6_to {animation: eAbSZFt1Mvj6_to__to 40000ms linear infinite normal forwards}@keyframes eAbSZFt1Mvj6_to__to { 0% {transform: translate(105.836395px,184.837502px)} 50% {transform: translate(105.836395px,27.203493px)} 100% {transform: translate(105.836395px,184.837502px)}} </style><defs><linearGradient id="eAbSZFt1Mvj3-stroke" x1="9.06531" y1="144.428" x2="52.2262" y2="35.9389" spreadMethod="pad" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0)"><stop id="eAbSZFt1Mvj3-stroke-0" offset="0%" stop-color="#f44242"></stop><stop id="eAbSZFt1Mvj3-stroke-1" offset="100%" stop-color="#569ef0"></stop></linearGradient><linearGradient id="eAbSZFt1Mvj4-stroke" x1="57.6654" y1="177.531" x2="79.2455" y2="123.288" spreadMethod="pad" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0)"><stop id="eAbSZFt1Mvj4-stroke-0" offset="0%" stop-color="#f44242"></stop><stop id="eAbSZFt1Mvj4-stroke-1" offset="100%" stop-color="#569ef0"></stop></linearGradient><linearGradient id="eAbSZFt1Mvj5-stroke" x1="33.6731" y1="161.051" x2="65.9975" y2="79.8004" spreadMethod="pad" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0)"><stop id="eAbSZFt1Mvj5-stroke-0" offset="0%" stop-color="#f44242"></stop><stop id="eAbSZFt1Mvj5-stroke-1" offset="100%" stop-color="#569ef0"></stop></linearGradient><linearGradient id="eAbSZFt1Mvj6-stroke" x1="81.6491" y1="194.49" x2="92.4392" y2="167.368" spreadMethod="pad" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0)"><stop id="eAbSZFt1Mvj6-stroke-0" offset="0%" stop-color="#f44242"></stop><stop id="eAbSZFt1Mvj6-stroke-1" offset="100%" stop-color="#569ef0"></stop></linearGradient></defs><g transform="translate(.1835 0.484508)"><path d="M105.817,210.633c57.888,0,104.816-46.928,104.816-104.816c0-57.8889-46.928-104.817014-104.816-104.817009C47.928,0.999996,1,47.9281,1.00001,105.817c0,57.888,46.92799,104.816,104.81699,104.816Z" fill="none" stroke="url(#eAbSZFt1Mvj3-stroke)" stroke-width="2" stroke-miterlimit="10"></path><g id="eAbSZFt1Mvj4_to" transform="translate(107.122537,158.225498)"><path d="M106.04,210.633c28.944,0,52.408-23.463,52.408-52.407s-23.464-52.408-52.408-52.408c-28.9436,0-52.4072,23.464-52.4072,52.408s23.4636,52.407,52.4072,52.407Z" transform="translate(-106.040394,-158.225498)" fill="none" stroke="url(#eAbSZFt1Mvj4-stroke)" stroke-width="2" stroke-miterlimit="10"></path></g><g id="eAbSZFt1Mvj5_to" transform="translate(106.132898,132.1339)"><path d="M106.133,210.634c43.354,0,78.5-35.146,78.5-78.5c0-43.3545-35.146-78.5002-78.5-78.5002-43.3546,0-78.5002,35.1457-78.5002,78.5002c0,43.354,35.1456,78.5,78.5002,78.5Z" transform="translate(-106.132898,-132.1339)" fill="none" stroke="url(#eAbSZFt1Mvj5-stroke)" stroke-width="2" stroke-miterlimit="10"></path></g><g id="eAbSZFt1Mvj6_to" transform="translate(105.836395,184.837502)"><path d="M105.837,211.041c14.471,0,26.203-11.731,26.203-26.203s-11.732-26.204-26.203-26.204c-14.4724,0-26.2042,11.732-26.2042,26.204s11.7318,26.203,26.2042,26.203Z" transform="translate(-105.836395,-184.837502)" fill="none" stroke="url(#eAbSZFt1Mvj6-stroke)" stroke-width="2" stroke-miterlimit="10"></path></g></g></svg>
<path d="M105.817 1.40781C163.705 1.40781 210.633 48.3357 210.633 106.224C210.633 164.113 163.705 211.041 105.817 211.041C47.928 211.041 0.999996 164.113 0.999991 106.224C0.999986 48.3357 47.9279 1.40782 105.817 1.40781Z" stroke="url(#paint0_linear_1981_8087)" stroke-width="2" stroke-miterlimit="10"/>
<path d="M106.04 1.40764C134.984 1.40764 158.448 24.8712 158.448 53.8151C158.448 82.7589 134.984 106.223 106.04 106.223C77.0964 106.223 53.6328 82.759 53.6328 53.8151C53.6328 24.8712 77.0964 1.40764 106.04 1.40764Z" stroke="url(#paint1_linear_1981_8087)" stroke-width="2" stroke-miterlimit="10"/>
<path d="M106.133 1.40821C149.487 1.40821 184.633 36.5537 184.633 79.9081C184.633 123.262 149.487 158.408 106.133 158.408C62.7784 158.408 27.6328 123.262 27.6328 79.9081C27.6328 36.5538 62.7784 1.40822 106.133 1.40821Z" stroke="url(#paint2_linear_1981_8087)" stroke-width="2" stroke-miterlimit="10"/>
<path d="M105.837 1.0007C120.308 1.00069 132.04 12.7325 132.04 27.2044C132.04 41.6763 120.308 53.4082 105.837 53.4082C91.3646 53.4082 79.6328 41.6764 79.6328 27.2044C79.6328 12.7325 91.3646 1.0007 105.837 1.0007Z" stroke="url(#paint3_linear_1981_8087)" stroke-width="2" stroke-miterlimit="10"/>
<defs>
<linearGradient id="paint0_linear_1981_8087" x1="9.06528" y1="67.6127" x2="52.2262" y2="176.102" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
<linearGradient id="paint1_linear_1981_8087" x1="57.6654" y1="34.5096" x2="79.2455" y2="88.7535" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
<linearGradient id="paint2_linear_1981_8087" x1="33.6731" y1="50.9909" x2="65.9975" y2="132.242" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
<linearGradient id="paint3_linear_1981_8087" x1="81.6491" y1="17.5517" x2="92.4392" y2="44.6736" gradientUnits="userSpaceOnUse">
<stop stop-color="#F44242"/>
<stop offset="1" stop-color="#569EF0"/>
</linearGradient>
</defs>
</svg>

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 126 KiB

File diff suppressed because one or more lines are too long

@ -95,7 +95,7 @@
</span> </span>
<input type="number" value="1" min="1" max="100"> <input type="number" value="1" min="1" max="100">
<span class="plus"> <span class="plus">
<img src="assets/img/icons/i-plus.svg" alt=""> <img src="assets/img/icons/i-minus.svg" alt="">
</span> </span>
шт шт
</div> </div>

Loading…
Cancel
Save