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

feat: added socialization

Browse Source
gh-pages
Aliaksei Karzhou 1 year ago
parent 2f088b3071
commit 0694320596
10 changed files with 501 additions and 0 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. 154
      assets/css/index.css
  2. 16
      assets/img/icons/crest.svg
  3. 14
      assets/img/icons/family.svg
  4. 6
      assets/img/icons/hospital-building.svg
  5. 15
      assets/img/icons/pictures.svg
  6. 7
      assets/img/icons/repair-tools.svg
  7. 26
      assets/js/sliders.js
  8. 154
      assets/scss/_l-socialization.scss
  9. 1
      assets/scss/index.scss
  10. 108
      index.html

154
assets/css/index.css
Unescape View File

@ -1927,4 +1927,158 @@ h3 {
.how-it-work__schedule-item-text { .how-it-work__schedule-item-text {
font-size: 18px; font-size: 18px;
} }
}
.socialization {
margin: 110px 0 97px;
}
@media (max-width: 768px) {
.socialization {
margin: 90px 0 90px;
}
}
.socialization .container {
position: relative;
}
.socialization__title {
margin: 18px 0 22px;
}
@media (max-width: 768px) {
.socialization__title {
margin: 21px 0 8px;
}
}
.socialization__slider .swiper {
overflow: visible;
}
@media (max-width: 992px) {
.socialization__slider .swiper {
overflow: hidden;
}
}
.socialization__slider .swiper-wrapper {
position: static;
flex-wrap: wrap;
}
@media screen and (min-width: 992.1px) {
.socialization__slider .swiper-wrapper {
gap: 40px;
}
}
@media (max-width: 992px) {
.socialization__slider .swiper-wrapper {
position: relative;
flex-wrap: nowrap;
}
}
.socialization__slider .swiper-slide {
position: static;
height: auto;
}
@media screen and (min-width: 992.1px) {
.socialization__slider .swiper-slide {
flex: 0 0 calc(33.3333333333% - 26.6666666667px);
}
}
@media (max-width: 992px) {
.socialization__slider .swiper-slide {
position: relative;
}
}
@media screen and (min-width: 992.1px) {
.socialization__slider .swiper-slide:nth-child(-n+2) {
flex: 0 0 calc(50% - 20px);
}
}
.socialization__slide {
height: 100%;
padding: 24px 36px 34px;
box-sizing: border-box;
border-radius: 22px 40px;
background-color: #ffffff;
}
@media (max-width: 1240px) {
.socialization__slide {
padding: 24px 20px 36px;
}
}
@media (max-width: 992px) {
.socialization__slide {
padding: 24px 14px 36px;
}
}
.socialization__slide-figure {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
width: 64px;
margin: 0 0 18px;
border-radius: 64px;
background-color: #609eff;
}
@media (max-width: 992px) {
.socialization__slide-figure {
margin: 0 auto 18px;
}
}
.socialization__slide-figure-image {
display: block;
max-width: 100%;
height: auto;
}
.socialization__slide-count {
margin: 0 0 6px;
font-weight: 700;
font-size: 59px;
line-height: 127%;
letter-spacing: 0.05em;
color: #ffffff;
-webkit-text-stroke: 1px #609eff;
}
@media (max-width: 992px) {
.socialization__slide-count {
text-align: center;
}
}
@media (max-width: 576px) {
.socialization__slide-count {
font-size: 50px;
}
}
.socialization__slide-title {
margin: 0 0 9px;
}
@media (max-width: 992px) {
.socialization__slide-title {
text-align: center;
}
}
.socialization__slide-text {
margin: 0;
font-weight: 400;
font-size: 17px;
line-height: 146%;
color: #878787;
}
.socialization__slide-text > b {
font-weight: 600;
}
@media (max-width: 992px) {
.socialization__slide-text {
font-size: 15px;
text-align: center;
}
}
.socialization__slider-controls {
display: none;
justify-content: center;
align-items: center;
gap: 24px;
margin: 35px 0 0;
}
@media (max-width: 992px) {
.socialization__slider-controls {
display: flex;
}
} }

16
assets/img/icons/crest.svg
Unescape View File

@ -0,0 +1,16 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_141_7318)">
<path d="M10.977 1.49414C9.86797 1.79297 9.00469 2.65625 8.67266 3.77852C8.59961 4.01758 8.56641 4.40273 8.56641 4.89414V5.64453H12.75C15.9574 5.64453 16.9336 5.62461 16.9336 5.56484C16.9336 5.51836 16.482 4.56211 15.9242 3.43984L14.9148 1.39453L13.1219 1.40117C11.7938 1.40117 11.2293 1.42773 10.977 1.49414Z" fill="white"/>
<path d="M18.0758 3.43984C17.518 4.56211 17.0664 5.51836 17.0664 5.56484C17.0664 5.62461 18.0426 5.64453 21.25 5.64453H25.4336V4.89414C25.4336 4.05742 25.3406 3.6457 25.0219 3.04141C24.7762 2.5832 24.1852 2.00547 23.7203 1.76641C23.0629 1.43437 22.7641 1.39453 20.8516 1.39453H19.0852L18.0758 3.43984Z" fill="white"/>
<path d="M14.6625 8.41367L12.3516 11.1828V12.0992V13.0156H17H21.6484V12.0992V11.1828L19.3508 8.42695C18.0824 6.91289 17.0332 5.67109 17.0066 5.66445C16.9867 5.65781 15.9309 6.89297 14.6625 8.41367Z" fill="white"/>
<path d="M0 9.94102C0 12.418 0.0199219 12.6039 0.405078 13.3609C0.869922 14.284 2.07852 15.0676 3.03477 15.0742C3.22734 15.0742 3.25391 15.0941 3.28711 15.3066C3.30703 15.4328 3.34023 15.652 3.36016 15.7848C3.46641 16.4488 4.04414 17.332 4.66172 17.7504C5.08672 18.0426 5.81719 18.3281 6.14258 18.3281C6.48789 18.3281 6.57422 18.3879 6.57422 18.6203C6.57422 18.7332 6.6207 19.0055 6.67383 19.2246C7.05234 20.6656 8.38711 21.6484 9.96758 21.6484H10.3594V16.1699V10.6914L10.2133 10.625C10.0938 10.5719 6.26211 9.47617 0.119531 7.72305C0.00664063 7.68984 0 7.8293 0 9.94102Z" fill="white"/>
<path d="M28.8402 9.16406C26.0578 9.96094 23.7469 10.6316 23.707 10.6582C23.6605 10.6848 23.6406 12.4578 23.6406 16.1766V21.6484H24.0324C25.5996 21.6484 26.9543 20.6523 27.3262 19.2246C27.3793 19.0055 27.4258 18.7332 27.4258 18.6137C27.4258 18.441 27.459 18.3945 27.5785 18.368C27.6582 18.3547 27.9039 18.3082 28.123 18.2684C29.0727 18.0957 29.9426 17.4184 30.3742 16.5219C30.5004 16.2563 30.6199 15.9242 30.6398 15.7848C30.7594 15.0211 30.7328 15.0742 30.9652 15.0742C31.616 15.0676 32.4527 14.6891 33.0105 14.1445C33.4488 13.7129 33.8207 13.0289 33.9336 12.4246C34.0066 12.0129 34.0266 7.70313 33.9535 7.70977C33.9203 7.70977 31.6227 8.36719 28.8402 9.16406Z" fill="white"/>
<path d="M12.3516 19.3176V23.6207L11.9066 23.6539C10.4324 23.7668 9.01797 24.8691 8.49336 26.3102L8.34727 26.6953H7.36445H6.375V27.6914V28.6875H8.29414H10.2133L10.2398 27.9371C10.2598 27.366 10.2996 27.1203 10.4059 26.8879C10.698 26.2437 11.3488 25.7391 12.0129 25.6395L12.3184 25.5996L12.3383 24.6168L12.3582 23.6406H13.6332H14.9082L15.9508 24.6832L17 25.7324L18.0492 24.6832L19.0918 23.6406H20.3668H21.6418L21.6617 24.6168L21.6816 25.5996L21.9871 25.6395C22.6512 25.7391 23.302 26.2437 23.5941 26.8879C23.7004 27.1203 23.7402 27.366 23.7602 27.9371L23.7867 28.6875H25.7059H27.625V27.6914V26.6953H26.6355H25.6527L25.5066 26.3102C24.982 24.8625 23.5941 23.7867 22.1 23.6605L21.6484 23.6207V19.3176V15.0078H17H12.3516V19.3176ZM17.9961 19.2578V20.2539H17H16.0039V19.2578V18.2617H17H17.9961V19.2578Z" fill="white"/>
<path d="M14.5563 28.1761L12.1392 30.5933L12.531 30.9386C14.045 32.2933 16.2896 32.8843 18.3415 32.4726C19.5435 32.2269 20.679 31.6691 21.4892 30.932L21.861 30.5933L19.4438 28.1761C18.1224 26.848 17.02 25.7656 17.0001 25.7656C16.9802 25.7656 15.8778 26.8547 14.5563 28.1761Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_141_7318">
<rect width="34" height="34" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

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

@ -0,0 +1,14 @@
<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_141_7276)">
<path d="M6.43022 0.121094C5.77026 0.29668 5.29799 0.569141 4.78335 1.08984C4.25659 1.61055 3.99018 2.07676 3.8146 2.76094C3.43315 4.23828 4.06284 5.84277 5.34038 6.70254C5.98823 7.13242 6.53315 7.2959 7.32631 7.2959C7.83491 7.2959 8.05288 7.26562 8.4101 7.15059C10.2205 6.55723 11.3103 4.58945 10.838 2.76094C10.7714 2.50059 10.6322 2.1252 10.5232 1.91934C10.2689 1.42891 9.53022 0.690235 9.03979 0.435938C8.24057 0.0181642 7.27788 -0.0968747 6.43022 0.121094Z" fill="white"/>
<path d="M22.7779 0.121094C22.1179 0.29668 21.6457 0.569141 21.131 1.08984C20.6042 1.61055 20.3378 2.07676 20.1623 2.76094C19.7808 4.23828 20.4105 5.84277 21.688 6.70254C22.3359 7.13242 22.8808 7.2959 23.674 7.2959C24.1826 7.2959 24.4005 7.26562 24.7578 7.15059C26.5681 6.55723 27.658 4.58945 27.1857 2.76094C27.1191 2.50059 26.9798 2.1252 26.8708 1.91934C26.6165 1.42891 25.8779 0.690235 25.3874 0.435938C24.5882 0.0181642 23.6255 -0.0968747 22.7779 0.121094Z" fill="white"/>
<path d="M8.17979 7.51347C6.63584 7.69511 5.11006 8.43984 3.996 9.56601C2.52471 11.0434 1.74365 13.0414 1.74365 15.3482C1.74365 17.534 2.46416 19.3504 4.17764 21.4937C5.02529 22.5473 8.1919 25.6291 8.71865 25.9137C8.79131 25.9561 9.01533 25.9863 9.20908 25.9863C10.2444 25.9863 10.9589 25.3021 11.0073 24.2607C11.0437 23.5705 10.8499 23.2072 10.0991 22.523C9.11221 21.6209 7.81045 20.3312 7.2958 19.7379C6.02432 18.2727 5.49756 17.2979 5.39463 16.2383L5.35225 15.8023L6.26045 15.8145L7.17471 15.8326L7.21709 16.1354C7.28369 16.5955 7.68936 17.3402 8.26455 18.0547C8.76104 18.6783 10.414 20.3736 11.0558 20.9246L11.3585 21.185L11.9034 20.9246C12.5271 20.6219 13.1991 20.3918 13.9257 20.2404C14.6462 20.0891 16.3536 20.0891 17.0741 20.2404C17.7946 20.3979 18.5999 20.6643 19.163 20.9428L19.6474 21.1789L19.8896 20.9791C20.4163 20.5432 22.2569 18.6541 22.7413 18.0486C23.3165 17.3402 23.7161 16.5955 23.7827 16.1354L23.8251 15.8326L24.7394 15.8145L25.6476 15.8023L25.6052 16.2383C25.5022 17.2857 24.9513 18.3029 23.704 19.7379C23.1894 20.3252 21.7362 21.7723 20.8401 22.5836C20.1983 23.1588 19.9804 23.5645 19.9804 24.1578C19.9804 24.733 20.1196 25.0963 20.495 25.4656C20.8946 25.8652 21.27 25.9984 21.8815 25.9621C22.1358 25.9439 22.4022 25.8834 22.5354 25.8168C22.8503 25.6533 24.703 23.9035 25.6597 22.8742C27.0462 21.3666 27.797 20.3434 28.3843 19.1566C28.9897 17.9457 29.2562 16.7953 29.2562 15.3785C29.2562 13.9738 29.0079 12.8053 28.4812 11.6912C27.3368 9.26933 25.2298 7.76777 22.6081 7.50137C21.3548 7.37422 20.1802 7.58613 19.0419 8.14316C17.8188 8.74258 16.8077 9.65078 15.9722 10.898C15.736 11.2492 15.5241 11.5338 15.4999 11.5338C15.4757 11.5338 15.2577 11.2311 15.0095 10.8678C13.3747 8.42168 10.8923 7.19863 8.17979 7.51347ZM16.2567 12.8658C16.947 13.0111 17.5222 13.332 18.0429 13.8588C18.5636 14.3916 18.8421 14.8639 19.0116 15.5359C19.2296 16.3896 19.1206 17.316 18.6968 18.1213C18.4425 18.6117 17.7038 19.3504 17.2134 19.6047C16.4081 20.0285 15.4817 20.1375 14.628 19.9195C13.956 19.75 13.4837 19.4775 12.9569 18.9508C12.4302 18.4301 12.1638 17.9699 11.9882 17.2797C11.7702 16.426 11.8792 15.4996 12.303 14.6943C12.5876 14.1494 13.3021 13.4531 13.8712 13.1746C14.6401 12.7932 15.4333 12.6902 16.2567 12.8658Z" fill="white"/>
<path d="M14.9128 14.7008C13.3143 15.2699 13.2901 17.5101 14.8764 18.1035C15.7422 18.4244 16.711 18.0369 17.1167 17.2074C17.3346 16.7593 17.3528 16.1054 17.159 15.6756C16.7655 14.8279 15.7725 14.392 14.9128 14.7008Z" fill="white"/>
<path d="M14.5312 21.9602C13.8834 22.0692 12.5332 22.5293 12.5332 22.6383C12.5332 22.6625 12.5938 22.8442 12.6604 23.044C12.842 23.5465 12.8844 24.5395 12.7512 25.0662C12.5271 25.9684 11.8732 26.8403 11.068 27.3186C10.8439 27.4518 10.6562 27.5668 10.6562 27.5789C10.6562 27.585 11.183 28.0391 11.8187 28.5901C12.4605 29.141 13.2295 29.8071 13.5322 30.0614C14.4949 30.8969 15.385 31.1633 16.3779 30.909C17.0258 30.7455 17.3346 30.5276 18.9814 29.0684L20.5859 27.6455L20.0773 27.3791C19.1752 26.9129 18.4971 26.0532 18.2488 25.0662C18.1156 24.5395 18.158 23.5465 18.3396 23.044C18.4062 22.8442 18.4668 22.6686 18.4668 22.6444C18.4668 22.5233 17.3951 22.1418 16.6867 22.0086C16.2508 21.9239 14.9187 21.8936 14.5312 21.9602Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_141_7276">
<rect width="31" height="31" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

6
assets/img/icons/hospital-building.svg
Unescape View File

@ -0,0 +1,6 @@
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.918 4.59844C11.6578 4.71797 11.4258 4.96406 11.3273 5.22422C11.2711 5.36484 11.25 9.40781 11.25 18.4992V31.5703H12.375H13.5V27.4008C13.5 23.9344 13.5211 23.168 13.6055 22.8305C13.9359 21.5578 14.9977 20.5594 16.2703 20.3273C16.8117 20.2289 19.1883 20.2289 19.7297 20.3273C20.9812 20.5523 22.05 21.5437 22.3734 22.7742C22.4789 23.1891 22.493 23.7023 22.493 27.4008L22.5 31.5703H23.625H24.75L24.7359 18.3937L24.7148 5.21016L24.5672 5.02031C24.4898 4.91484 24.3352 4.76015 24.2297 4.68281C24.0398 4.53515 23.9766 4.53515 18.0844 4.52109C13.2258 4.50703 12.0867 4.52109 11.918 4.59844ZM18.6187 9.18984C19.0266 9.49219 19.0898 9.65391 19.1109 10.4766L19.1391 11.2359L19.8984 11.2641C20.5383 11.2781 20.693 11.3062 20.8547 11.4328C21.2273 11.707 21.3398 11.932 21.3398 12.375C21.3398 12.818 21.2273 13.043 20.8547 13.3172C20.693 13.4437 20.5383 13.4719 19.8984 13.4859L19.1391 13.5141L19.1109 14.2664C19.0898 14.9766 19.0758 15.0398 18.8859 15.2859C18.4078 15.9187 17.55 15.8906 17.0578 15.2297C16.9312 15.068 16.9031 14.9133 16.8891 14.2734L16.8609 13.5141L16.1016 13.4859C15.2789 13.4648 15.1172 13.4016 14.8078 12.9797C14.6039 12.7055 14.6039 12.0445 14.8078 11.7703C15.1172 11.3484 15.2789 11.2852 16.1086 11.2641L16.875 11.2359V10.582C16.875 9.68203 17.0297 9.33047 17.543 9.09844C17.8242 8.96484 18.3797 9.01406 18.6187 9.18984Z" fill="white"/>
<path d="M7.03838 9.1125C5.80791 9.44297 4.80244 10.5047 4.57041 11.7352C4.47197 12.2484 4.47197 28.2445 4.57041 28.7648C4.68994 29.4047 5.07666 30.0938 5.58291 30.5648C6.33525 31.275 6.96807 31.5 8.2126 31.5H9.0001V20.25V9L8.2126 9.00703C7.75557 9.00703 7.25635 9.04922 7.03838 9.1125Z" fill="white"/>
<path d="M27 20.2566V31.5137L27.9703 31.4855C28.7438 31.4574 29.0109 31.4223 29.3344 31.2957C30.1852 30.9652 30.9234 30.2129 31.2891 29.2988L31.4648 28.8629L31.4859 20.4605C31.5 14.5824 31.4789 11.9457 31.4227 11.6855C31.3031 11.0879 30.9164 10.4059 30.4594 9.96992C29.7211 9.2668 28.9828 8.99961 27.7594 8.99961H27V20.2566Z" fill="white"/>
<path d="M16.4109 22.6336C16.2492 22.7039 16.0453 22.8727 15.9539 22.9992L15.7852 23.2383L15.7641 27.4008L15.75 31.5703H18H20.25V27.4711V23.3789L20.0883 23.0977C19.9898 22.9148 19.8281 22.7602 19.6172 22.6547C19.3289 22.5141 19.2164 22.5 18 22.5C16.882 22.5 16.657 22.5211 16.4109 22.6336Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

15
assets/img/icons/pictures.svg
Unescape View File

@ -0,0 +1,15 @@
<svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_141_7290)">
<path d="M9.15888 2.78687C8.85302 4.32183 8.60381 5.61323 8.60947 5.64722C8.60947 5.70386 10.1161 5.72085 15.9444 5.72085H23.2794V14.2396V22.7527L24.1913 22.9339C24.6897 23.0359 25.1202 23.0982 25.1372 23.0812C25.1995 23.0189 28.9944 3.88569 28.9548 3.84604C28.9321 3.82339 24.6444 2.96245 19.4278 1.93159C14.2112 0.895069 9.88955 0.0341305 9.82724 0.0228024C9.71963 -0.00551796 9.67998 0.15874 9.15888 2.78687Z" fill="white"/>
<path d="M0 10.1047V12.7894L5.30723 16.6353C8.22422 18.748 10.6541 20.5039 10.7051 20.5435C10.7844 20.6002 11.1979 20.3283 13.4578 18.6857C14.9191 17.6265 17.3434 15.8763 18.8443 14.7945L21.5744 12.8291V10.1217L21.5801 7.4199H10.79H0V10.1047ZM11.6793 9.67986C13.0557 10.031 14.1148 11.0959 14.449 12.4609C14.5453 12.8631 14.5453 13.758 14.449 14.1601C13.9619 16.1482 11.9965 17.383 9.99707 16.9638C9.33438 16.8279 8.71699 16.4824 8.17891 15.95C7.79375 15.5648 7.67481 15.4062 7.45957 14.9531C7.31797 14.6586 7.17637 14.2791 7.14238 14.1148C7.05176 13.6843 7.06309 12.8234 7.16504 12.4326C7.43125 11.3847 8.1959 10.4275 9.13613 9.97439C9.96875 9.56658 10.8467 9.47029 11.6793 9.67986Z" fill="white"/>
<path d="M10.1557 11.3733C9.60625 11.5716 9.24375 11.8888 8.96055 12.4269C8.82461 12.6874 8.80762 12.7724 8.80762 13.3105C8.80762 13.8825 8.81328 13.9222 9.0002 14.262C9.3457 14.8964 9.94043 15.2872 10.6484 15.3382C11.5264 15.4005 12.2967 14.936 12.6762 14.1091C12.8008 13.8429 12.8291 13.7126 12.8234 13.3048C12.8234 12.8687 12.8008 12.7724 12.6422 12.4495C12.2967 11.7472 11.6566 11.3224 10.875 11.2884C10.5635 11.2714 10.3709 11.294 10.1557 11.3733Z" fill="white"/>
<path d="M0 20.0168V25.1484H7.06309C13.9393 25.1484 14.1262 25.1484 14.0186 25.0408C13.9563 24.9842 10.807 22.7016 7.02344 19.9658C3.23984 17.2301 0.107617 14.9701 0.0736328 14.9361C0.0169922 14.8965 0 15.916 0 20.0168Z" fill="white"/>
<path d="M16.9244 18.2553C14.3813 20.1018 12.2969 21.6254 12.2969 21.648C12.2912 21.6707 13.3674 22.4637 14.6815 23.4152L17.0717 25.1484H19.326H21.5803V20.0225C21.5803 17.2018 21.5746 14.8965 21.569 14.9021C21.5576 14.9021 19.4676 16.4145 16.9244 18.2553Z" fill="white"/>
<path d="M0 27.9238V29H10.79H21.5801V27.9238V26.8477H10.79H0V27.9238Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_141_7290">
<rect width="29" height="29" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

7
assets/img/icons/repair-tools.svg
Unescape View File

@ -0,0 +1,7 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.979" fill-rule="evenodd" clip-rule="evenodd" d="M11.9561 2.0304C14.5598 1.87695 16.719 2.77929 18.4336 4.73743C18.5695 5.01335 18.5588 5.2819 18.4014 5.54309C18.2811 5.60656 18.1522 5.63879 18.0146 5.63977C17.4981 5.50705 16.9825 5.3674 16.4678 5.22083C15.3975 4.99926 14.3877 5.14965 13.4385 5.672C13.3203 5.79016 13.2021 5.90833 13.084 6.02649C13.0099 6.17176 12.9883 6.32215 13.0195 6.47766C13.5977 7.12026 14.1992 7.74333 14.8242 8.34681C14.8842 8.47307 14.9379 8.60197 14.9854 8.73352C14.9379 8.86507 14.8842 8.99398 14.8242 9.12024C13.2666 10.6779 11.709 12.2355 10.1514 13.7931C9.94241 13.9429 9.72752 13.9644 9.50684 13.8575C9.16517 13.5804 8.8429 13.2797 8.54004 12.9552C8.17917 12.7862 7.91065 12.8829 7.73438 13.2452C7.70698 13.4497 7.72851 13.643 7.79883 13.8253C6.41309 12.4396 5.02734 11.0538 3.6416 9.66809C3.8337 9.7834 4.04854 9.82639 4.28613 9.797C4.58398 9.66313 4.70215 9.43755 4.64062 9.12024C4.51426 8.92927 4.36386 8.75744 4.18945 8.60462C4.12945 8.47835 4.07574 8.34945 4.02832 8.2179C4.07574 8.08635 4.12945 7.95744 4.18945 7.83118C5.64146 6.35767 7.11311 4.90747 8.60449 3.48059C9.60964 2.73076 10.7269 2.24736 11.9561 2.0304Z" fill="white"/>
<path opacity="0.978" fill-rule="evenodd" clip-rule="evenodd" d="M24.9111 2.03037C25.9158 1.92635 26.8826 2.066 27.8115 2.44932C28.0244 2.69392 28.0566 2.96248 27.9082 3.25498C27.0489 4.11436 26.1894 4.97374 25.3301 5.83311C25.4155 6.30447 25.523 6.77709 25.6523 7.25108C26.1114 7.38469 26.5733 7.5136 27.0381 7.6378C27.9288 6.77935 28.8096 5.90922 29.6807 5.02744C30.0177 4.85849 30.3077 4.9122 30.5508 5.18858C31.3958 7.72249 30.7835 9.81721 28.7139 11.4728C27.4263 12.2803 26.0298 12.5596 24.5244 12.3106C23.5443 13.3124 22.5453 14.2899 21.5273 15.2433C20.2061 14.0079 18.9278 12.7296 17.6924 11.4083C18.6458 10.3904 19.6233 9.39137 20.625 8.41123C20.2565 6.03301 21.0407 4.15313 22.9775 2.77159C23.5931 2.4271 24.2377 2.18003 24.9111 2.03037Z" fill="white"/>
<path opacity="0.959" fill-rule="evenodd" clip-rule="evenodd" d="M2.22359 9.76512C2.29139 9.75552 2.35585 9.76622 2.41695 9.79735C4.16793 11.5483 5.9189 13.2993 7.66988 15.0503C7.71287 15.1147 7.71287 15.1792 7.66988 15.2436C7.29192 15.6432 6.89444 16.0191 6.47749 16.3716C5.9189 16.6724 5.36031 16.6724 4.80171 16.3716C3.52339 15.1792 2.28804 13.9438 1.09566 12.6655C0.771317 12.0164 0.814288 11.3933 1.22456 10.7964C1.57066 10.4611 1.90367 10.1174 2.22359 9.76512Z" fill="white"/>
<path opacity="0.977" fill-rule="evenodd" clip-rule="evenodd" d="M14.9854 10.2163C15.0532 10.2067 15.1176 10.2174 15.1787 10.2485C20.5606 15.6304 25.9424 21.0122 31.3242 26.394C32.3264 27.8558 32.1867 29.1986 30.9053 30.4223C29.7155 31.1842 28.5553 31.1413 27.4248 30.2934C22.043 24.9116 16.6611 19.5298 11.2793 14.1479C11.2363 14.0835 11.2363 14.019 11.2793 13.9546C12.5276 12.717 13.763 11.4709 14.9854 10.2163Z" fill="white"/>
<path opacity="0.98" fill-rule="evenodd" clip-rule="evenodd" d="M12.3426 16.6616C12.4104 16.652 12.4748 16.6627 12.5359 16.6938C13.748 17.9703 14.9833 19.2272 16.242 20.4643C16.285 20.5073 16.285 20.5503 16.242 20.5932C14.9314 21.9038 13.6209 23.2144 12.3103 24.5249C12.6788 26.9031 11.8946 28.783 9.95779 30.1645C8.42697 31.0018 6.8371 31.1308 5.18826 30.5513C4.91188 30.3082 4.85817 30.0182 5.02713 29.6811C5.9089 28.8101 6.77903 27.9292 7.63748 27.0386C7.50935 26.5905 7.3912 26.1394 7.28299 25.685C6.82395 25.5514 6.36205 25.4225 5.89724 25.2983C5.00654 26.1568 4.12569 27.0269 3.25467 27.9087C2.89155 28.0876 2.60151 28.0124 2.38455 27.6831C1.53805 25.0667 2.21481 22.9505 4.41482 21.3345C5.66139 20.6254 6.9934 20.3891 8.41092 20.6255C9.73446 19.3127 11.045 17.9914 12.3426 16.6616Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

26
assets/js/sliders.js
Unescape View File

@ -1,5 +1,6 @@
let factsSwiper = null; let factsSwiper = null;
let whyProgramSwiper = null; let whyProgramSwiper = null;
let socializationSwiper = null;
let init = false; let init = false;
@ -56,10 +57,35 @@ function swiperMode() {
prevEl: '.why-program .button--prev', prevEl: '.why-program .button--prev',
}, },
}); });
socializationSwiper = new Swiper('.socialization .swiper', {
loop: true,
slidesPerView: 1,
spaceBetween: 35,
breakpoints: {
320: {
slidesPerView: 1.2,
},
480: {
slidesPerView: 1.4,
},
576: {
slidesPerView: 1.75,
},
700: {
slidesPerView: 2,
},
},
navigation: {
nextEl: '.socialization .button--next',
prevEl: '.socialization .button--prev',
},
});
} }
} else { } else {
if (factsSwiper !== null) factsSwiper.destroy(); if (factsSwiper !== null) factsSwiper.destroy();
if (whyProgramSwiper !== null) whyProgramSwiper.destroy(); if (whyProgramSwiper !== null) whyProgramSwiper.destroy();
if (socializationSwiper !== null) socializationSwiper.destroy();
init = false; init = false;
} }
} }

154
assets/scss/_l-socialization.scss
Unescape View File

@ -0,0 +1,154 @@
.socialization {
margin: 110px 0 97px;
@include tablet {
margin: 90px 0 90px;
}
& .container {
position: relative;
}
&__title {
margin: 18px 0 22px;
@include tablet {
margin: 21px 0 8px;
}
}
&__slider {
& .swiper {
overflow: visible;
@include laptop {
overflow: hidden;
}
&-wrapper {
position: static;
flex-wrap: wrap;
@media screen and (min-width: 992.1px) {
gap: 40px;
}
@include laptop {
position: relative;
flex-wrap: nowrap;
}
}
&-slide {
position: static;
height: auto;
@media screen and (min-width: 992.1px) {
flex: 0 0 calc(100% / 3 - 40px / 3 * 2);
}
@include laptop {
position: relative;
}
&:nth-child(-n + 2) {
@media screen and (min-width: 992.1px) {
flex: 0 0 calc(100% / 2 - 40px / 2);
}
}
}
}
}
&__slide {
height: 100%;
padding: 24px 36px 34px;
box-sizing: border-box;
border-radius: 22px 40px;
background-color: $white;
@include desktop {
padding: 24px 20px 36px;
}
@include laptop {
padding: 24px 14px 36px;
}
&-figure {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
width: 64px;
margin: 0 0 18px;
border-radius: 64px;
background-color: $blue;
@include laptop {
margin: 0 auto 18px;
}
&-image {
display: block;
max-width: 100%;
height: auto;
}
}
&-count {
margin: 0 0 6px;
font-weight: 700;
font-size: 59px;
line-height: 127%;
letter-spacing: 0.05em;
color: $white;
-webkit-text-stroke: 1px $blue;
@include laptop {
text-align: center;
}
@include mobile {
font-size: 50px;
}
}
&-title {
margin: 0 0 9px;
@include laptop {
text-align: center;
}
}
&-text {
margin: 0;
font-weight: 400;
font-size: 17px;
line-height: 146%;
color: $grey;
& > b {
font-weight: 600;
}
@include laptop {
font-size: 15px;
text-align: center;
}
}
}
&__slider-controls {
display: none;
justify-content: center;
align-items: center;
gap: 24px;
margin: 35px 0 0;
@include laptop {
display: flex;
}
}
}

1
assets/scss/index.scss
Unescape View File

@ -26,3 +26,4 @@
@import './l-why-program'; @import './l-why-program';
@import './l-conditions'; @import './l-conditions';
@import './l-how-it-work'; @import './l-how-it-work';
@import './l-socialization';

108
index.html
Unescape View File

@ -1199,6 +1199,114 @@
</div> </div>
</div> </div>
</section> </section>
<section class="socialization">
<div class="container">
<div class="tag">Социальная жизнь</div>
<h2 class="socialization__title">
Участник программы <br />
<span>не выбивается из социальной жизни</span>
</h2>
<div class="socialization__slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="socialization__slide">
<figure class="socialization__slide-figure">
<img
class="socialization__slide-figure-image"
src="./assets/img/icons/family.svg"
alt="family"
/>
</figure>
<h3 class="socialization__slide-title">Встречи с родными</h3>
<p class="socialization__slide-text">
По рекомендации лечащего врача и при согласовании с куратором близкие могут
посещать участника программы. Их поддержка очень важна для вас в этот
непростой период
</p>
</div>
</div>
<div class="swiper-slide">
<div class="socialization__slide">
<figure class="socialization__slide-figure">
<img
class="socialization__slide-figure-image"
src="./assets/img/icons/pictures.svg"
alt="pictures"
/>
</figure>
<h3 class="socialization__slide-title">Передачи из дома</h3>
<p class="socialization__slide-text">
Разрешается получать переданные родственниками вещи первой необходимости,
предметы гигиены, фото и письма, вселяющие дополнительные позитивные эмоции
</p>
</div>
</div>
<div class="swiper-slide">
<div class="socialization__slide">
<figure class="socialization__slide-figure">
<img
class="socialization__slide-figure-image"
src="./assets/img/icons/hospital-building.svg"
alt="hospital-building"
/>
</figure>
<h3 class="socialization__slide-title">Посещение клиник</h3>
<p class="socialization__slide-text">
При необходимости прохождения диагностических процедур или плановых осмотров у
сторонних специалистов, участника могут отвезти к специалисту
</p>
</div>
</div>
<div class="swiper-slide">
<div class="socialization__slide">
<figure class="socialization__slide-figure">
<img
class="socialization__slide-figure-image"
src="./assets/img/icons/crest.svg"
alt="crest"
/>
</figure>
<h3 class="socialization__slide-title">Официальные инстанции</h3>
<p class="socialization__slide-text">
Если требуется ваше присутствие в государственных учреждениях (миграционная
служба, суд, милиция), мы обеспечим безопасный трансфер и сопровождение
</p>
</div>
</div>
<div class="swiper-slide">
<div class="socialization__slide">
<figure class="socialization__slide-figure">
<img
class="socialization__slide-figure-image"
src="./assets/img/icons/repair-tools.svg"
alt="repair-tools"
/>
</figure>
<h3 class="socialization__slide-title">Налаживание быта</h3>
<p class="socialization__slide-text">
По мере восстановления социальных навыков вы сможете совершать вылазки в город
для решения бытовых вопросов под наблюдением кураторов
</p>
</div>
</div>
</div>
</div>
</div>
<div class="socialization__slider-controls">
<button class="button button--prev"></button>
<button class="button button--next"></button>
</div>
</div>
</section>
</main> </main>
<script src="./assets/js/swiper-bundle.min.js" defer></script> <script src="./assets/js/swiper-bundle.min.js" defer></script>

Write Preview
Loading…
Cancel
Save