Good-Production
/
triumf-landing
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added step-by-step

Browse Source
gh-pages
Aliaksei Karzhou 1 year ago
parent 32e6628824
commit 01fc9d9edd
11 changed files with 520 additions and 15 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 138
      assets/css/index.css
  2. 8
      assets/img/icons/group.svg
  3. 19
      assets/img/icons/idea.svg
  4. 10
      assets/img/icons/meditation.svg
  5. 8
      assets/img/icons/presentation.svg
  6. 14
      assets/img/icons/weightlifting.svg
  7. 1
      assets/js/main.js
  8. 16
      assets/js/step-by-step.js
  9. 137
      assets/scss/_l-step-by-step.scss
  10. 2
      assets/scss/_m-button.scss
  11. 182
      index.html

138
assets/css/index.css
Unescape View File

@ -315,9 +315,11 @@ h3 {
.button--dark:hover { .button--dark:hover {
color: #609eff; color: #609eff;
background-color: #ffffff; background-color: #ffffff;
border-color: #609eff;
} }
.button--dark:active { .button--dark:active {
color: #3081ff; color: #3081ff;
border-color: #3081ff;
} }
.button--dark::before { .button--dark::before {
filter: brightness(10); filter: brightness(10);
@ -1026,7 +1028,6 @@ h3 {
} }
.step-by-step { .step-by-step {
display: none;
margin: 98px 0 110px; margin: 98px 0 110px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
@ -1046,12 +1047,36 @@ h3 {
display: flex; display: flex;
gap: 84px; gap: 84px;
} }
@media (max-width: 1240px) {
.step-by-step__wrapper {
gap: 42px 24px;
}
}
@media (max-width: 992px) {
.step-by-step__wrapper {
flex-direction: column;
}
}
.step-by-step__controls { .step-by-step__controls {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 36px; gap: 36px;
flex: 0 0 410px; flex: 0 0 410px;
} }
@media (max-width: 1240px) {
.step-by-step__controls {
flex: 0 0 360px;
}
}
@media (max-width: 992px) {
.step-by-step__controls {
flex: 0 1 auto;
flex-direction: row;
gap: 20px;
padding-bottom: 10px;
overflow: auto;
}
}
.step-by-step__controls-button { .step-by-step__controls-button {
display: flex; display: flex;
align-items: center; align-items: center;
@ -1063,6 +1088,12 @@ h3 {
transition: all ease-in-out 0.1s; transition: all ease-in-out 0.1s;
cursor: pointer; cursor: pointer;
} }
@media (max-width: 992px) {
.step-by-step__controls-button {
flex: 0 0 auto;
padding: 8px 21px;
}
}
.step-by-step__controls-button:hover, .step-by-step__controls-button.active:hover { .step-by-step__controls-button:hover, .step-by-step__controls-button.active:hover {
background-color: #609eff; background-color: #609eff;
border-color: #609eff; border-color: #609eff;
@ -1081,11 +1112,17 @@ h3 {
line-height: 146%; line-height: 146%;
color: #878787; color: #878787;
} }
@media (max-width: 1240px) {
.step-by-step__controls-button-number {
font-size: 24px;
}
}
.step-by-step__controls-button-text { .step-by-step__controls-button-text {
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
line-height: 146%; line-height: 146%;
color: #4d4d4d; color: #4d4d4d;
font-size: 20px;
} }
.step-by-step__controls-button.active .step-by-step__controls-button-number { .step-by-step__controls-button.active .step-by-step__controls-button-number {
font-weight: 700; font-weight: 700;
@ -1100,4 +1137,103 @@ h3 {
} }
.step-by-step__content { .step-by-step__content {
flex: 1 1 auto; flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 26px 56px;
box-sizing: border-box;
border-radius: 22px 88px;
background-color: #ffffff;
}
@media (max-width: 992px) {
.step-by-step__content {
padding: 21px 27px;
border-radius: 10px 30px;
}
}
.step-by-step__card {
display: none;
max-width: 520px;
}
@media (max-width: 992px) {
.step-by-step__card {
max-width: none;
}
}
.step-by-step__card--wide {
max-width: none;
}
.step-by-step__card.active {
display: block;
}
.step-by-step__card-title {
margin: 0 0 13px;
font-weight: 600;
font-size: 34px;
line-height: 141%;
text-align: center;
color: #4d4d4d;
}
.step-by-step__card-text {
margin: 0 0 32px;
font-weight: 400;
font-size: 20px;
line-height: 146%;
text-align: center;
color: #878787;
}
.step-by-step__card-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin: 0 0 40px;
}
@media (max-width: 576px) {
.step-by-step__card-list {
gap: 16px;
}
}
.step-by-step__card-list-item {
flex: 0 0 calc(33.3333333333% - 16px);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
@media (max-width: 576px) {
.step-by-step__card-list-item {
flex: 0 0 calc(50% - 8px);
}
}
.step-by-step__card-list-item-figure {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
width: 48px;
border-radius: 48px;
background-color: #609eff;
}
.step-by-step__card-list-item-figure-image {
display: block;
max-width: 100%;
width: 24px;
height: auto;
}
.step-by-step__card-list-item-text {
font-weight: 600;
font-size: 17px;
line-height: 127%;
text-align: center;
color: #878787;
}
@media (max-width: 576px) {
.step-by-step__card-list-item-text {
font-size: 13px;
}
}
.step-by-step__card-buttons {
display: flex;
align-items: center;
justify-content: center;
} }

8
assets/img/icons/group.svg
Unescape View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.75638 3.3281C4.49076 3.64216 3.48295 4.61716 3.21107 5.78904C3.10326 6.24841 3.11263 7.00779 3.22982 7.46716C3.53451 8.63904 4.52357 9.61404 5.71888 9.92341C6.13607 10.0312 6.90951 10.0312 7.33607 9.92341C7.82826 9.79685 7.8142 9.82029 7.65013 9.39373C7.21888 8.26404 7.22826 7.08748 7.67357 5.95779C7.86576 5.47029 8.19857 4.94529 8.56888 4.54685L8.90638 4.18123L8.66263 3.9656C7.9267 3.32341 6.79232 3.07498 5.75638 3.3281Z" fill="white"/>
<path d="M16.6029 3.32813C16.1857 3.43594 15.6139 3.73125 15.3139 3.98907L15.0889 4.18125L15.3607 4.47188C15.7311 4.85625 15.942 5.15625 16.1623 5.60157C16.5232 6.32813 16.6545 6.90469 16.6545 7.71094C16.6545 8.34844 16.5701 8.82188 16.3498 9.39375C16.1857 9.82032 16.1717 9.79688 16.6639 9.92344C16.8842 9.97969 17.1514 10.0031 17.4842 9.99844C19.1014 9.97969 20.3529 9.00938 20.7467 7.47657C20.8592 7.03125 20.8592 6.1875 20.7467 5.74219C20.5029 4.78125 19.8701 3.99844 18.9842 3.55782C18.342 3.23907 17.3201 3.14063 16.6029 3.32813Z" fill="white"/>
<path d="M11.6115 4.12964C9.6568 4.38276 8.16148 6.24839 8.43336 8.10464C8.65836 9.63276 9.66148 10.7671 11.1334 11.1609C11.6677 11.3015 12.4084 11.3015 12.9099 11.1609C14.0818 10.8328 14.9818 9.99839 15.3474 8.9062C15.7552 7.68276 15.5724 6.42183 14.8552 5.50776C14.438 4.97808 13.6787 4.44839 13.0552 4.25151C12.8443 4.1812 12.1037 4.0687 11.9771 4.08276C11.9537 4.08745 11.7849 4.1062 11.6115 4.12964Z" fill="white"/>
<path d="M4.68301 10.5938C3.69864 10.7156 2.83614 11.1328 2.09551 11.8547C1.5002 12.4313 1.0877 13.1391 0.886139 13.9313C0.801764 14.2594 0.783014 14.5031 0.764264 15.4406C0.736139 16.7156 0.768951 16.9594 1.0127 17.475C1.29395 18.0563 1.84239 18.525 2.48458 18.7266C2.68614 18.7922 2.97208 18.8156 3.77364 18.8297L4.80489 18.8531V17.386C4.80489 15.9422 4.80958 15.9047 4.93145 15.4172C5.08614 14.8031 5.34864 14.1844 5.67676 13.6594C5.98145 13.1719 6.62364 12.4781 7.10645 12.1125C7.5002 11.8172 8.17051 11.4563 8.61114 11.2969L8.90176 11.1938L8.60176 10.8797L8.29708 10.5703L6.64708 10.5656C5.7377 10.561 4.85176 10.575 4.68301 10.5938Z" fill="white"/>
<path d="M15.7217 10.6172C15.642 10.6594 15.4686 10.8047 15.3326 10.9406L15.0889 11.1891L15.3842 11.2969C16.1201 11.5641 16.7904 11.9766 17.3811 12.5344C18.2342 13.3406 18.7732 14.2641 19.0686 15.4219C19.1904 15.9047 19.1951 15.9422 19.1951 17.386V18.8531L20.2264 18.8297C21.0279 18.8156 21.3139 18.7922 21.5154 18.7266C22.1529 18.5297 22.7107 18.0516 22.9873 17.475C23.2311 16.9547 23.2639 16.7156 23.2357 15.4406C23.217 14.5031 23.1982 14.2594 23.1139 13.9313C22.9076 13.1297 22.5045 12.436 21.8811 11.8313C21.2717 11.236 20.7186 10.9219 19.8748 10.6969C19.4436 10.5844 19.3779 10.5797 17.6482 10.561C16.1014 10.5469 15.8482 10.5516 15.7217 10.6172Z" fill="white"/>
<path d="M9.86707 12.0984C9.16863 12.2016 8.30613 12.5672 7.74832 12.9984C7.10613 13.4953 6.52488 14.2359 6.23894 14.9297C5.92957 15.6656 5.89676 15.8906 5.86863 17.2219C5.85457 18.0469 5.86863 18.5203 5.90613 18.7219C6.08894 19.6687 6.87176 20.4844 7.82801 20.7234C8.03426 20.775 8.84519 20.7891 12.0468 20.7891H16.0077L16.378 20.6578C17.0671 20.4141 17.5827 19.9641 17.878 19.3453C18.1171 18.8484 18.1546 18.5484 18.1311 17.2172C18.1077 16.1484 18.0983 16.0172 17.9858 15.5906C17.5358 13.9125 16.2796 12.6562 14.5827 12.1969C14.1327 12.075 14.128 12.075 12.1405 12.0656C11.0436 12.0609 10.0218 12.075 9.86707 12.0984Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

19
assets/img/icons/idea.svg
Unescape View File

@ -0,0 +1,19 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_205_232)">
<path opacity="0.991" fill-rule="evenodd" clip-rule="evenodd" d="M7.93676 -0.0205078C8.25123 -0.0205078 8.56566 -0.0205078 8.88012 -0.0205078C9.21297 0.0450618 9.52739 0.168109 9.82348 0.348633C9.8645 3.34265 9.87816 6.33679 9.8645 9.33105C9.05407 9.12881 8.62341 8.6093 8.57251 7.77246C8.33195 7.37272 8.01063 7.2975 7.60864 7.54688C7.46976 7.69675 7.41505 7.87447 7.44458 8.08008C7.54888 9.0679 8.04107 9.79248 8.92114 10.2539C9.224 10.3936 9.53842 10.4961 9.8645 10.5615C9.8645 12.2295 9.8645 13.8974 9.8645 15.5654C9.23544 15.5723 8.60655 15.5654 7.97778 15.5449C6.80272 15.2791 6.06444 14.5613 5.76294 13.3916C3.97406 12.7137 3.16058 11.4149 3.32251 9.49512C3.43054 8.8554 3.68347 8.28118 4.0813 7.77246C3.25765 6.68583 3.07308 5.49638 3.52758 4.2041C3.96563 3.18823 4.71076 2.50464 5.76294 2.15332C6.06711 1.00149 6.79173 0.276877 7.93676 -0.0205078Z" fill="white"/>
<path opacity="0.991" fill-rule="evenodd" clip-rule="evenodd" d="M12.0793 -0.0205078C12.3938 -0.0205078 12.7082 -0.0205078 13.0227 -0.0205078C14.1677 0.276877 14.8924 1.00149 15.1965 2.15332C16.9854 2.83121 17.7989 4.13003 17.637 6.0498C17.5289 6.68953 17.276 7.26374 16.8782 7.77246C17.7018 8.85909 17.8864 10.0485 17.4319 11.3408C16.983 12.3433 16.2379 13.0269 15.1965 13.3916C14.895 14.5613 14.1567 15.2791 12.9817 15.5449C12.3529 15.5654 11.724 15.5723 11.095 15.5654C11.095 12.4482 11.095 9.33105 11.095 6.21387C11.9054 6.41612 12.3361 6.93562 12.387 7.77246C12.6275 8.1722 12.9488 8.24742 13.3508 7.99805C13.4897 7.84818 13.5444 7.67045 13.5149 7.46484C13.4106 6.47702 12.9184 5.75244 12.0383 5.29102C11.7355 5.15132 11.421 5.04878 11.095 4.9834C11.0813 3.43823 11.095 1.89331 11.136 0.348633C11.4321 0.168109 11.7465 0.0450618 12.0793 -0.0205078Z" fill="white"/>
<path opacity="0.952" fill-rule="evenodd" clip-rule="evenodd" d="M-0.0205078 2.27632C-0.0205078 2.11225 -0.0205078 1.94819 -0.0205078 1.78413C0.167395 1.44461 0.454502 1.3284 0.84082 1.4355C1.31934 1.74995 1.79785 2.0644 2.27637 2.37886C2.49512 2.69331 2.49512 3.00776 2.27637 3.32222C2.0645 3.4598 1.83207 3.50081 1.5791 3.44526C1.10058 3.13081 0.622072 2.81636 0.143555 2.5019C0.0944762 2.41924 0.0397886 2.34405 -0.0205078 2.27632Z" fill="white"/>
<path opacity="0.952" fill-rule="evenodd" clip-rule="evenodd" d="M20.9796 1.78413C20.9796 1.94819 20.9796 2.11225 20.9796 2.27632C20.9193 2.34405 20.8646 2.41924 20.8155 2.5019C20.337 2.81636 19.8585 3.13081 19.38 3.44526C18.7169 3.5478 18.4366 3.26753 18.5392 2.60444C18.587 2.52925 18.6348 2.45405 18.6827 2.37886C19.1612 2.0644 19.6397 1.74995 20.1183 1.4355C20.5046 1.3284 20.7917 1.44461 20.9796 1.78413Z" fill="white"/>
<path opacity="0.968" fill-rule="evenodd" clip-rule="evenodd" d="M-0.0205078 7.81349C-0.0205078 7.64942 -0.0205078 7.48536 -0.0205078 7.3213C0.0539277 7.1581 0.176975 7.0419 0.348633 6.97267C0.922852 6.94531 1.49707 6.94531 2.07129 6.97267C2.43939 7.18398 2.54193 7.4916 2.37891 7.89552C2.30652 8.01746 2.20398 8.10634 2.07129 8.16212C1.49707 8.18948 0.922852 8.18948 0.348633 8.16212C0.176975 8.09289 0.0539277 7.97669 -0.0205078 7.81349Z" fill="white"/>
<path opacity="0.968" fill-rule="evenodd" clip-rule="evenodd" d="M20.9794 7.3213C20.9794 7.48536 20.9794 7.64942 20.9794 7.81349C20.9049 7.97669 20.7819 8.09289 20.6102 8.16212C20.036 8.18948 19.4618 8.18948 18.8876 8.16212C18.5195 7.95081 18.4169 7.64319 18.5799 7.23927C18.6523 7.11733 18.7549 7.02845 18.8876 6.97267C19.4618 6.94531 20.036 6.94531 20.6102 6.97267C20.7819 7.0419 20.9049 7.1581 20.9794 7.3213Z" fill="white"/>
<path opacity="0.952" fill-rule="evenodd" clip-rule="evenodd" d="M-0.0205078 13.3506C-0.0205078 13.1865 -0.0205078 13.0224 -0.0205078 12.8584C0.0397885 12.7907 0.0944762 12.7154 0.143555 12.6328C0.622072 12.3183 1.10058 12.0039 1.5791 11.6894C2.24219 11.5869 2.52246 11.8671 2.41992 12.5302C2.37207 12.6054 2.32422 12.6806 2.27637 12.7558C1.79785 13.0703 1.31934 13.3847 0.84082 13.6992C0.454502 13.8063 0.167395 13.6901 -0.0205078 13.3506Z" fill="white"/>
<path opacity="0.952" fill-rule="evenodd" clip-rule="evenodd" d="M20.9795 12.8584C20.9795 13.0225 20.9795 13.1866 20.9795 13.3506C20.7916 13.6901 20.5045 13.8063 20.1182 13.6993C19.6396 13.3848 19.1611 13.0704 18.6826 12.7559C18.4639 12.4414 18.4639 12.127 18.6826 11.8125C18.8945 11.675 19.1269 11.6339 19.3799 11.6895C19.8584 12.004 20.3369 12.3184 20.8154 12.6328C20.8645 12.7155 20.9192 12.7907 20.9795 12.8584Z" fill="white"/>
<path opacity="0.993" fill-rule="evenodd" clip-rule="evenodd" d="M7.40294 16.7959C9.45372 16.7959 11.5045 16.7959 13.5553 16.7959C13.5621 17.097 13.5553 17.3978 13.5348 17.6982C13.4322 18.0742 13.193 18.3135 12.817 18.416C11.2584 18.4434 9.69982 18.4434 8.14122 18.416C7.76523 18.3135 7.52599 18.0742 7.42345 17.6982C7.40294 17.3978 7.39613 17.097 7.40294 16.7959Z" fill="white"/>
<path opacity="0.97" fill-rule="evenodd" clip-rule="evenodd" d="M10.9307 20.9795C10.6299 20.9795 10.3291 20.9795 10.0283 20.9795C9.30312 20.801 8.76992 20.3771 8.42871 19.708C9.79588 19.6533 11.1631 19.6533 12.5303 19.708C12.1891 20.3771 11.6559 20.801 10.9307 20.9795Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_205_232">
<rect width="21" height="21" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

10
assets/img/icons/meditation.svg
Unescape View File

@ -0,0 +1,10 @@
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_205_285)">
<path d="M10.0406 0.0410271C9.7166 0.094347 9.26953 0.254309 8.99062 0.418371C8.6502 0.615246 8.08418 1.19357 7.89551 1.52989C7.24336 2.71114 7.43613 4.1754 8.36719 5.08595C8.51894 5.23361 8.73633 5.43458 8.85117 5.53712L9.06445 5.72579V6.2631C9.06445 6.55841 9.05215 6.83321 9.03984 6.87013C8.97832 7.02189 8.81016 7.0547 8.08008 7.0547C7.48125 7.0547 7.3459 7.067 7.12852 7.14083C6.84961 7.23517 6.60762 7.38693 6.41484 7.59611C6.34512 7.66993 5.38535 8.98243 4.28613 10.5123C2.66602 12.7641 2.25586 13.3096 2.13691 13.367C2.02617 13.4244 1.86621 13.449 1.49707 13.4613C0.914648 13.4818 0.701367 13.5598 0.401953 13.851C0.127148 14.1217 0.0246094 14.376 0.0205078 14.7861C0.0205078 15.0651 0.0369141 15.1512 0.135352 15.3481C0.258398 15.6024 0.475781 15.8197 0.746484 15.9633C0.910547 16.0494 0.988477 16.0576 1.75547 16.0781L2.58398 16.0986L2.29688 16.316C0.635742 17.5834 1.09102 20.1879 3.08848 20.8647L3.4248 20.9795L9.1834 20.9918C12.3539 20.9959 14.9379 20.9959 14.9256 20.9836C14.9174 20.9754 13.2111 20.0279 11.1357 18.8754C9.06035 17.727 7.11211 16.6483 6.80449 16.476C6.0252 16.0453 5.16387 15.791 4.4748 15.791C4.34766 15.791 4.2082 15.7787 4.15898 15.7664C4.07695 15.7459 4.07695 15.7418 4.18359 15.627C4.24102 15.5654 4.85215 14.6754 5.53711 13.6541L6.78809 11.792L6.80039 13.4162L6.80859 15.0404L8.64609 16.0576C9.65508 16.6154 10.5 17.0748 10.5246 17.0748C10.5451 17.0748 11.3285 16.6195 12.2555 16.0617L13.9453 15.0486L13.9535 13.4039L13.9658 11.7592L15.1922 13.5598C15.8648 14.5483 16.4883 15.4465 16.5744 15.549L16.7303 15.7377L16.3734 15.7623C15.6885 15.8074 14.8312 16.0412 14.2037 16.357C14.0273 16.4473 13.408 16.8041 12.8297 17.1527L11.7715 17.7885L13.4654 18.7236C14.3924 19.2404 15.6598 19.9418 16.2791 20.2863L17.4029 20.9098L17.6121 20.8483C18.3135 20.6432 18.9 20.151 19.2158 19.5029C19.4127 19.1092 19.4824 18.7934 19.4824 18.334C19.4824 17.8746 19.4127 17.5629 19.2158 17.1609C19.0559 16.8369 18.6457 16.3652 18.3791 16.2012C18.2889 16.1438 18.2109 16.0863 18.2109 16.0699C18.2109 16.0535 18.6293 16.0371 19.1461 16.0289C20.0238 16.0166 20.0854 16.0125 20.2535 15.9223C20.5242 15.7787 20.7416 15.5613 20.8646 15.307C21.0246 14.9789 21.0287 14.5195 20.8729 14.1914C20.7375 13.9043 20.5078 13.6746 20.2207 13.5393C20.0197 13.4449 19.9295 13.4326 19.3799 13.4121C18.8631 13.3957 18.7441 13.3793 18.6252 13.3096C18.5227 13.2481 17.9156 12.4442 16.4391 10.418C15.3193 8.87169 14.3309 7.54689 14.2447 7.46896C14.1586 7.39513 13.9699 7.27208 13.8223 7.20236C13.5639 7.07931 13.5352 7.07521 12.8994 7.0629C12.5385 7.0547 12.1939 7.03009 12.1365 7.00958C11.9561 6.93986 11.9273 6.83321 11.9437 6.23439L11.9561 5.68888L12.1406 5.54122C12.4646 5.28282 12.9363 4.77833 13.0799 4.54044C13.1537 4.41329 13.2727 4.14669 13.3424 3.94982C13.4613 3.61349 13.4695 3.54786 13.4736 3.03517C13.4736 2.40763 13.3998 2.09591 13.1332 1.58732C12.8666 1.07462 12.2514 0.504503 11.71 0.266613C11.2342 0.0533314 10.5451 -0.0369034 10.0406 0.0410271Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_205_285">
<rect width="21" height="21" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

8
assets/img/icons/presentation.svg
Unescape View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.92053 1.57031C2.55491 1.66875 2.31116 1.80937 2.05335 2.06719C1.75803 2.3625 1.55178 2.79375 1.51428 3.20156C1.49085 3.4875 1.49553 3.51562 1.60803 3.62812L1.72991 3.75H12.0002H22.2705L22.3924 3.62812C22.5049 3.51562 22.5096 3.4875 22.4862 3.20156C22.4112 2.40469 21.7971 1.72031 21.0096 1.55156C20.8315 1.51406 18.3096 1.5 11.9627 1.50469C4.53772 1.50469 3.12678 1.51875 2.92053 1.57031Z" fill="white"/>
<path d="M2.625 10.9453V17.3953L2.74219 17.5078L2.85469 17.625H7.24219H11.625V18.7687V19.9125L11.4141 20.0156C10.4719 20.4703 10.4625 21.8719 11.4047 22.3312C11.8875 22.5703 12.3891 22.5234 12.8016 22.2047C13.5469 21.6328 13.4297 20.4234 12.5859 20.0156L12.375 19.9125V18.7687V17.625H16.7578H21.1453L21.2578 17.5078L21.375 17.3953V10.9453V4.49998H12H2.625V10.9453ZM14.5078 5.74217L14.625 5.85467V9.74998V13.6453L14.5078 13.7578C14.3953 13.875 14.3859 13.875 13.5 13.875C12.6141 13.875 12.6047 13.875 12.4922 13.7578L12.375 13.6453V9.74998V5.85467L12.4922 5.74217C12.6047 5.62498 12.6141 5.62498 13.5 5.62498C14.3859 5.62498 14.3953 5.62498 14.5078 5.74217ZM11.5078 7.24217L11.625 7.35467V10.5V13.6453L11.5078 13.7578C11.3953 13.875 11.3859 13.875 10.5 13.875C9.61406 13.875 9.60469 13.875 9.49219 13.7578L9.375 13.6453V10.5V7.35467L9.49219 7.24217C9.60469 7.12498 9.61406 7.12498 10.5 7.12498C11.3859 7.12498 11.3953 7.12498 11.5078 7.24217ZM17.5078 7.24217L17.625 7.35467V10.5V13.6453L17.5078 13.7578C17.3953 13.875 17.3859 13.875 16.5 13.875C15.6141 13.875 15.6047 13.875 15.4922 13.7578L15.375 13.6453V10.5V7.35467L15.4922 7.24217C15.6047 7.12498 15.6141 7.12498 16.5 7.12498C17.3859 7.12498 17.3953 7.12498 17.5078 7.24217ZM8.50781 8.74217L8.625 8.85467V11.25V13.6453L8.50781 13.7578C8.39531 13.875 8.38594 13.875 7.5 13.875C6.61406 13.875 6.60469 13.875 6.49219 13.7578L6.375 13.6453V11.25V8.85467L6.49219 8.74217C6.60469 8.62498 6.61406 8.62498 7.5 8.62498C8.38594 8.62498 8.39531 8.62498 8.50781 8.74217ZM19.6922 14.6859C19.8984 14.8453 19.9125 15.1031 19.725 15.2812C19.6219 15.375 19.5938 15.375 12 15.375C4.40625 15.375 4.37813 15.375 4.275 15.2812C4.0875 15.1031 4.10156 14.8453 4.30781 14.6859C4.41563 14.6015 19.5844 14.6015 19.6922 14.6859Z" fill="white"/>
<path d="M13.125 9.75V13.125H13.5H13.875V9.75V6.375H13.5H13.125V9.75Z" fill="white"/>
<path d="M10.125 10.5V13.125H10.5H10.875V10.5V7.875H10.5H10.125V10.5Z" fill="white"/>
<path d="M16.125 10.5V13.125H16.5H16.875V10.5V7.875H16.5H16.125V10.5Z" fill="white"/>
<path d="M7.125 11.25V13.125H7.5H7.875V11.25V9.375H7.5H7.125V11.25Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

14
assets/img/icons/weightlifting.svg
Unescape View File

@ -0,0 +1,14 @@
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_205_270)">
<path opacity="0.998" fill-rule="evenodd" clip-rule="evenodd" d="M3.93067 4.73926C5.03884 4.73176 6.14693 4.73926 7.25488 4.76173C7.53192 4.85907 7.71906 5.04622 7.81641 5.32325C7.84637 9.4261 7.84637 13.529 7.81641 17.6318C7.71906 17.9089 7.53192 18.096 7.25488 18.1934C6.1468 18.2233 5.03875 18.2233 3.93067 18.1934C3.65365 18.096 3.46647 17.9089 3.36914 17.6318C3.33919 13.529 3.33919 9.4261 3.36914 5.32325C3.47485 5.04541 3.66202 4.85076 3.93067 4.73926Z" fill="white"/>
<path opacity="0.998" fill-rule="evenodd" clip-rule="evenodd" d="M15.7002 4.73926C16.8084 4.73176 17.9165 4.73926 19.0244 4.76173C19.3015 4.85907 19.4886 5.04622 19.5859 5.32325C19.6159 9.4261 19.6159 13.529 19.5859 17.6318C19.4886 17.9089 19.3015 18.096 19.0244 18.1934C17.9163 18.2233 16.8083 18.2233 15.7002 18.1934C15.4232 18.096 15.236 17.9089 15.1387 17.6318C15.1087 13.529 15.1087 9.4261 15.1387 5.32325C15.2444 5.04541 15.4316 4.85076 15.7002 4.73926Z" fill="white"/>
<path opacity="0.996" fill-rule="evenodd" clip-rule="evenodd" d="M-0.0224609 15.3857C-0.0224609 12.7803 -0.0224609 10.1748 -0.0224609 7.56934C0.0890365 7.30071 0.283698 7.11352 0.561523 7.00782C1.04046 6.98536 1.51962 6.97786 1.99902 6.98536C1.99902 9.98016 1.99902 12.9749 1.99902 15.9697C1.51962 15.9772 1.04046 15.9697 0.561523 15.9473C0.283698 15.8416 0.0890365 15.6544 -0.0224609 15.3857Z" fill="white"/>
<path opacity="0.996" fill-rule="evenodd" clip-rule="evenodd" d="M22.9775 7.56934C22.9775 10.1748 22.9775 12.7803 22.9775 15.3857C22.866 15.6544 22.6714 15.8416 22.3936 15.9473C21.9146 15.9697 21.4355 15.9772 20.9561 15.9697C20.9561 12.9749 20.9561 9.98016 20.9561 6.98536C21.4355 6.97786 21.9146 6.98536 22.3936 7.00782C22.6714 7.11352 22.866 7.30071 22.9775 7.56934Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.18652 10.1299C10.7139 10.1299 12.2412 10.1299 13.7686 10.1299C13.7686 11.0283 13.7686 11.9268 13.7686 12.8252C12.2412 12.8252 10.7139 12.8252 9.18652 12.8252C9.18652 11.9268 9.18652 11.0283 9.18652 10.1299Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_205_270">
<rect width="23" height="23" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

1
assets/js/main.js
Unescape View File

@ -1 +1,2 @@
import './sliders.js'; import './sliders.js';
import './step-by-step.js';

16
assets/js/step-by-step.js
Unescape View File

@ -0,0 +1,16 @@
const stepByStepButtons = document.querySelectorAll('.step-by-step__controls-button');
const stepByStepCards = document.querySelectorAll('.step-by-step__card');
const stepByStepContent = document.querySelector('.step-by-step__content');
stepByStepButtons.forEach((button) => {
button.addEventListener('click', (event) => {
const targetId = event.currentTarget.dataset.target;
const targetCard = document.getElementById(targetId);
if (targetCard) {
stepByStepButtons.forEach((buttonElem) => buttonElem.classList.remove('active'));
stepByStepCards.forEach((card) => card.classList.remove('active'));
event.currentTarget.classList.add('active');
targetCard.classList.add('active');
}
});
});

137
assets/scss/_l-step-by-step.scss
Unescape View File

@ -1,5 +1,4 @@
.step-by-step { .step-by-step {
display: none;
margin: 98px 0 110px; margin: 98px 0 110px;
@include tablet { @include tablet {
@ -17,6 +16,14 @@
&__wrapper { &__wrapper {
display: flex; display: flex;
gap: 84px; gap: 84px;
@include desktop {
gap: 42px 24px;
}
@include laptop {
flex-direction: column;
}
} }
&__controls { &__controls {
@ -25,6 +32,18 @@
gap: 36px; gap: 36px;
flex: 0 0 410px; flex: 0 0 410px;
@include desktop {
flex: 0 0 360px;
}
@include laptop {
flex: 0 1 auto;
flex-direction: row;
gap: 20px;
padding-bottom: 10px;
overflow: auto;
}
&-button { &-button {
display: flex; display: flex;
align-items: center; align-items: center;
@ -36,6 +55,11 @@
transition: all ease-in-out 0.1s; transition: all ease-in-out 0.1s;
cursor: pointer; cursor: pointer;
@include laptop {
flex: 0 0 auto;
padding: 8px 21px;
}
&:hover, &:hover,
&.active:hover { &.active:hover {
background-color: $blue; background-color: $blue;
@ -58,6 +82,10 @@
font-size: 28px; font-size: 28px;
line-height: 146%; line-height: 146%;
color: $grey; color: $grey;
@include desktop {
font-size: 24px;
}
} }
&-text { &-text {
@ -65,6 +93,8 @@
font-size: 24px; font-size: 24px;
line-height: 146%; line-height: 146%;
color: $darkgrey; color: $darkgrey;
font-size: 20px;
} }
&.active &-number { &.active &-number {
@ -86,5 +116,110 @@
&__content { &__content {
flex: 1 1 auto; flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
padding: 26px 56px;
box-sizing: border-box;
border-radius: 22px 88px;
background-color: $white;
@include laptop {
padding: 21px 27px;
border-radius: 10px 30px;
}
}
&__card {
display: none;
max-width: 520px;
@include laptop {
max-width: none;
}
&--wide {
max-width: none;
}
&.active {
display: block;
}
&-title {
margin: 0 0 13px;
font-weight: 600;
font-size: 34px;
line-height: 141%;
text-align: center;
color: $darkgrey;
}
&-text {
margin: 0 0 32px;
font-weight: 400;
font-size: 20px;
line-height: 146%;
text-align: center;
color: $grey;
}
&-list {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin: 0 0 40px;
@include mobile {
gap: 16px;
}
&-item {
flex: 0 0 calc(100% / 3 - 24px / 3 * 2);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
@include mobile {
flex: 0 0 calc(50% - 8px);
}
&-figure {
display: flex;
align-items: center;
justify-content: center;
height: 48px;
width: 48px;
border-radius: 48px;
background-color: $blue;
&-image {
display: block;
max-width: 100%;
width: 24px;
height: auto;
}
}
&-text {
font-weight: 600;
font-size: 17px;
line-height: 127%;
text-align: center;
color: $grey;
@include mobile {
font-size: 13px;
}
}
}
}
&-buttons {
display: flex;
align-items: center;
justify-content: center;
}
} }
} }

2
assets/scss/_m-button.scss
Unescape View File

@ -70,10 +70,12 @@
&:hover { &:hover {
color: $blue; color: $blue;
background-color: $white; background-color: $white;
border-color: $blue;
} }
&:active { &:active {
color: $darkblue; color: $darkblue;
border-color: $darkblue;
} }
&::before { &::before {

182
index.html
Unescape View File

@ -498,46 +498,202 @@
<div class="step-by-step__wrapper"> <div class="step-by-step__wrapper">
<div class="step-by-step__controls"> <div class="step-by-step__controls">
<button class="step-by-step__controls-button active"> <button class="step-by-step__controls-button active" data-target="step1">
<span class="step-by-step__controls-button-number">01</span> <span class="step-by-step__controls-button-number">01</span>
<span class="step-by-step__controls-button-text">Заявка</span> <span class="step-by-step__controls-button-text">Заявка</span>
</button> </button>
<button class="step-by-step__controls-button"> <button class="step-by-step__controls-button" data-target="step2">
<span class="step-by-step__controls-button-number">02</span> <span class="step-by-step__controls-button-number">02</span>
<span class="step-by-step__controls-button-text">Прибытие в центр</span> <span class="step-by-step__controls-button-text">Прибытие в центр</span>
</button> </button>
<button class="step-by-step__controls-button"> <button class="step-by-step__controls-button" data-target="step3">
<span class="step-by-step__controls-button-number">03</span> <span class="step-by-step__controls-button-number">03</span>
<span class="step-by-step__controls-button-text">Детокс</span> <span class="step-by-step__controls-button-text">Детокс</span>
</button> </button>
<button class="step-by-step__controls-button"> <button class="step-by-step__controls-button" data-target="step4">
<span class="step-by-step__controls-button-number">04</span> <span class="step-by-step__controls-button-number">04</span>
<span class="step-by-step__controls-button-text">Подписание договора</span> <span class="step-by-step__controls-button-text">Подписание договора</span>
</button> </button>
<button class="step-by-step__controls-button"> <button class="step-by-step__controls-button" data-target="step5">
<span class="step-by-step__controls-button-number">05</span> <span class="step-by-step__controls-button-number">05</span>
<span class="step-by-step__controls-button-text">Реабилитация</span> <span class="step-by-step__controls-button-text">Реабилитация</span>
</button> </button>
<button class="step-by-step__controls-button"> <button class="step-by-step__controls-button" data-target="step6">
<span class="step-by-step__controls-button-number">06</span> <span class="step-by-step__controls-button-number">06</span>
<span class="step-by-step__controls-button-text">Подготовка к выпуску</span> <span class="step-by-step__controls-button-text">Подготовка к выпуску</span>
</button> </button>
<button class="step-by-step__controls-button"> <button class="step-by-step__controls-button" data-target="step7">
<span class="step-by-step__controls-button-number">07</span> <span class="step-by-step__controls-button-number">07</span>
<span class="step-by-step__controls-button-text">Социальная адаптация</span> <span class="step-by-step__controls-button-text">Социальная адаптация</span>
</button> </button>
</div> </div>
<div class="step-by-step__content"> <div class="step-by-step__content">
<div class="step-by-step__card"> <div class="step-by-step__card active" id="step1">
<h4 class="step-by-step__card-title"> <div class="step-by-step__card-title">
Вы оставляете заявку на нашем сайте или по телефону 8 (800) 101-21-27 Вы оставляете заявку на нашем сайте или по телефону <br />
</h4> 8 (800) 101-21-27
<div> </div>
<div class="step-by-step__card-text">
Наш специалист выслушает вас, ответит на все вопросы, расскажет о программах Наш специалист выслушает вас, ответит на все вопросы, расскажет о программах
реабилитации и назначит дату прибытия в центр реабилитации и назначит дату прибытия в центр
</div> </div>
<div> <div class="step-by-step__card-buttons">
<button class="button button--lg button--dark">Оставить заявку</button>
</div>
</div>
<div class="step-by-step__card" id="step2">
<div class="step-by-step__card-title">
Организуем трансфер от дома до центра бесплатно
</div>
<div class="step-by-step__card-text">
Если у вас нет возможности приехать самостоятельно или зависимый в тяжелом
состоянии, то самостоятельно заберем его и привезем на реабилитацию
</div>
<div class="step-by-step__card-buttons">
<button class="button button--lg button--dark">Оставить заявку</button>
</div>
</div>
<div class="step-by-step__card" id="step3">
<div class="step-by-step__card-title">
Приведем подопечного в чувство для последующего лечения (1-2 дня)
</div>
<div class="step-by-step__card-text">
Под наблюдением врачей безопасными способами выведем яды из организма, чтобы
облегчить состояние
</div>
<div class="step-by-step__card-buttons">
<button class="button button--lg button--dark">Оставить заявку</button>
</div>
</div>
<div class="step-by-step__card" id="step4">
<div class="step-by-step__card-title">
Даем подписать документы только в осознанном состоянии
</div>
<div class="step-by-step__card-text">
Ни один подопечный не находится в центре по принуждению, все проходит только с его
согласия и подтверждения этого в договорах
</div>
<div class="step-by-step__card-buttons">
<button class="button button--lg button--dark">Оставить заявку</button>
</div>
</div>
<div class="step-by-step__card step-by-step__card--wide" id="step5">
<div class="step-by-step__card-title">
Проводим полную перезагрузку жизни, учим жить без зависимостей
</div>
<div class="step-by-step__card-text">
Это ключевой этап выздоровления. Следуя передовой методике 12 шагов, психологи и
кураторы проведут глубинную терапию для устранения психологической тяги и
изменения моделей поведения. Групповые и индивидуальные занятия, тренинги помогут
пережить перезагрузку
</div>
<div class="step-by-step__card-list">
<div class="step-by-step__card-list-item">
<figure class="step-by-step__card-list-item-figure">
<img
class="step-by-step__card-list-item-figure-image"
src="./assets/img/icons/group.svg"
alt="group"
/>
</figure>
<div class="step-by-step__card-list-item-text">Групповая терапия</div>
</div>
<div class="step-by-step__card-list-item">
<figure class="step-by-step__card-list-item-figure">
<img
class="step-by-step__card-list-item-figure-image"
src="./assets/img/icons/mental-care.svg"
alt="mental-care"
/>
</figure>
<div class="step-by-step__card-list-item-text">
Индивидуальные сессии с психологом
</div>
</div>
<div class="step-by-step__card-list-item">
<figure class="step-by-step__card-list-item-figure">
<img
class="step-by-step__card-list-item-figure-image"
src="./assets/img/icons/idea.svg"
alt="idea"
/>
</figure>
<div class="step-by-step__card-list-item-text">Курирующий специалист</div>
</div>
<div class="step-by-step__card-list-item">
<figure class="step-by-step__card-list-item-figure">
<img
class="step-by-step__card-list-item-figure-image"
src="./assets/img/icons/presentation.svg"
alt="presentation"
/>
</figure>
<div class="step-by-step__card-list-item-text">Треннинги и ролевые игры</div>
</div>
<div class="step-by-step__card-list-item">
<figure class="step-by-step__card-list-item-figure">
<img
class="step-by-step__card-list-item-figure-image"
src="./assets/img/icons/weightlifting.svg"
alt="weightlifting"
/>
</figure>
<div class="step-by-step__card-list-item-text">
Физические нагрузки, арт-терапия, прогулки
</div>
</div>
<div class="step-by-step__card-list-item">
<figure class="step-by-step__card-list-item-figure">
<img
class="step-by-step__card-list-item-figure-image"
src="./assets/img/icons/meditation.svg"
alt="meditation"
/>
</figure>
<div class="step-by-step__card-list-item-text">Дховные лекции, беседы</div>
</div>
</div>
<div class="step-by-step__card-buttons">
<button class="button button--lg button--dark">Оставить заявку</button>
</div>
</div>
<div class="step-by-step__card" id="step6">
<div class="step-by-step__card-title">
Даем инструментарий для успешной жизни после выхода из центра
</div>
<div class="step-by-step__card-text">
На финальной стадии проведем тренинги по восстановлению социальных навыков,
налаживанию новых связей. Сформируем новые сценарии, при которых не будет тяги
вернуться к веществам и алкоголю. Каждый выпускник получит сертификат, который
будет напоминать о пройденном пути
</div>
<div class="step-by-step__card-buttons">
<button class="button button--lg button--dark">Оставить заявку</button>
</div>
</div>
<div class="step-by-step__card" id="step7">
<div class="step-by-step__card-title">
Будем на связи и поддержим в сложных ситуациях после выпуска
</div>
<div class="step-by-step__card-text">
Покидая стены центра, реабилитант не останется один на один с проблемами. Мы будем
содействовать поиску работы/учебы, жилья, налаживанию новых связей. Группы
поддержки, волонтерство в центре и возможность обратиться к кураторам обеспечат
плавную адаптацию
</div>
<div class="step-by-step__card-buttons">
<button class="button button--lg button--dark">Оставить заявку</button> <button class="button button--lg button--dark">Оставить заявку</button>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save