├── .idea ├── .gitignore ├── .name ├── codeStyles │ └── codeStyleConfig.xml ├── modules.xml ├── positivus.iml ├── vcs.xml └── watcherTasks.xml ├── README.md ├── fonts ├── SpaceGrotesk-Medium.woff2 └── SpaceGrotesk-Regular.woff2 ├── images ├── banner-bg.svg ├── contact-us-bg.svg ├── hero-bg.svg ├── icons │ ├── arrow-left.svg │ ├── arrow-right.svg │ ├── arrow-top-right.svg │ ├── facebook.svg │ ├── linkedin.svg │ ├── star.svg │ └── twitter.svg ├── logo-light.svg ├── logo.svg ├── partners │ ├── amazon.svg │ ├── dribble.svg │ ├── hubspot.svg │ ├── netflix.svg │ ├── notion.svg │ └── zoom.svg ├── services │ ├── 1.svg │ ├── 2.svg │ ├── 3.svg │ ├── 4.svg │ ├── 5.svg │ └── 6.svg └── team │ ├── 1.svg │ ├── 2.svg │ ├── 3.svg │ ├── 4.svg │ ├── 5.svg │ └── 6.svg ├── index.html └── styles ├── _fonts.scss ├── _globals.scss ├── _media.scss ├── _mixins.scss ├── _normalize.scss ├── _utils.scss ├── _variables.scss ├── blocks ├── _banner.scss ├── _burger-button.scss ├── _button.scss ├── _contact-us.scss ├── _cross-button.scss ├── _field.scss ├── _footer.scss ├── _grid.scss ├── _header.scss ├── _hero.scss ├── _mobile-overlay.scss ├── _pagination.scss ├── _process.scss ├── _puddle-bg.scss ├── _radio.scss ├── _radios.scss ├── _review-card.scss ├── _reviews.scss ├── _section.scss ├── _service-card.scss ├── _services.scss ├── _soc1als.scss ├── _studies.scss ├── _subscribe-form.scss ├── _team-card.scss └── _team.scss ├── styles.css ├── styles.css.map └── styles.scss /.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | # Editor-based HTTP Client requests 5 | /httpRequests/ 6 | -------------------------------------------------------------------------------- /.idea/.name: -------------------------------------------------------------------------------- 1 | styles.css -------------------------------------------------------------------------------- /.idea/codeStyles/codeStyleConfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /.idea/positivus.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /.idea/vcs.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /.idea/watcherTasks.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 16 | 24 | 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # positivus 2 | Адаптивная верстка сайта по макету для [YouTube-канала](https://www.youtube.com/@AleksanderLamkov) 3 | 4 | [Плейлист](https://youtube.com/playlist?list=PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=31wO-_KHV51BogqC) 5 | -------------------------------------------------------------------------------- /fonts/SpaceGrotesk-Medium.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleksanderlamkov/positivus/3fd6baf300c78b60f2415aac8116d1b42900f907/fonts/SpaceGrotesk-Medium.woff2 -------------------------------------------------------------------------------- /fonts/SpaceGrotesk-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aleksanderlamkov/positivus/3fd6baf300c78b60f2415aac8116d1b42900f907/fonts/SpaceGrotesk-Regular.woff2 -------------------------------------------------------------------------------- /images/banner-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /images/contact-us-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /images/hero-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /images/icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/icons/arrow-top-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /images/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /images/icons/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /images/logo-light.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /images/partners/amazon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /images/partners/dribble.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /images/partners/hubspot.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /images/partners/netflix.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /images/partners/notion.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /images/partners/zoom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /images/services/1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /images/services/2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /images/services/3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /images/services/4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /images/services/5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /images/services/6.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Space Grotesk'; 3 | src: url('../fonts/SpaceGrotesk-Regular.woff2') format('woff2'); 4 | font-weight: 400; 5 | font-style: normal; 6 | font-display: swap; 7 | } 8 | 9 | @font-face { 10 | font-family: 'Space Grotesk'; 11 | src: url('../fonts/SpaceGrotesk-Medium.woff2') format('woff2'); 12 | font-weight: 500; 13 | font-style: normal; 14 | font-display: swap; 15 | } 16 | -------------------------------------------------------------------------------- /styles/_globals.scss: -------------------------------------------------------------------------------- 1 | body { 2 | @include fluid-text(18, 16); 3 | 4 | font-family: var(--font-family-base); 5 | font-weight: 400; 6 | line-height: 1.28; 7 | color: var(--color-dark); 8 | background-color: var(--color-light); 9 | } 10 | 11 | a, 12 | button, 13 | input, 14 | textarea, 15 | svg * { 16 | transition-duration: var(--transition-duration); 17 | } 18 | 19 | a { 20 | text-decoration: none; 21 | color: inherit; 22 | } 23 | 24 | h1, h2, h3, h4 { 25 | font-weight: 500; 26 | } 27 | 28 | h1, .h1 { 29 | @include fluid-text(60, 43); 30 | } 31 | 32 | h2, .h2 { 33 | @include fluid-text(40, 36); 34 | } 35 | 36 | h3, .h3 { 37 | @include fluid-text(30, 26); 38 | } 39 | 40 | h4, .h4 { 41 | @include fluid-text(20, 18); 42 | } -------------------------------------------------------------------------------- /styles/_media.scss: -------------------------------------------------------------------------------- 1 | $desktop-above: 1281px; 2 | $desktop: 1280px; 3 | 4 | $tablet-above: 1024px; 5 | $tablet: 1023px; 6 | 7 | $mobile-above: 768px; 8 | $mobile: 767px; 9 | 10 | $mobile-s-above: 481px; 11 | $mobile-s: 480px; 12 | 13 | @mixin desktop-above { 14 | @media (min-width: $desktop-above) { 15 | @content; 16 | } 17 | } 18 | 19 | @mixin desktop { 20 | @media (max-width: $desktop) { 21 | @content; 22 | } 23 | } 24 | 25 | @mixin tablet-above { 26 | @media (min-width: $tablet-above) { 27 | @content; 28 | } 29 | } 30 | 31 | @mixin tablet { 32 | @media (max-width: $tablet) { 33 | @content; 34 | } 35 | } 36 | 37 | @mixin mobile-above { 38 | @media (min-width: $mobile-above) { 39 | @content; 40 | } 41 | } 42 | 43 | @mixin mobile { 44 | @media (max-width: $mobile) { 45 | @content; 46 | } 47 | } 48 | 49 | @mixin mobile-s-above { 50 | @media (min-width: $mobile-s-above) { 51 | @content; 52 | } 53 | } 54 | 55 | @mixin mobile-s { 56 | @media (max-width: $mobile-s) { 57 | @content; 58 | } 59 | } 60 | 61 | @mixin hover { 62 | @media (hover: hover) { 63 | &:hover { 64 | @content; 65 | } 66 | } 67 | 68 | @media (hover: none) { 69 | &:active { 70 | @content; 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin fluid-text($max: 48, $min: 16) { 2 | font-size: clamp(#{$min}px, #{$max / 1440 * 100}vw, #{$max}px); 3 | } 4 | 5 | @mixin reset-link { 6 | color: inherit; 7 | 8 | &, 9 | &:hover { 10 | text-decoration: none; 11 | } 12 | } 13 | 14 | @mixin reset-button { 15 | padding: 0; 16 | background-color: transparent; 17 | border: none; 18 | } 19 | 20 | @mixin flex-center($isInline: false) { 21 | @if $isInline { 22 | display: inline-flex; 23 | } @else { 24 | display: flex; 25 | } 26 | 27 | justify-content: center; 28 | align-items: center; 29 | } 30 | 31 | @mixin abs-center { 32 | position: absolute; 33 | top: 50%; 34 | left: 50%; 35 | translate: -50% -50%; 36 | } 37 | 38 | @mixin square($size) { 39 | width: $size; 40 | aspect-ratio: 1; 41 | } 42 | 43 | @mixin visually-hidden { 44 | position: absolute !important; 45 | width: 1px !important; 46 | height: 1px !important; 47 | margin: -1px !important; 48 | border: 0 !important; 49 | padding: 0 !important; 50 | white-space: nowrap !important; 51 | clip-path: inset(100%) !important; 52 | clip: rect(0 0 0 0) !important; 53 | overflow: hidden !important; 54 | } -------------------------------------------------------------------------------- /styles/_normalize.scss: -------------------------------------------------------------------------------- 1 | /** 2 | Нормализация блочной модели 3 | */ 4 | *, 5 | *::before, 6 | *::after { 7 | box-sizing: border-box; 8 | } 9 | 10 | /** 11 | Убираем внутренние отступы слева тегам списков, 12 | у которых есть атрибут class 13 | */ 14 | :where(ul, ol):where([class]) { 15 | padding-left: 0; 16 | } 17 | 18 | /** 19 | Убираем внешние отступы body и двум другим тегам, 20 | у которых есть атрибут class 21 | */ 22 | body, 23 | :where(blockquote, figure):where([class]) { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | Убираем внешние отступы вертикали нужным тегам, 29 | у которых есть атрибут class 30 | */ 31 | :where( 32 | h1, 33 | h2, 34 | h3, 35 | h4, 36 | h5, 37 | h6, 38 | p, 39 | ul, 40 | ol, 41 | dl 42 | ):where([class]) { 43 | margin-block: 0; 44 | } 45 | 46 | :where(dd[class]) { 47 | margin-left: 0; 48 | } 49 | 50 | :where(fieldset[class]) { 51 | margin-left: 0; 52 | padding: 0; 53 | border: none; 54 | } 55 | 56 | /** 57 | Убираем стандартный маркер маркированному списку, 58 | у которого есть атрибут class 59 | */ 60 | :where(ul[class]) { 61 | list-style: none; 62 | } 63 | 64 | /** 65 | Обнуляем вертикальные внешние отступы параграфа, 66 | объявляем локальную переменную для внешнего отступа вниз, 67 | чтобы избежать взаимодействие с более сложным селектором 68 | */ 69 | p { 70 | --paragraphMarginBottom: 24px; 71 | 72 | margin-block: 0; 73 | } 74 | 75 | /** 76 | Внешний отступ вниз для параграфа без атрибута class, 77 | который расположен не последним среди своих соседних элементов 78 | */ 79 | p:where(:not([class]):not(:last-child)) { 80 | margin-bottom: var(--paragraphMarginBottom); 81 | } 82 | 83 | 84 | /** 85 | Упрощаем работу с изображениями 86 | */ 87 | img { 88 | display: block; 89 | max-width: 100%; 90 | } 91 | 92 | /** 93 | Наследуем свойства шрифт для полей ввода 94 | */ 95 | input, 96 | textarea, 97 | select, 98 | button { 99 | font: inherit; 100 | } 101 | 102 | html { 103 | /** 104 | Пригодится в большинстве ситуаций 105 | (когда, например, нужно будет "прижать" футер к низу сайта) 106 | */ 107 | height: 100%; 108 | /** 109 | Плавный скролл 110 | */ 111 | scroll-behavior: smooth; 112 | } 113 | 114 | body { 115 | /** 116 | Пригодится в большинстве ситуаций 117 | (когда, например, нужно будет "прижать" футер к низу сайта) 118 | */ 119 | min-height: 100%; 120 | /** 121 | Унифицированный интерлиньяж 122 | */ 123 | line-height: 1.5; 124 | } 125 | 126 | /** 127 | Приводим к единому цвету svg-элементы 128 | */ 129 | svg *[fill] { fill: currentColor } 130 | svg *[stroke] { stroke: currentColor } 131 | 132 | /** 133 | Чиним баг задержки смены цвета при взаимодействии с svg-элементами 134 | */ 135 | svg * { 136 | transition-property: fill, stroke; 137 | } 138 | 139 | /** 140 | Удаляем все анимации и переходы для людей, 141 | которые предпочитают их не использовать 142 | */ 143 | @media (prefers-reduced-motion: reduce) { 144 | * { 145 | animation-duration: 0.01ms !important; 146 | animation-iteration-count: 1 !important; 147 | transition-duration: 0.01ms !important; 148 | scroll-behavior: auto !important; 149 | } 150 | } -------------------------------------------------------------------------------- /styles/_utils.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: calc(var(--container-width) + var(--container-padding-x) * 2); 3 | margin-inline: auto; 4 | padding-inline: var(--container-padding-x); 5 | } 6 | 7 | .visually-hidden { 8 | @include visually-hidden; 9 | } 10 | 11 | .hidden-mobile { 12 | @include mobile { 13 | display: none !important; 14 | } 15 | } 16 | 17 | .visible-mobile { 18 | @include mobile-above { 19 | display: none !important; 20 | } 21 | } -------------------------------------------------------------------------------- /styles/_variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-dark: #191A23; 3 | --color-dark-alt: #292A32; 4 | --color-light: #FFFFFF; 5 | --color-accent: #B9FF66; 6 | --color-gray: #F3F3F3; 7 | --color-gray-alt: #898989; 8 | 9 | --border: 1px solid var(--color-dark); 10 | --border-radius: 14px; 11 | --border-radius-small: 7px; 12 | --border-radius-large: 45px; 13 | 14 | --shadow: 0 5px 0 0 var(--color-dark); 15 | 16 | --font-family-base: 'Space Grotesk', sans-serif; 17 | 18 | --container-width: 1240px; 19 | --container-padding-x: 20px; 20 | 21 | --section-padding-y: 70px; 22 | 23 | --input-height: 59px; 24 | --button-height: 68px; 25 | 26 | --transition-duration: 0.2s; 27 | 28 | @include desktop { 29 | --section-padding-y: 50px; 30 | } 31 | 32 | @include mobile { 33 | --section-padding-y: 30px; 34 | } 35 | } -------------------------------------------------------------------------------- /styles/blocks/_banner.scss: -------------------------------------------------------------------------------- 1 | .banner { 2 | --bannerImageOffsetY: 24px; 3 | 4 | padding-block: var(--bannerImageOffsetY); 5 | 6 | @include tablet { 7 | --bannerImageOffsetY: 0; 8 | } 9 | 10 | &__inner { 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | background-color: var(--color-gray); 15 | border-radius: var(--border-radius-large); 16 | } 17 | 18 | &__body { 19 | display: flex; 20 | flex-direction: column; 21 | align-items: start; 22 | row-gap: 26px; 23 | padding: 60px; 24 | 25 | @include tablet { 26 | padding: 50px; 27 | } 28 | 29 | @include mobile { 30 | row-gap: 20px; 31 | } 32 | } 33 | 34 | &__description { 35 | max-width: 500px; 36 | } 37 | 38 | &__image { 39 | margin-block: calc(var(--bannerImageOffsetY) * -1); 40 | 41 | @include tablet { 42 | max-width: 40%; 43 | height: auto; 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /styles/blocks/_burger-button.scss: -------------------------------------------------------------------------------- 1 | .burger-button { 2 | @include reset-button; 3 | @include square(48px); 4 | 5 | position: relative; 6 | border-radius: var(--border-radius-small); 7 | 8 | @include hover { 9 | background-color: var(--color-accent); 10 | } 11 | 12 | &::after { 13 | @include abs-center; 14 | 15 | content: ''; 16 | width: 50%; 17 | height: 2px; 18 | background-color: var(--color-dark); 19 | border-radius: 5px; 20 | box-shadow: 0 -8px, 0 8px; 21 | } 22 | } -------------------------------------------------------------------------------- /styles/blocks/_button.scss: -------------------------------------------------------------------------------- 1 | .button { 2 | @include flex-center(true); 3 | 4 | height: var(--button-height); 5 | padding-inline: 35px; 6 | font-size: 20px; 7 | color: var(--color-light); 8 | background-color: var(--color-dark); 9 | border: var(--border); 10 | border-radius: var(--border-radius); 11 | 12 | @include hover { 13 | color: var(--color-dark); 14 | background-color: var(--color-accent); 15 | } 16 | 17 | &--transparent { 18 | color: var(--color-dark); 19 | background-color: transparent; 20 | } 21 | 22 | &--accent { 23 | color: var(--color-dark); 24 | background-color: var(--color-accent); 25 | 26 | @include hover { 27 | color: var(--color-accent); 28 | background-color: var(--color-dark); 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /styles/blocks/_contact-us.scss: -------------------------------------------------------------------------------- 1 | .contact-us { 2 | position: relative; 3 | overflow-x: hidden; 4 | 5 | @include mobile-above { 6 | padding: 60px 100px 80px; 7 | background-color: var(--color-gray); 8 | border-radius: var(--border-radius-large); 9 | } 10 | 11 | &::after { 12 | --contactUsImageOffsetY: 62px; 13 | 14 | content: ''; 15 | position: absolute; 16 | top: 50%; 17 | left: 100%; 18 | translate: -50% -50%; 19 | height: calc(100% - var(--contactUsImageOffsetY) * 2); 20 | aspect-ratio: 1; 21 | background: 22 | url('../../images/contact-us-bg.svg') 23 | center/contain no-repeat; 24 | 25 | @include tablet { 26 | display: none; 27 | } 28 | } 29 | 30 | &__form, 31 | &__body { 32 | display: flex; 33 | flex-direction: column; 34 | } 35 | 36 | &__request-types, 37 | &__body { 38 | @include mobile { 39 | background-color: var(--color-gray); 40 | } 41 | } 42 | 43 | &__request-types { 44 | @include mobile { 45 | padding: 40px 52px 36px; 46 | border-radius: 47 | var(--border-radius-large) 48 | var(--border-radius-large) 49 | 0 50 | 0; 51 | } 52 | } 53 | 54 | &__form { 55 | @include tablet-above { 56 | max-width: 556px; 57 | } 58 | 59 | @include mobile-above { 60 | row-gap: 40px; 61 | } 62 | } 63 | 64 | &__body { 65 | row-gap: 25px; 66 | 67 | @include mobile { 68 | row-gap: 20px; 69 | margin-bottom: 30px; 70 | padding: 10px 30px 50px; 71 | border-radius: 72 | 0 73 | 0 74 | var(--border-radius-large) 75 | var(--border-radius-large); 76 | } 77 | } 78 | } -------------------------------------------------------------------------------- /styles/blocks/_cross-button.scss: -------------------------------------------------------------------------------- 1 | .cross-button { 2 | @include reset-button; 3 | @include square(48px); 4 | 5 | position: relative; 6 | border-radius: var(--border-radius-small); 7 | 8 | @include hover { 9 | background-color: var(--color-accent); 10 | } 11 | 12 | &::before, 13 | &::after { 14 | content: ''; 15 | position: absolute; 16 | top: 50%; 17 | left: 7px; 18 | width: 70%; 19 | height: 2px; 20 | background-color: var(--color-dark); 21 | border-radius: 5px; 22 | } 23 | 24 | &::before { 25 | rotate: 45deg; 26 | } 27 | 28 | &::after { 29 | rotate: -45deg; 30 | } 31 | } -------------------------------------------------------------------------------- /styles/blocks/_field.scss: -------------------------------------------------------------------------------- 1 | .field { 2 | --fieldInputHeight: var(--input-height); 3 | --fieldInputTextColor: var(--color-dark); 4 | --fieldInputBgColor: var(--color-light); 5 | --fieldInputBorderColor: var(--color-dark); 6 | --fieldInputPlaceholderColor: var(--color-dark-alt); 7 | --fieldInputHoverBgColor: var(--color-accent); 8 | 9 | display: flex; 10 | flex-direction: column; 11 | align-items: start; 12 | row-gap: 5px; 13 | 14 | @include mobile { 15 | row-gap: 10px; 16 | } 17 | 18 | &--big-height { 19 | --fieldInputHeight: var(--button-height); 20 | } 21 | 22 | &--dark-bg { 23 | --fieldInputTextColor: var(--color-accent); 24 | --fieldInputBgColor: var(--color-dark-alt); 25 | --fieldInputBorderColor: var(--color-light); 26 | --fieldInputPlaceholderColor: var(--color-light); 27 | --fieldInputHoverBgColor: var(--color-dark); 28 | } 29 | 30 | &__label { 31 | @include fluid-text(16, 14); 32 | } 33 | 34 | &__input { 35 | width: 100%; 36 | height: var(--fieldInputHeight); 37 | padding-inline: 30px; 38 | color: var(--fieldInputTextColor); 39 | background-color: var(--fieldInputBgColor); 40 | border: 1px solid var(--fieldInputBorderColor); 41 | border-radius: var(--border-radius); 42 | 43 | @include hover { 44 | background-color: var(--fieldInputHoverBgColor); 45 | } 46 | 47 | @include mobile { 48 | padding-inline: 20px; 49 | } 50 | 51 | &:focus { 52 | border-color: var(--color-accent); 53 | outline: none; 54 | } 55 | 56 | &::placeholder { 57 | color: var(--fieldInputPlaceholderColor); 58 | } 59 | 60 | &--textarea { 61 | height: 190px; 62 | padding-block: 18px; 63 | resize: none; 64 | 65 | @include mobile { 66 | height: 132px; 67 | } 68 | } 69 | } 70 | } -------------------------------------------------------------------------------- /styles/blocks/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | @include mobile { 3 | padding-inline: 0; 4 | } 5 | 6 | &__inner { 7 | padding: 55px 60px 50px; 8 | color: var(--color-light); 9 | background-color: var(--color-dark); 10 | 11 | @include mobile-above { 12 | border-radius: 13 | var(--border-radius-large) var(--border-radius-large) 14 | 0 0; 15 | } 16 | 17 | @include mobile { 18 | display: flex; 19 | flex-direction: column; 20 | align-items: center; 21 | row-gap: 37px; 22 | padding: 50px var(--container-padding-x) 30px; 23 | } 24 | } 25 | 26 | &__navigation { 27 | display: flex; 28 | justify-content: space-between; 29 | align-items: center; 30 | column-gap: 30px; 31 | 32 | @include tablet { 33 | flex-direction: column; 34 | align-items: center; 35 | row-gap: 37px; 36 | } 37 | 38 | @include mobile { 39 | display: contents; 40 | } 41 | 42 | &:not(:last-child) { 43 | margin-bottom: 66px; 44 | } 45 | } 46 | 47 | &__menu { 48 | &-list { 49 | display: flex; 50 | align-items: center; 51 | column-gap: 40px; 52 | 53 | @include mobile { 54 | flex-direction: column; 55 | row-gap: 15px; 56 | } 57 | } 58 | 59 | &-link { 60 | display: inline-flex; 61 | align-items: center; 62 | height: 30px; 63 | text-decoration: underline; 64 | 65 | @include hover { 66 | color: var(--color-accent); 67 | } 68 | } 69 | } 70 | 71 | &__soc1als { 72 | @include mobile { 73 | order: 1; 74 | } 75 | } 76 | 77 | &__body { 78 | display: flex; 79 | justify-content: space-between; 80 | column-gap: 50px; 81 | 82 | @include mobile-above { 83 | &:not(:last-child) { 84 | margin-bottom: 50px; 85 | padding-bottom: 50px; 86 | border-bottom: 1px solid currentColor; 87 | } 88 | } 89 | 90 | @include mobile { 91 | flex-direction: column; 92 | align-items: center; 93 | row-gap: inherit; 94 | } 95 | 96 | @include mobile-s { 97 | width: 100%; 98 | } 99 | } 100 | 101 | &__contacts { 102 | display: flex; 103 | flex-direction: column; 104 | align-items: start; 105 | row-gap: 27px; 106 | 107 | @include mobile { 108 | align-items: center; 109 | text-align: center; 110 | } 111 | 112 | &-title { 113 | color: var(--color-dark); 114 | } 115 | 116 | &-body { 117 | font-style: normal; 118 | 119 | p { 120 | --paragraphMarginBottom: 20px; 121 | } 122 | 123 | a { 124 | @include hover { 125 | color: var(--color-accent); 126 | } 127 | } 128 | } 129 | } 130 | 131 | &__extra { 132 | display: flex; 133 | column-gap: 40px; 134 | 135 | @include mobile { 136 | order: 2; 137 | flex-direction: column; 138 | align-items: center; 139 | row-gap: 15px; 140 | width: 100%; 141 | padding-top: 37px; 142 | border-top: 1px solid currentColor; 143 | } 144 | } 145 | 146 | &__privacy-policy-link { 147 | text-decoration: underline; 148 | 149 | @include hover { 150 | color: var(--color-accent); 151 | } 152 | } 153 | } -------------------------------------------------------------------------------- /styles/blocks/_grid.scss: -------------------------------------------------------------------------------- 1 | .grid { 2 | --gridColumns: 1; 3 | 4 | display: grid; 5 | grid-template-columns: repeat(var(--gridColumns), 1fr); 6 | gap: 40px; 7 | 8 | @include mobile { 9 | gap: 30px; 10 | } 11 | 12 | @for $i from 2 through 12 { 13 | &--#{$i} { 14 | --gridColumns: #{$i}; 15 | } 16 | } 17 | 18 | &--2 { 19 | @include tablet { 20 | --gridColumns: 1; 21 | } 22 | } 23 | 24 | &--3 { 25 | @include desktop { 26 | --gridColumns: 2; 27 | } 28 | 29 | @include mobile { 30 | --gridColumns: 1; 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /styles/blocks/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | padding-top: 60px; 3 | 4 | @include desktop { 5 | padding-top: 30px; 6 | } 7 | 8 | @include mobile { 9 | padding-top: 15px; 10 | } 11 | 12 | &__inner { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | column-gap: 40px; 17 | 18 | @include tablet { 19 | column-gap: 30px; 20 | } 21 | } 22 | 23 | &__logo { 24 | @include tablet { 25 | max-width: 120px; 26 | } 27 | 28 | @include mobile { 29 | max-width: 144px; 30 | } 31 | } 32 | 33 | &__menu { 34 | margin-left: auto; 35 | font-size: 20px; 36 | 37 | @include desktop { 38 | font-size: 18px; 39 | } 40 | 41 | @include tablet { 42 | font-size: 16px; 43 | } 44 | 45 | &-list { 46 | display: flex; 47 | align-items: center; 48 | column-gap: 40px; 49 | 50 | @include desktop { 51 | column-gap: 20px; 52 | } 53 | } 54 | 55 | &-link { 56 | position: relative; 57 | display: inline-flex; 58 | align-items: center; 59 | height: 48px; 60 | 61 | @include hover { 62 | &::after { 63 | width: 100%; 64 | } 65 | } 66 | 67 | &::after { 68 | content: ''; 69 | position: absolute; 70 | top: 100%; 71 | left: 50%; 72 | translate: -50%; 73 | width: 0; 74 | height: 2px; 75 | background-color: currentColor; 76 | transition-duration: inherit; 77 | } 78 | } 79 | } 80 | 81 | &__button { 82 | height: 48px; 83 | padding-inline: 18px; 84 | font-size: 16px; 85 | } 86 | } -------------------------------------------------------------------------------- /styles/blocks/_hero.scss: -------------------------------------------------------------------------------- 1 | .hero { 2 | display: flex; 3 | flex-direction: column; 4 | row-gap: var(--section-padding-y); 5 | 6 | @include desktop { 7 | row-gap: 60px; 8 | } 9 | 10 | &__main { 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: start; 14 | column-gap: 30px; 15 | 16 | @include mobile { 17 | flex-direction: column; 18 | } 19 | } 20 | 21 | &__body { 22 | display: flex; 23 | flex-direction: column; 24 | align-items: start; 25 | max-width: 531px; 26 | row-gap: 35px; 27 | 28 | @include mobile { 29 | display: contents; 30 | } 31 | } 32 | 33 | &__title { 34 | @include mobile { 35 | order: -2; 36 | margin-bottom: 10px; 37 | } 38 | } 39 | 40 | &__description { 41 | font-size: 20px; 42 | line-height: 1.4; 43 | 44 | @include mobile { 45 | margin-bottom: 40px; 46 | } 47 | } 48 | 49 | &__button { 50 | @include mobile { 51 | width: 100%; 52 | max-width: 390px; 53 | margin-inline: auto; 54 | } 55 | } 56 | 57 | &__partners { 58 | &-list { 59 | display: flex; 60 | justify-content: space-between; 61 | column-gap: 37px; 62 | 63 | @include tablet { 64 | display: grid; 65 | grid-template-columns: repeat(3, 1fr); 66 | row-gap: 20px; 67 | } 68 | 69 | @include mobile-s { 70 | --heroPartnersWidthOffsetX: 60px; 71 | 72 | column-gap: 0; 73 | width: calc(100vw + var(--heroPartnersWidthOffsetX) * 2); 74 | margin-left: calc( 75 | (var(--heroPartnersWidthOffsetX) + var(--container-padding-x)) 76 | * -1 77 | ); 78 | } 79 | } 80 | 81 | &-item { 82 | @include tablet { 83 | display: flex; 84 | justify-content: center; 85 | } 86 | 87 | @include mobile-s { 88 | justify-content: start; 89 | 90 | &:nth-child(-n + 3) { 91 | justify-content: end; 92 | } 93 | } 94 | } 95 | 96 | &-image { 97 | filter: grayscale(1); 98 | } 99 | } 100 | 101 | &__image { 102 | @include tablet { 103 | max-width: 40%; 104 | height: auto; 105 | } 106 | 107 | @include mobile { 108 | order: -1; 109 | width: 100%; 110 | max-width: 100%; 111 | margin-bottom: 20px; 112 | } 113 | } 114 | } -------------------------------------------------------------------------------- /styles/blocks/_mobile-overlay.scss: -------------------------------------------------------------------------------- 1 | .mobile-overlay { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0; 5 | padding: 14px 20px; 6 | border: none; 7 | 8 | &:modal { 9 | max-width: 100%; 10 | max-height: 100%; 11 | } 12 | 13 | &__close-button-wrapper { 14 | display: flex; 15 | justify-content: end; 16 | } 17 | 18 | &__list { 19 | @include flex-center; 20 | 21 | flex-direction: column; 22 | row-gap: 30px; 23 | min-height: 80vh; 24 | } 25 | } -------------------------------------------------------------------------------- /styles/blocks/_pagination.scss: -------------------------------------------------------------------------------- 1 | .pagination { 2 | &__list { 3 | display: flex; 4 | } 5 | 6 | &__button { 7 | @include reset-button; 8 | @include flex-center; 9 | @include square(24px); 10 | 11 | color: var(--color-light); 12 | 13 | @include hover { 14 | color: var(--color-accent); 15 | } 16 | 17 | &.is-current { 18 | color: var(--color-accent); 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /styles/blocks/_process.scss: -------------------------------------------------------------------------------- 1 | .process { 2 | &__list { 3 | display: flex; 4 | flex-direction: column; 5 | row-gap: 30px; 6 | counter-reset: custom-counter; 7 | list-style: none; 8 | 9 | @include mobile { 10 | row-gap: 20px; 11 | } 12 | } 13 | 14 | &__item { 15 | --counterContent: counter(custom-counter); 16 | 17 | counter-increment: custom-counter; 18 | 19 | &:nth-child(-n + 9) { 20 | --counterContent: '0' counter(custom-counter); 21 | } 22 | } 23 | 24 | &__accordion { 25 | --indicatorVerticalRotate: 90deg; 26 | 27 | padding: 40px 60px; 28 | background-color: var(--color-gray); 29 | border: var(--border); 30 | border-radius: var(--border-radius-large); 31 | box-shadow: var(--shadow); 32 | transition-duration: var(--transition-duration); 33 | 34 | @include hover { 35 | background-color: var(--color-accent); 36 | } 37 | 38 | @include mobile { 39 | padding: 30px; 40 | } 41 | 42 | &[open] { 43 | --indicatorVerticalRotate: 0deg; 44 | 45 | background-color: var(--color-accent); 46 | } 47 | 48 | &-header { 49 | display: flex; 50 | justify-content: space-between; 51 | align-items: center; 52 | column-gap: 50px; 53 | cursor: pointer; 54 | user-select: none; 55 | 56 | @include mobile { 57 | column-gap: 28px; 58 | } 59 | } 60 | 61 | &-title { 62 | @include fluid-text(30, 18); 63 | 64 | display: flex; 65 | align-items: center; 66 | column-gap: 25px; 67 | 68 | @include mobile { 69 | column-gap: 33px; 70 | } 71 | 72 | &::before { 73 | content: var(--counterContent); 74 | font-size: 2em; 75 | 76 | @include mobile { 77 | font-size: 30px; 78 | } 79 | } 80 | } 81 | 82 | &-indicator { 83 | @include flex-center; 84 | @include square(58px); 85 | 86 | flex-shrink: 0; 87 | position: relative; 88 | background-color: var(--color-gray); 89 | border: var(--border); 90 | border-radius: 50%; 91 | 92 | @include mobile { 93 | width: 30px; 94 | } 95 | 96 | &::before, 97 | &::after { 98 | @include abs-center; 99 | 100 | content: ''; 101 | width: 45%; 102 | height: 10%; 103 | background-color: var(--color-dark); 104 | } 105 | 106 | &::after { 107 | rotate: var(--indicatorVerticalRotate); 108 | transition-duration: var(--transition-duration); 109 | } 110 | } 111 | 112 | &-body { 113 | margin-top: 30px; 114 | padding-top: 30px; 115 | border-top: var(--border); 116 | } 117 | } 118 | } -------------------------------------------------------------------------------- /styles/blocks/_puddle-bg.scss: -------------------------------------------------------------------------------- 1 | .puddle-bg { 2 | padding-inline: 7px; 3 | background-color: var(--color-accent); 4 | border-radius: var(--border-radius-small); 5 | 6 | &--light { 7 | background-color: var(--color-light); 8 | } 9 | } -------------------------------------------------------------------------------- /styles/blocks/_radio.scss: -------------------------------------------------------------------------------- 1 | .radio { 2 | display: flex; 3 | align-items: center; 4 | column-gap: 14px; 5 | transition-duration: var(--transition-duration); 6 | 7 | @include hover { 8 | opacity: 0.6; 9 | } 10 | 11 | &__input { 12 | &:not(:checked) + .radio__emulator::after { 13 | opacity: 0; 14 | } 15 | } 16 | 17 | &__emulator { 18 | @include flex-center; 19 | @include square(28px); 20 | 21 | position: relative; 22 | background-color: var(--color-light); 23 | border: var(--border); 24 | border-radius: 50%; 25 | 26 | &::after { 27 | @include abs-center; 28 | @include square(60%); 29 | 30 | content: ''; 31 | background-color: var(--color-accent); 32 | border-radius: inherit; 33 | transition-duration: var(--transition-duration); 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /styles/blocks/_radios.scss: -------------------------------------------------------------------------------- 1 | .radios { 2 | display: flex; 3 | column-gap: 35px; 4 | } -------------------------------------------------------------------------------- /styles/blocks/_review-card.scss: -------------------------------------------------------------------------------- 1 | .review-card { 2 | --reviewCardCornerWidth: 40px; 3 | --reviewCardCornerOffsetLeft: 52px; 4 | 5 | display: flex; 6 | flex-direction: column; 7 | row-gap: 48px; 8 | 9 | @include mobile { 10 | --reviewCardCornerWidth: 32px; 11 | --reviewCardCornerOffsetLeft: 46px; 12 | 13 | row-gap: 44px; 14 | } 15 | 16 | &__body { 17 | position: relative; 18 | padding: 48px var(--reviewCardCornerOffsetLeft) 52px; 19 | border: 1px solid var(--color-accent); 20 | border-radius: var(--border-radius-large); 21 | 22 | @include mobile { 23 | padding: 30px; 24 | } 25 | 26 | &::after { 27 | @include square(var(--reviewCardCornerWidth)); 28 | 29 | content: ''; 30 | position: absolute; 31 | top: 100%; 32 | left: var(--reviewCardCornerOffsetLeft); 33 | background-color: var(--color-dark); 34 | border: inherit; 35 | rotate: 45deg; 36 | clip-path: polygon(100% 0, 0% 100%, 100% 100%); 37 | translate: 0 -50%; 38 | } 39 | } 40 | 41 | &__footer { 42 | display: flex; 43 | flex-direction: column; 44 | padding-left: calc( 45 | var(--reviewCardCornerOffsetLeft) + 46 | var(--reviewCardCornerWidth) / 2 47 | ); 48 | } 49 | 50 | &__name, 51 | &__company { 52 | font-style: normal; 53 | } 54 | 55 | &__name { 56 | color: var(--color-accent); 57 | } 58 | } -------------------------------------------------------------------------------- /styles/blocks/_reviews.scss: -------------------------------------------------------------------------------- 1 | .reviews { 2 | display: flex; 3 | flex-direction: column; 4 | row-gap: 110px; 5 | padding-top: 84px; 6 | padding-bottom: 54px; 7 | color: var(--color-light); 8 | background-color: var(--color-dark); 9 | border-radius: var(--border-radius-large); 10 | overflow-x: hidden; 11 | 12 | @include tablet { 13 | padding: 30px 30px 46px; 14 | row-gap: 46px; 15 | } 16 | 17 | &__slider { 18 | --reviewsSliderSlideWidth: 606px; 19 | 20 | @include tablet { 21 | --reviewsSliderSlideWidth: 330px; 22 | } 23 | 24 | &-list { 25 | display: flex; 26 | column-gap: 50px; 27 | scroll-snap-type: x mandatory; 28 | overflow-x: scroll; 29 | 30 | @include tablet-above { 31 | margin-left: calc(var(--reviewsSliderSlideWidth) / 2 * -1); 32 | } 33 | 34 | @include tablet { 35 | column-gap: 30px; 36 | } 37 | } 38 | 39 | &-item { 40 | min-width: var(--reviewsSliderSlideWidth); 41 | scroll-snap-align: start; 42 | } 43 | } 44 | 45 | &__actions { 46 | display: flex; 47 | justify-content: space-between; 48 | align-items: center; 49 | width: 100%; 50 | max-width: 564px; 51 | margin-inline: auto; 52 | } 53 | 54 | &__arrow-button { 55 | @include reset-button; 56 | @include flex-center; 57 | @include square(48px); 58 | 59 | color: var(--color-light); 60 | 61 | @include hover { 62 | color: var(--color-accent); 63 | } 64 | 65 | &[disabled] { 66 | color: var(--color-gray-alt); 67 | cursor: not-allowed; 68 | } 69 | 70 | svg { 71 | @include square(20px); 72 | } 73 | } 74 | } -------------------------------------------------------------------------------- /styles/blocks/_section.scss: -------------------------------------------------------------------------------- 1 | .section { 2 | padding-block: var(--section-padding-y); 3 | 4 | &--hidden-x { 5 | overflow-x: hidden; 6 | } 7 | 8 | &__header { 9 | display: flex; 10 | align-items: center; 11 | column-gap: 40px; 12 | 13 | @include mobile { 14 | flex-direction: column; 15 | row-gap: 30px; 16 | text-align: center; 17 | } 18 | 19 | &:not(:last-child) { 20 | margin-bottom: 80px; 21 | 22 | @include mobile { 23 | margin-bottom: 40px; 24 | } 25 | } 26 | } 27 | 28 | &__description { 29 | max-width: 580px; 30 | } 31 | } -------------------------------------------------------------------------------- /styles/blocks/_service-card.scss: -------------------------------------------------------------------------------- 1 | .service-card { 2 | display: flex; 3 | justify-content: space-between; 4 | column-gap: 30px; 5 | min-height: 310px; 6 | padding: 50px; 7 | background-color: var(--color-gray); 8 | border: var(--border); 9 | border-radius: var(--border-radius-large); 10 | box-shadow: var(--shadow); 11 | 12 | @include mobile { 13 | display: grid; 14 | grid-template-columns: auto auto; 15 | row-gap: 27px; 16 | } 17 | 18 | &--accent-bg { 19 | background-color: var(--color-accent); 20 | } 21 | 22 | &--dark-bg { 23 | background-color: var(--color-dark); 24 | } 25 | 26 | &__body { 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: space-between; 30 | row-gap: 30px; 31 | 32 | @include mobile { 33 | display: contents; 34 | } 35 | } 36 | 37 | &__image { 38 | align-self: center; 39 | 40 | @include desktop { 41 | max-width: 50%; 42 | height: auto; 43 | } 44 | 45 | @include mobile { 46 | max-width: 165px; 47 | } 48 | } 49 | 50 | &__title { 51 | display: flex; 52 | flex-direction: column; 53 | align-items: start; 54 | 55 | @include mobile { 56 | grid-column: -1 / 1; 57 | } 58 | } 59 | 60 | &__link { 61 | --serviceCardLinkIconColor: var(--color-accent); 62 | 63 | display: inline-flex; 64 | align-items: center; 65 | column-gap: 15px; 66 | font-size: 20px; 67 | 68 | @include hover { 69 | opacity: 0.7; 70 | } 71 | 72 | @include mobile { 73 | align-self: end; 74 | } 75 | 76 | &--light { 77 | --serviceCardLinkIconColor: var(--color-dark); 78 | 79 | color: var(--color-light); 80 | } 81 | 82 | &-icon-wrapper { 83 | @include flex-center; 84 | @include square(41px); 85 | 86 | background-color: currentColor; 87 | border-radius: 50%; 88 | 89 | svg { 90 | color: var(--serviceCardLinkIconColor); 91 | } 92 | } 93 | 94 | &-label { 95 | @include mobile { 96 | @include visually-hidden; 97 | } 98 | } 99 | } 100 | } -------------------------------------------------------------------------------- /styles/blocks/_services.scss: -------------------------------------------------------------------------------- 1 | .services { 2 | &__list { 3 | &:not(:last-child) { 4 | margin-bottom: 100px; 5 | 6 | @include mobile { 7 | margin-bottom: 70px; 8 | } 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /styles/blocks/_soc1als.scss: -------------------------------------------------------------------------------- 1 | .soc1als { 2 | &__list { 3 | display: flex; 4 | column-gap: 20px; 5 | } 6 | 7 | &__link { 8 | @include flex-center(true); 9 | @include square(30px); 10 | 11 | color: var(--color-dark); 12 | background-color: var(--color-light); 13 | border-radius: 50%; 14 | 15 | @include hover { 16 | background-color: var(--color-accent); 17 | } 18 | 19 | svg { 20 | width: 50%; 21 | height: 50%; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /styles/blocks/_studies.scss: -------------------------------------------------------------------------------- 1 | .studies { 2 | @include desktop-above { 3 | padding: 70px 60px; 4 | } 5 | 6 | @include mobile-above { 7 | padding: 40px; 8 | color: var(--color-light); 9 | background-color: var(--color-dark); 10 | border-radius: var(--border-radius-large); 11 | } 12 | 13 | &__list { 14 | display: grid; 15 | grid-template-columns: repeat(3, 1fr); 16 | 17 | @include mobile { 18 | scroll-snap-type: x mandatory; 19 | overflow-x: scroll; 20 | width: 100vw; 21 | column-gap: 20px; 22 | } 23 | } 24 | 25 | &__item { 26 | --studiesItemPaddingX: 64px; 27 | 28 | display: flex; 29 | flex-direction: column; 30 | row-gap: 20px; 31 | 32 | @include desktop { 33 | --studiesItemPaddingX: 32px; 34 | } 35 | 36 | @include mobile-above { 37 | &:not(:first-child) { 38 | padding-left: var(--studiesItemPaddingX); 39 | } 40 | 41 | &:not(:last-child) { 42 | padding-right: var(--studiesItemPaddingX); 43 | border-right: 1px solid var(--color-light); 44 | } 45 | } 46 | 47 | @include mobile { 48 | min-width: 350px; 49 | padding: 42px 50px; 50 | color: var(--color-light); 51 | background-color: var(--color-dark); 52 | border-radius: var(--border-radius-large); 53 | scroll-snap-align: start; 54 | } 55 | } 56 | 57 | &__link { 58 | display: inline-flex; 59 | align-items: center; 60 | column-gap: 15px; 61 | font-size: 20px; 62 | line-height: 1.4; 63 | color: var(--color-accent); 64 | 65 | @include hover { 66 | opacity: 0.7; 67 | } 68 | } 69 | } -------------------------------------------------------------------------------- /styles/blocks/_subscribe-form.scss: -------------------------------------------------------------------------------- 1 | .subscribe-form { 2 | display: flex; 3 | column-gap: 20px; 4 | padding: 58px 40px; 5 | background-color: var(--color-dark-alt); 6 | border-radius: var(--border-radius); 7 | 8 | @include desktop { 9 | flex-direction: column; 10 | row-gap: 22px; 11 | width: 100%; 12 | max-width: 450px; 13 | padding: 30px; 14 | } 15 | } -------------------------------------------------------------------------------- /styles/blocks/_team-card.scss: -------------------------------------------------------------------------------- 1 | .team-card { 2 | height: 100%; 3 | padding: 40px 35px; 4 | border: var(--border); 5 | border-radius: var(--border-radius-large); 6 | box-shadow: var(--shadow); 7 | 8 | @include mobile { 9 | padding-inline: 50px; 10 | } 11 | 12 | &__header { 13 | display: flex; 14 | } 15 | 16 | &__image { 17 | &:not(:last-child) { 18 | margin-right: 20px; 19 | } 20 | } 21 | 22 | &__info { 23 | align-self: end; 24 | 25 | &:not(:last-child) { 26 | margin-right: 10px; 27 | } 28 | } 29 | 30 | &__link { 31 | @include flex-center; 32 | @include square(34px); 33 | 34 | flex-shrink: 0; 35 | align-self: start; 36 | margin-left: auto; 37 | color: var(--color-accent); 38 | background-color: var(--color-dark); 39 | border-radius: 50%; 40 | } 41 | 42 | &__name { 43 | &:not(:last-child) { 44 | margin-bottom: 3px; 45 | } 46 | } 47 | 48 | &__body { 49 | --teamCardBodyMarginTop: 28px; 50 | 51 | margin-top: var(--teamCardBodyMarginTop); 52 | padding-top: var(--teamCardBodyMarginTop); 53 | border-top: var(--border); 54 | 55 | @include mobile { 56 | --teamCardBodyMarginTop: 20px; 57 | } 58 | } 59 | } -------------------------------------------------------------------------------- /styles/blocks/_team.scss: -------------------------------------------------------------------------------- 1 | .team { 2 | display: flex; 3 | flex-direction: column; 4 | row-gap: 40px; 5 | 6 | &__button { 7 | align-self: end; 8 | min-width: 269px; 9 | 10 | @include mobile-s { 11 | width: 100%; 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /styles/styles.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["_normalize.scss","_fonts.scss","_variables.scss","_media.scss","_utils.scss","_mixins.scss","_globals.scss","blocks/_field.scss","blocks/_radios.scss","blocks/_radio.scss","blocks/_button.scss","blocks/_grid.scss","blocks/_burger-button.scss","blocks/_header.scss","blocks/_cross-button.scss","blocks/_mobile-overlay.scss","blocks/_section.scss","blocks/_hero.scss","blocks/_puddle-bg.scss","blocks/_services.scss","blocks/_service-card.scss","blocks/_banner.scss","blocks/_studies.scss","blocks/_process.scss","blocks/_team.scss","blocks/_team-card.scss","blocks/_pagination.scss","blocks/_reviews.scss","blocks/_review-card.scss","blocks/_contact-us.scss","blocks/_soc1als.scss","blocks/_subscribe-form.scss","blocks/_footer.scss"],"names":[],"mappings":"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","file":"styles.css"} -------------------------------------------------------------------------------- /styles/styles.scss: -------------------------------------------------------------------------------- 1 | @import 2 | 'normalize', 3 | 'fonts', 4 | 'mixins', 5 | 'media', 6 | 'variables', 7 | 'utils', 8 | 'globals'; 9 | 10 | @import 11 | 'blocks/field', 12 | 'blocks/radios', 13 | 'blocks/radio', 14 | 'blocks/button', 15 | 'blocks/grid', 16 | 'blocks/burger-button', 17 | 'blocks/header', 18 | 'blocks/cross-button', 19 | 'blocks/mobile-overlay', 20 | 'blocks/section', 21 | 'blocks/hero', 22 | 'blocks/puddle-bg', 23 | 'blocks/services', 24 | 'blocks/service-card', 25 | 'blocks/banner', 26 | 'blocks/studies', 27 | 'blocks/process', 28 | 'blocks/team', 29 | 'blocks/team-card', 30 | 'blocks/pagination', 31 | 'blocks/reviews', 32 | 'blocks/review-card', 33 | 'blocks/contact-us', 34 | 'blocks/soc1als', 35 | 'blocks/subscribe-form', 36 | 'blocks/footer'; --------------------------------------------------------------------------------