diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..c10bd9b --- /dev/null +++ b/css/style.css @@ -0,0 +1,1249 @@ +@charset "UTF-8"; + +@font-face { + font-family: Gilroy; + font-display: swap; + src: url("../fonts/Gilroy-Bold.woff2") format("woff2"), url("../fonts/Gilroy-Bold.woff") format("woff"); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: Gilroy; + font-display: swap; + src: url("../fonts/Gilroy-Medium.woff2") format("woff2"), url("../fonts/Gilroy-Medium.woff") format("woff"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: Gilroy; + font-display: swap; + src: url("../fonts/Gilroy-Semibold.woff2") format("woff2"), url("../fonts/Gilroy-Semibold.woff") format("woff"); + font-weight: 600; + font-style: normal; +} + +[class*=_icon-]:before { + font-family: "icons"; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +[class*=_icon-]:before { + display: block; +} + +._icon-dot:before { + content: "\e900"; +} + +._icon-Bithday:before { + content: "\e901"; +} + +._icon-Tick-Ver:before { + content: "\e902"; +} + +._icon-Tick:before { + content: "\e903"; +} + +._icon-Work:before { + content: "\e904"; +} + +* { + padding: 0px; + margin: 0px; + border: 0px; +} + +*, +*:before, +*:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; +} + +html, +body { + height: 100%; + min-width: 320px; +} + +body { + color: #73738D; + line-height: 1; + font-family: "Gilroy"; + font-size: 0.875rem; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +input, +button, +textarea { + font-family: "Gilroy"; + font-size: inherit; +} + +button { + cursor: pointer; + color: inherit; + background-color: transparent; +} + +a { + color: inherit; + text-decoration: none; +} + +ul li { + list-style: none; +} + +img { + vertical-align: top; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: inherit; + font-size: inherit; +} + +.lock body { + overflow: hidden; + -ms-touch-action: none; + touch-action: none; + -ms-scroll-chaining: none; + overscroll-behavior: none; +} + +.wrapper { + min-height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + overflow: hidden; +} + +@supports (overflow: clip) { + .wrapper { + overflow: clip; + } +} + +.wrapper > main { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} + +.wrapper > * { + min-width: 0; +} + +/* +(i) Стилі будуть застосовуватись до +всіх класів, що містять *__container +Наприклад header__container, main__container і т.п. +Сніппет (HTML): cnt +*/ + +[class*=__container] { + max-width: 80.625rem; + margin: 0 auto; + padding: 0 0.9375rem; +} + +.fp-init body { + overflow: hidden; + -ms-touch-action: none; + touch-action: none; + -ms-scroll-chaining: none; + overscroll-behavior: none; +} + +[data-fp] { + min-height: 100vh; +} + +.touch [data-fp] { + min-height: calc(var(--vh, 1vh) * 100); +} + +.fp-init [data-fp] { + z-index: 1; + -ms-touch-action: none; + touch-action: none; + position: relative; + overflow: hidden; +} + +.fp-switching [data-fp-section] { + -ms-touch-action: none; + touch-action: none; +} + +.fp-init [data-fp-section] { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + height: 100%; + overflow: auto; +} + +.fp-init .slider-mode [data-fp-section], +.fp-init .cards-mode [data-fp-section] { + -webkit-transition: -webkit-transform 0.7s cubic-bezier(0.55, 0.085, 0, 0.99) 0s; + transition: -webkit-transform 0.7s cubic-bezier(0.55, 0.085, 0, 0.99) 0s; + transition: transform 0.7s cubic-bezier(0.55, 0.085, 0, 0.99) 0s; + transition: transform 0.7s cubic-bezier(0.55, 0.085, 0, 0.99) 0s, -webkit-transform 0.7s cubic-bezier(0.55, 0.085, 0, 0.99) 0s; +} + +.fp-init .fade-mode [data-fp-section] { + -webkit-transition: opacity 0.5s ease-in-out 0s, visibility 0.5s ease-in-out 0s; + transition: opacity 0.5s ease-in-out 0s, visibility 0.5s ease-in-out 0s; +} + +.fp-bullets { + position: fixed; + top: 50%; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + right: 2.5rem; + max-height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + z-index: 2; + gap: 0.625rem; +} + +.fp-bullets .fp-bullet { + cursor: pointer; + width: 1.25rem; + height: 1.25rem; + -webkit-box-flex: 0; + -ms-flex: 0 0 1.25rem; + flex: 0 0 1.25rem; + border-radius: 0.625rem; + background-color: #100c46; + -webkit-box-shadow: 0rem 0rem 0.1875rem #6257fe, 0 0 1.875rem rgba(255, 255, 255, 0.8); + box-shadow: 0rem 0rem 0.1875rem #6257fe, 0 0 1.875rem rgba(255, 255, 255, 0.8); + border: 0.0625rem solid #fff; + opacity: 0.6; + -webkit-transition: opacity 0.4s ease-in-out 0s, background-color 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s, -webkit-box-shadow 0.4s ease-in-out 0s; + transition: opacity 0.4s ease-in-out 0s, background-color 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s, -webkit-box-shadow 0.4s ease-in-out 0s; + transition: transform 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s, background-color 0.4s ease-in-out 0s, box-shadow 0.4s ease-in-out 0s; + transition: transform 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s, background-color 0.4s ease-in-out 0s, box-shadow 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s, -webkit-box-shadow 0.4s ease-in-out 0s; +} + +.fp-bullets .fp-bullet-active { + opacity: 1; + background-color: #6257fe; + -webkit-transform: translate3D(-0.3125rem, -0.125rem, 0); + -ms-transform: translate3D(-0.3125rem, -0.125rem, 0); + transform: translate3D(-0.3125rem, -0.125rem, 0); + -webkit-box-shadow: 0.3125rem 0.125rem 0.1875rem #100c46, 0 0 1.875rem rgba(255, 255, 255, 0.8); + box-shadow: 0.3125rem 0.125rem 0.1875rem #100c46, 0 0 1.875rem rgba(255, 255, 255, 0.8); +} + +[class*=-ibg] { + position: relative; +} + +[class*=-ibg] img { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + -o-object-fit: cover; + object-fit: cover; +} + +[class*=-ibg_contain] img { + -o-object-fit: contain; + object-fit: contain; +} + +.header { + position: fixed; + width: 100%; + top: 0; + left: 0; + z-index: 100; +} + +.header__container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + gap: 0.9375rem; + min-height: 60px; + background: #fff; +} + +.header__logo { + position: relative; + z-index: 5; + color: #222; + text-align: center; + font-family: Gilroy; + font-size: 24.118px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.header__button { + position: relative; + z-index: 5; + padding: 0.5rem 1.6875rem; + border-radius: 2.1225rem; + border: 0.0625rem solid #1943EF; + color: #1943EF; + font-family: Gilroy; + font-size: 11.089px; + font-style: normal; + font-weight: 600; + line-height: normal; + -webkit-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; +} + +.header__action { + text-align: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 0.9375rem; +} + +.menu__item { + text-align: right; +} + +.menu__link { + color: #73738D; + font-family: Gilroy; + font-size: 11.089px; + font-style: normal; + font-weight: 600; + line-height: normal; + -webkit-transition: color 0.3s ease 0s; + transition: color 0.3s ease 0s; +} + +.icon-menu { + display: none; +} + +.footer__container { + min-height: 8.625rem; + margin: 0 auto; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + clear: both; +} + +.footer__heading { + color: #222; + text-align: center; + font-family: Gilroy; + font-size: 16.653px; + font-style: normal; + font-weight: 700; + line-height: normal; + padding-top: 2.1875rem; +} + +.footer__copyright { + padding-top: 1.0625rem; + color: #73738D; + text-align: center; + font-family: Gilroy; + font-size: 16.089px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.hero__container { + padding-top: 120px; + min-height: 459px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.hero__title { + font-size: 40.197px; + font-style: normal; + font-weight: 700; + line-height: normal; + color: #222; +} + +.hero__subtext { + padding-top: 1rem; + font-family: Gilroy; + font-size: 14.554px; + font-style: normal; + font-weight: 500; + line-height: 150%; + /* 21.831px */ + padding-bottom: 1.25rem; +} + +.hero__email { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 2.5625rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-radius: 33.96px; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + -webkit-filter: drop-shadow(0px 0px 31.1875019073px rgba(54, 54, 54, 0.04)) drop-shadow(0px 2.7722222805px 27.7222232819px rgba(0, 0, 0, 0.04)); + filter: drop-shadow(0px 0px 31.1875019073px rgba(54, 54, 54, 0.04)) drop-shadow(0px 2.7722222805px 27.7222232819px rgba(0, 0, 0, 0.04)); +} + +.hero__input { + min-height: 2.5625rem; + padding: 0.75rem 0.9375rem; + width: 100%; + border: 0; + border-radius: 33px; +} + +.hero__input input:focus { + outline: none; +} + +.hero__button { + padding: 0.875rem 2.8125rem; + border-radius: 33.96px; + background: #1943ef; + color: #fff; + font-family: Gilroy; + font-size: 11.089px; + font-style: normal; + font-weight: 600; + line-height: normal; + margin: auto; + border: 0; + position: absolute; + right: 0; + top: 0; + bottom: 0; +} + +.welcome__img:hover { + -webkit-animation-name: image; + animation-name: image; + -webkit-animation-duration: 2s; + animation-duration: 2s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +@-webkit-keyframes image { + 15% { + -webkit-transform: translateX(9px); + transform: translateX(9px); + } + + 30% { + -webkit-transform: translateX(-9px); + transform: translateX(-9px); + } + + 40% { + -webkit-transform: translateX(6px); + transform: translateX(6px); + } + + 50% { + -webkit-transform: translateX(-6px); + transform: translateX(-6px); + } + + 65% { + -webkit-transform: translateX(3px); + transform: translateX(3px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes image { + 15% { + -webkit-transform: translateX(9px); + transform: translateX(9px); + } + + 30% { + -webkit-transform: translateX(-9px); + transform: translateX(-9px); + } + + 40% { + -webkit-transform: translateX(6px); + transform: translateX(6px); + } + + 50% { + -webkit-transform: translateX(-6px); + transform: translateX(-6px); + } + + 65% { + -webkit-transform: translateX(3px); + transform: translateX(3px); + } + + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +.info__follow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 393px; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.info__heading { + color: #222; + font-family: Gilroy; + font-size: 24.95px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.info__paragraph { + max-width: 39.375rem; +} + +.info__icon { + margin: 0; +} + +.follow__text { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + min-height: 12.5rem; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.notification__container { + height: 235px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.notification__item { + width: 24.3125rem; + padding: 0.9375rem 1.125rem; + gap: 0.9375rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + border-radius: 16.633px; + background: #fff; + -webkit-box-shadow: 0px 13.86111px 55.44445px 0px #f2f5fa; + box-shadow: 0px 13.86111px 55.44445px 0px #f2f5fa; +} + +.notification__ava { + border-radius: 38.201px; + width: 33.267px; + height: 33.267px; + -ms-flex-negative: 0; + flex-shrink: 0; +} + +.text__container { + padding-top: 3.125rem; +} + +.sync__container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 24.1875rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around; +} + +.sync__heading { + padding-top: 1.25rem; +} + +.sync__icon { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.sync__text { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + height: 14.875rem; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + width: 21.875rem; + width: auto; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +@-webkit-keyframes rotation { + 100% { + -webkit-transform: rotatey(360deg); + transform: rotatey(360deg); + } +} + +@keyframes rotation { + 100% { + -webkit-transform: rotatey(360deg); + transform: rotatey(360deg); + } +} + +.sync__card { + width: 25rem; + height: 13.125rem; + border-radius: 20.792px; + background: #fff; + -webkit-box-shadow: 0px 13.86111px 55.44445px 0px #f2f5fa; + box-shadow: 0px 13.86111px 55.44445px 0px #f2f5fa; + padding: 1.5625rem 1rem; +} + +.sync__card:hover { + -webkit-animation: rotation 1s linear; + animation: rotation 1s linear; +} + +.card__img { + border-radius: 38.201px; +} + +.card__name-role { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.card__name { + color: #222; + font-family: Gilroy; + font-size: 16.633px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +.card__role { + color: rgba(34, 34, 34, 0.8); + font-family: Gilroy; + font-size: 11.089px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.card__item { + padding-top: 1.0625rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.card__item img { + padding-right: 5px; +} + +.card__name-role-text { + padding-left: 0.5rem; +} + +.connect__container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + min-height: 21.875rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around; + max-width: 75rem; +} + +.connect__text { + padding-bottom: 1.5625rem; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + padding-left: 1.5625rem; +} + +.connect__heading { + padding-top: 1.75rem; + width: 21.625rem; +} + +@keyframes rotation { + 100% { + -webkit-transform: rotatey(360deg); + transform: rotatey(360deg); + } +} + +.connect-card { + min-height: 9.9375rem; + border-radius: 20.792px; + background: #fff; + -webkit-box-shadow: 0px 13.86111px 55.44445px 0px #f2f5fa; + box-shadow: 0px 13.86111px 55.44445px 0px #f2f5fa; +} + +.connect-card__container { + min-height: 9.9375rem; + border-radius: 20.792px; + background: #fff; + -webkit-box-shadow: 0px 13.86111px 55.44445px 0px #f2f5fa; + box-shadow: 0px 13.86111px 55.44445px 0px #f2f5fa; +} + +.connect-card__container:hover { + -webkit-animation: rotation 1s linear; + animation: rotation 1s linear; +} + +.connect-card__heading { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding-top: 1.375rem; + color: #222; + font-family: Gilroy; + font-size: 16.633px; + font-style: normal; + font-weight: 600; + line-height: normal; + width: auto; +} + +.connect-card__subtitle { + color: rgba(34, 34, 34, 0.8); + font-family: Gilroy; + font-size: 11.089px; + font-style: normal; + font-weight: 500; + line-height: normal; +} + +.connect-card__text { + padding-top: 1.25rem; + color: rgba(115, 115, 141, 0.8); + font-family: Gilroy; + font-size: 9.703px; + font-style: normal; + font-weight: 500; + line-height: 180%; + /* 17.465px */ + max-width: 39.375rem; +} + +.bottom-baner__container { + border-radius: 8.317px; + background: #fff; + -webkit-box-shadow: 0px 13.86111px 55.44445px 0px #f2f5fa; + box-shadow: 0px 13.86111px 55.44445px 0px #f2f5fa; + width: 75rem; + width: auto; + min-height: 5.9375rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.bottom-baner__text { + display: block; +} + +.bottom-baner__heading { + color: #222; + font-family: Gilroy; + font-size: 24.95px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +.bottom-baner__subtitle { + color: #73738d; + font-family: Gilroy; + font-size: 11.089px; + font-style: normal; + font-weight: 500; + line-height: 150%; + /* 16.633px */ +} + +.bottom-baner__button { + color: #fff; + font-family: Gilroy; + font-size: 11.089px; + font-style: normal; + font-weight: 600; + line-height: normal; + border-radius: 33.96px; + background: #26c296; + padding: 0.6875rem 2.8125rem; +} + +.icon__tick { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.icon__tick-left { + padding-left: 1.5625rem; +} + +.tick__wrap { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding-top: 1rem; +} + +.tick__item { + padding-right: 0.3125rem; +} + +.tick__text { + color: #73738d; + font-family: Gilroy; + font-size: 11.089px; + font-style: normal; + font-weight: 500; + line-height: 150%; + /* 16.633px */ +} + +@media (min-width: 47.99875em) { + .menu__list { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 2.375rem; + } +} + +@media (min-width: 2000px) { + .wrapper { + max-width: 2000px; + margin: 0 auto; + } +} + +@media (max-width: 80.625em) { + .fp-bullets { + right: 1.25rem; + } +} + +@media (max-width: 47.99875em) { + .touch [data-fp] { + -webkit-transition: height 0.2s; + transition: height 0.2s; + } + + .menu__body { + position: fixed; + top: 0; + left: -100%; + width: 100%; + height: 100%; + overflow: auto; + -webkit-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; + background-color: #1943EF; + padding: 5rem 0.9375rem 0.9375rem 0.9375rem; + } + + .menu__body::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 3.75rem; + -webkit-backdrop-filter: blur(0.3125rem); + backdrop-filter: blur(0.3125rem); + background-color: rgba(201, 203, 209, 0.6980392157); + -webkit-transition: left 0.3s ease 0s; + transition: left 0.3s ease 0s; + z-index: 2; + } + + .menu-open .menu__body { + left: 0%; + } + + .menu-open .menu__body::before { + left: 0%; + } + + .menu__item:not(:last-child) { + margin-bottom: 2rem; + } + + .menu__link { + color: #fff; + font-size: 1.5rem; + } + + .icon-menu { + display: block; + position: relative; + width: 1.875rem; + height: 1.125rem; + -webkit-box-flex: 0; + -ms-flex: 0 0 1.875rem; + flex: 0 0 1.875rem; + z-index: 5; + } + + .icon-menu span, + .icon-menu::before, + .icon-menu::after { + content: ""; + -webkit-transition: all 0.3s ease 0s; + transition: all 0.3s ease 0s; + right: 0; + position: absolute; + width: 100%; + height: 0.125rem; + background-color: #000; + } + + .icon-menu::before { + top: 0; + } + + .icon-menu::after { + bottom: 0; + } + + .icon-menu span { + top: calc(50% - 0.0625rem); + } + + .menu-open .icon-menu span { + width: 0; + } + + .menu-open .icon-menu::before { + top: calc(50% - 0.0625rem); + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + } + + .menu-open .icon-menu::after { + bottom: calc(50% - 0.0625rem); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } + + p { + font-size: 16px; + } + + .hero__container { + display: block; + } + + .welcome__img { + display: block; + margin: 0 auto; + } + + .info__container { + display: block; + } + + .info__follow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + .info__paragraph { + padding-top: 0.75rem; + } + + .follow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + + .follow__text { + padding-bottom: 3.125rem; + } + + .notification__container { + padding-top: 9.375rem; + } + + .notification__item { + width: auto; + margin: 0 auto; + } + + .sync__container { + display: block; + padding-top: 7.8125rem; + } + + .sync__heading { + padding-top: 3.125rem; + } + + .sync__text { + padding-bottom: 23.75rem; + width: auto; + } + + .sync__card { + width: 21.875rem; + width: auto; + margin: 0 auto; + } + + .connect { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + .connect__container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + padding-top: 3.125rem; + } + + .connect__text { + padding-left: 0rem; + } + + .connect__card { + width: auto; + margin: 0 auto; + } + + .connect__heading { + width: auto; + margin: 0 auto; + } + + .connect-card { + width: auto; + margin: 0 auto; + } + + .connect-card__container { + width: auto; + margin: 0 auto; + } + + .connect-card__text { + font-size: 16px; + } + + .bottom-baner__container { + width: auto; + margin: 0 auto; + padding-top: 3.125rem; + } + + .bottom-baner__subtitle { + font-size: 16px; + } + + .bottom-baner__button { + padding: 0.625rem 1.875rem; + } + + .tick__text { + font-size: 14px; + } +} + +@media (max-width: 47.99875em) and (any-hover: none) { + .icon-menu { + cursor: default; + } +} + +@media (max-width: 29.99875em) { + .fp-bullets { + top: auto; + bottom: 1.25rem; + -webkit-transform: translate(50%, 0); + -ms-transform: translate(50%, 0); + transform: translate(50%, 0); + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + right: 50%; + } +} + +@media (any-hover: hover) { + .fp-bullets .fp-bullet:hover { + opacity: 1; + } + + .header__button:hover { + background-color: #1943EF; + color: #fff; + } + + .menu__link:hover { + color: #1943EF; + } +} \ No newline at end of file diff --git a/css/style.min.css b/css/style.min.css new file mode 100644 index 0000000..bf24e67 --- /dev/null +++ b/css/style.min.css @@ -0,0 +1 @@ +@charset "UTF-8";@font-face{font-family:Gilroy;font-display:swap;src:url(../fonts/Gilroy-Bold.woff2) format("woff2"),url(../fonts/Gilroy-Bold.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Gilroy;font-display:swap;src:url(../fonts/Gilroy-Medium.woff2) format("woff2"),url(../fonts/Gilroy-Medium.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Gilroy;font-display:swap;src:url(../fonts/Gilroy-Semibold.woff2) format("woff2"),url(../fonts/Gilroy-Semibold.woff) format("woff");font-weight:600;font-style:normal}[class*=_icon-]:before{font-family:icons;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[class*=_icon-]:before{display:block}._icon-dot:before{content:"\e900"}._icon-Bithday:before{content:"\e901"}._icon-Tick-Ver:before{content:"\e902"}._icon-Tick:before{content:"\e903"}._icon-Work:before{content:"\e904"}*{padding:0;margin:0;border:0}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}body,html{height:100%;min-width:320px}body{color:#73738d;line-height:1;font-family:Gilroy;font-size:.875rem;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button,input,textarea{font-family:Gilroy;font-size:inherit}button{cursor:pointer;color:inherit;background-color:transparent}a{color:inherit;text-decoration:none}ul li{list-style:none}img{vertical-align:top}h1,h2,h3,h4,h5,h6{font-weight:inherit;font-size:inherit}.lock body{overflow:hidden;-ms-touch-action:none;touch-action:none;-ms-scroll-chaining:none;overscroll-behavior:none}.wrapper{min-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;overflow:hidden}@supports (overflow:clip){.wrapper{overflow:clip}}.wrapper>main{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.wrapper>*{min-width:0}[class*=__container]{max-width:80.625rem;margin:0 auto;padding:0 .9375rem}.fp-init body{overflow:hidden;-ms-touch-action:none;touch-action:none;-ms-scroll-chaining:none;overscroll-behavior:none}[data-fp]{min-height:100vh}.touch [data-fp]{min-height:calc(var(--vh,1vh) * 100)}.fp-init [data-fp]{z-index:1;-ms-touch-action:none;touch-action:none;position:relative;overflow:hidden}.fp-switching [data-fp-section]{-ms-touch-action:none;touch-action:none}.fp-init [data-fp-section]{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;overflow:auto}.fp-init .cards-mode [data-fp-section],.fp-init .slider-mode [data-fp-section]{-webkit-transition:-webkit-transform .7s cubic-bezier(.55,.085,0,.99) 0s;transition:-webkit-transform .7s cubic-bezier(.55,.085,0,.99) 0s;transition:transform .7s cubic-bezier(.55,.085,0,.99) 0s;transition:transform .7s cubic-bezier(.55,.085,0,.99) 0s,-webkit-transform .7s cubic-bezier(.55,.085,0,.99) 0s}.fp-init .fade-mode [data-fp-section]{-webkit-transition:opacity .5s ease-in-out 0s,visibility .5s ease-in-out 0s;transition:opacity .5s ease-in-out 0s,visibility .5s ease-in-out 0s}.fp-bullets{position:fixed;top:50%;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);transform:translate(0,-50%);right:2.5rem;max-height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:2;gap:.625rem}.fp-bullets .fp-bullet{cursor:pointer;width:1.25rem;height:1.25rem;-webkit-box-flex:0;-ms-flex:0 0 1.25rem;flex:0 0 1.25rem;border-radius:.625rem;background-color:#100c46;-webkit-box-shadow:0 0 .1875rem #6257fe,0 0 1.875rem rgba(255,255,255,.8);box-shadow:0 0 .1875rem #6257fe,0 0 1.875rem rgba(255,255,255,.8);border:.0625rem solid #fff;opacity:.6;-webkit-transition:opacity .4s ease-in-out 0s,background-color .4s ease-in-out 0s,-webkit-transform .4s ease-in-out 0s,-webkit-box-shadow .4s ease-in-out 0s;transition:opacity .4s ease-in-out 0s,background-color .4s ease-in-out 0s,-webkit-transform .4s ease-in-out 0s,-webkit-box-shadow .4s ease-in-out 0s;transition:transform .4s ease-in-out 0s,opacity .4s ease-in-out 0s,background-color .4s ease-in-out 0s,box-shadow .4s ease-in-out 0s;transition:transform .4s ease-in-out 0s,opacity .4s ease-in-out 0s,background-color .4s ease-in-out 0s,box-shadow .4s ease-in-out 0s,-webkit-transform .4s ease-in-out 0s,-webkit-box-shadow .4s ease-in-out 0s}.fp-bullets .fp-bullet-active{opacity:1;background-color:#6257fe;-webkit-transform:translate3D(-.3125rem,-.125rem,0);-ms-transform:translate3D(-.3125rem,-.125rem,0);transform:translate3D(-.3125rem,-.125rem,0);-webkit-box-shadow:.3125rem .125rem .1875rem #100c46,0 0 1.875rem rgba(255,255,255,.8);box-shadow:.3125rem .125rem .1875rem #100c46,0 0 1.875rem rgba(255,255,255,.8)}[class*=-ibg]{position:relative}[class*=-ibg] img{position:absolute;width:100%;height:100%;top:0;left:0;-o-object-fit:cover;object-fit:cover}[class*=-ibg_contain] img{-o-object-fit:contain;object-fit:contain}.header{position:fixed;width:100%;top:0;left:0;z-index:100}.header__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;gap:.9375rem;min-height:60px;background:#fff}.header__logo{position:relative;z-index:5;color:#222;text-align:center;font-family:Gilroy;font-size:24.118px;font-style:normal;font-weight:700;line-height:normal}.header__button{position:relative;z-index:5;padding:.5rem 1.6875rem;border-radius:2.1225rem;border:.0625rem solid #1943ef;color:#1943ef;font-family:Gilroy;font-size:11.089px;font-style:normal;font-weight:600;line-height:normal;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.header__action{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:.9375rem}.menu__item{text-align:right}.menu__link{color:#73738d;font-family:Gilroy;font-size:11.089px;font-style:normal;font-weight:600;line-height:normal;-webkit-transition:color .3s ease 0s;transition:color .3s ease 0s}.icon-menu{display:none}.footer__container{min-height:8.625rem;margin:0 auto;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;clear:both}.footer__heading{color:#222;text-align:center;font-family:Gilroy;font-size:16.653px;font-style:normal;font-weight:700;line-height:normal;padding-top:2.1875rem}.footer__copyright{padding-top:1.0625rem;color:#73738d;text-align:center;font-family:Gilroy;font-size:16.089px;font-style:normal;font-weight:500;line-height:normal}.hero__container{padding-top:120px;min-height:459px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.hero__title{font-size:40.197px;font-style:normal;font-weight:700;line-height:normal;color:#222}.hero__subtext{padding-top:1rem;font-family:Gilroy;font-size:14.554px;font-style:normal;font-weight:500;line-height:150%;padding-bottom:1.25rem}.hero__email{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:2.5625rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:33.96px;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;-webkit-filter:drop-shadow(0 0 31.1875019073px rgba(54, 54, 54, .04)) drop-shadow(0 2.7722222805px 27.7222232819px rgba(0, 0, 0, .04));filter:drop-shadow(0 0 31.1875019073px rgba(54, 54, 54, .04)) drop-shadow(0 2.7722222805px 27.7222232819px rgba(0, 0, 0, .04))}.hero__input{min-height:2.5625rem;padding:.75rem .9375rem;width:100%;border:0;border-radius:33px}.hero__input input:focus{outline:0}.hero__button{padding:.875rem 2.8125rem;border-radius:33.96px;background:#1943ef;color:#fff;font-family:Gilroy;font-size:11.089px;font-style:normal;font-weight:600;line-height:normal;margin:auto;border:0;position:absolute;right:0;top:0;bottom:0}.welcome__img:hover{-webkit-animation-name:image;animation-name:image;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes image{15%{-webkit-transform:translateX(9px);transform:translateX(9px)}30%{-webkit-transform:translateX(-9px);transform:translateX(-9px)}40%{-webkit-transform:translateX(6px);transform:translateX(6px)}50%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}65%{-webkit-transform:translateX(3px);transform:translateX(3px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes image{15%{-webkit-transform:translateX(9px);transform:translateX(9px)}30%{-webkit-transform:translateX(-9px);transform:translateX(-9px)}40%{-webkit-transform:translateX(6px);transform:translateX(6px)}50%{-webkit-transform:translateX(-6px);transform:translateX(-6px)}65%{-webkit-transform:translateX(3px);transform:translateX(3px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.info__follow{display:-webkit-box;display:-ms-flexbox;display:flex;height:393px;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.info__heading{color:#222;font-family:Gilroy;font-size:24.95px;font-style:normal;font-weight:700;line-height:normal}.info__paragraph{max-width:39.375rem}.info__icon{margin:0}.follow__text{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:12.5rem;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.notification__container{height:235px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}.notification__item{width:24.3125rem;padding:.9375rem 1.125rem;gap:.9375rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;border-radius:16.633px;background:#fff;-webkit-box-shadow:0 13.86111px 55.44445px 0 #f2f5fa;box-shadow:0 13.86111px 55.44445px 0 #f2f5fa}.notification__ava{border-radius:38.201px;width:33.267px;height:33.267px;-ms-flex-negative:0;flex-shrink:0}.text__container{padding-top:3.125rem}.sync__container{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:24.1875rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around}.sync__heading{padding-top:1.25rem}.sync__icon{display:-webkit-box;display:-ms-flexbox;display:flex}.sync__text{display:-webkit-box;display:-ms-flexbox;display:flex;height:14.875rem;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:21.875rem;width:auto;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}@-webkit-keyframes rotation{100%{-webkit-transform:rotatey(360deg);transform:rotatey(360deg)}}@keyframes rotation{100%{-webkit-transform:rotatey(360deg);transform:rotatey(360deg)}}.sync__card{width:25rem;height:13.125rem;border-radius:20.792px;background:#fff;-webkit-box-shadow:0 13.86111px 55.44445px 0 #f2f5fa;box-shadow:0 13.86111px 55.44445px 0 #f2f5fa;padding:1.5625rem 1rem}.sync__card:hover{-webkit-animation:rotation 1s linear;animation:rotation 1s linear}.card__img{border-radius:38.201px}.card__name-role{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.card__name{color:#222;font-family:Gilroy;font-size:16.633px;font-style:normal;font-weight:600;line-height:normal}.card__role{color:rgba(34,34,34,.8);font-family:Gilroy;font-size:11.089px;font-style:normal;font-weight:500;line-height:normal}.card__item{padding-top:1.0625rem;display:-webkit-box;display:-ms-flexbox;display:flex}.card__item img{padding-right:5px}.card__name-role-text{padding-left:.5rem}.connect__container{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:21.875rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;max-width:75rem}.connect__text{padding-bottom:1.5625rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding-left:1.5625rem}.connect__heading{padding-top:1.75rem;width:21.625rem}@keyframes rotation{100%{-webkit-transform:rotatey(360deg);transform:rotatey(360deg)}}.connect-card{min-height:9.9375rem;border-radius:20.792px;background:#fff;-webkit-box-shadow:0 13.86111px 55.44445px 0 #f2f5fa;box-shadow:0 13.86111px 55.44445px 0 #f2f5fa}.connect-card__container{min-height:9.9375rem;border-radius:20.792px;background:#fff;-webkit-box-shadow:0 13.86111px 55.44445px 0 #f2f5fa;box-shadow:0 13.86111px 55.44445px 0 #f2f5fa}.connect-card__container:hover{-webkit-animation:rotation 1s linear;animation:rotation 1s linear}.connect-card__heading{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding-top:1.375rem;color:#222;font-family:Gilroy;font-size:16.633px;font-style:normal;font-weight:600;line-height:normal;width:auto}.connect-card__subtitle{color:rgba(34,34,34,.8);font-family:Gilroy;font-size:11.089px;font-style:normal;font-weight:500;line-height:normal}.connect-card__text{padding-top:1.25rem;color:rgba(115,115,141,.8);font-family:Gilroy;font-size:9.703px;font-style:normal;font-weight:500;line-height:180%;max-width:39.375rem}.bottom-baner__container{border-radius:8.317px;background:#fff;-webkit-box-shadow:0 13.86111px 55.44445px 0 #f2f5fa;box-shadow:0 13.86111px 55.44445px 0 #f2f5fa;width:75rem;width:auto;min-height:5.9375rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.bottom-baner__text{display:block}.bottom-baner__heading{color:#222;font-family:Gilroy;font-size:24.95px;font-style:normal;font-weight:700;line-height:normal}.bottom-baner__subtitle{color:#73738d;font-family:Gilroy;font-size:11.089px;font-style:normal;font-weight:500;line-height:150%}.bottom-baner__button{color:#fff;font-family:Gilroy;font-size:11.089px;font-style:normal;font-weight:600;line-height:normal;border-radius:33.96px;background:#26c296;padding:.6875rem 2.8125rem}.icon__tick{display:-webkit-box;display:-ms-flexbox;display:flex}.icon__tick-left{padding-left:1.5625rem}.tick__wrap{display:-webkit-box;display:-ms-flexbox;display:flex;padding-top:1rem}.tick__item{padding-right:.3125rem}.tick__text{color:#73738d;font-family:Gilroy;font-size:11.089px;font-style:normal;font-weight:500;line-height:150%}@media (min-width:47.99875em){.menu__list{display:-webkit-box;display:-ms-flexbox;display:flex;gap:2.375rem}}@media (min-width:2000px){.wrapper{max-width:2000px;margin:0 auto}}@media (max-width:80.625em){.fp-bullets{right:1.25rem}}@media (max-width:47.99875em){.touch [data-fp]{-webkit-transition:height .2s;transition:height .2s}.menu__body{position:fixed;top:0;left:-100%;width:100%;height:100%;overflow:auto;-webkit-transition:left .3s ease 0s;transition:left .3s ease 0s;background-color:#1943ef;padding:5rem .9375rem .9375rem .9375rem}.menu__body::before{content:"";position:fixed;top:0;left:0;width:100%;height:3.75rem;-webkit-backdrop-filter:blur(.3125rem);backdrop-filter:blur(.3125rem);background-color:rgba(201,203,209,.6980392157);-webkit-transition:left .3s ease 0s;transition:left .3s ease 0s;z-index:2}.menu-open .menu__body{left:0}.menu-open .menu__body::before{left:0}.menu__item:not(:last-child){margin-bottom:2rem}.menu__link{color:#fff;font-size:1.5rem}.icon-menu{display:block;position:relative;width:1.875rem;height:1.125rem;-webkit-box-flex:0;-ms-flex:0 0 1.875rem;flex:0 0 1.875rem;z-index:5}.icon-menu span,.icon-menu::after,.icon-menu::before{content:"";-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;right:0;position:absolute;width:100%;height:.125rem;background-color:#000}.icon-menu::before{top:0}.icon-menu::after{bottom:0}.icon-menu span{top:calc(50% - .0625rem)}.menu-open .icon-menu span{width:0}.menu-open .icon-menu::before{top:calc(50% - .0625rem);-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.menu-open .icon-menu::after{bottom:calc(50% - .0625rem);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}p{font-size:16px}.hero__container{display:block}.welcome__img{display:block;margin:0 auto}.info__container{display:block}.info__follow{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.info__paragraph{padding-top:.75rem}.follow{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.follow__text{padding-bottom:3.125rem}.notification__container{padding-top:9.375rem}.notification__item{width:auto;margin:0 auto}.sync__container{display:block;padding-top:7.8125rem}.sync__heading{padding-top:3.125rem}.sync__text{padding-bottom:23.75rem;width:auto}.sync__card{width:21.875rem;width:auto;margin:0 auto}.connect{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.connect__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;padding-top:3.125rem}.connect__text{padding-left:0}.connect__card{width:auto;margin:0 auto}.connect__heading{width:auto;margin:0 auto}.connect-card{width:auto;margin:0 auto}.connect-card__container{width:auto;margin:0 auto}.connect-card__text{font-size:16px}.bottom-baner__container{width:auto;margin:0 auto;padding-top:3.125rem}.bottom-baner__subtitle{font-size:16px}.bottom-baner__button{padding:.625rem 1.875rem}.tick__text{font-size:14px}}@media (max-width:47.99875em) and (any-hover:none){.icon-menu{cursor:default}}@media (max-width:29.99875em){.fp-bullets{top:auto;bottom:1.25rem;-webkit-transform:translate(50%,0);-ms-transform:translate(50%,0);transform:translate(50%,0);-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;right:50%}}@media (any-hover:hover){.fp-bullets .fp-bullet:hover{opacity:1}.header__button:hover{background-color:#1943ef;color:#fff}.menu__link:hover{color:#1943ef}} \ No newline at end of file diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..011f7ce Binary files /dev/null and b/favicon.ico differ diff --git a/fonts/Gilroy-Bold.woff b/fonts/Gilroy-Bold.woff new file mode 100644 index 0000000..9ee4f2b Binary files /dev/null and b/fonts/Gilroy-Bold.woff differ diff --git a/fonts/Gilroy-Bold.woff2 b/fonts/Gilroy-Bold.woff2 new file mode 100644 index 0000000..59dd5d5 Binary files /dev/null and b/fonts/Gilroy-Bold.woff2 differ diff --git a/fonts/Gilroy-Medium.woff b/fonts/Gilroy-Medium.woff new file mode 100644 index 0000000..17a216e Binary files /dev/null and b/fonts/Gilroy-Medium.woff differ diff --git a/fonts/Gilroy-Medium.woff2 b/fonts/Gilroy-Medium.woff2 new file mode 100644 index 0000000..22f4131 Binary files /dev/null and b/fonts/Gilroy-Medium.woff2 differ diff --git a/fonts/Gilroy-Semibold.woff b/fonts/Gilroy-Semibold.woff new file mode 100644 index 0000000..ebdba37 Binary files /dev/null and b/fonts/Gilroy-Semibold.woff differ diff --git a/fonts/Gilroy-Semibold.woff2 b/fonts/Gilroy-Semibold.woff2 new file mode 100644 index 0000000..7763625 Binary files /dev/null and b/fonts/Gilroy-Semibold.woff2 differ diff --git a/fonts/icons.woff b/fonts/icons.woff new file mode 100644 index 0000000..bf48313 Binary files /dev/null and b/fonts/icons.woff differ diff --git a/fonts/icons.woff2 b/fonts/icons.woff2 new file mode 100644 index 0000000..5fb6307 Binary files /dev/null and b/fonts/icons.woff2 differ diff --git a/home.html b/home.html new file mode 100644 index 0000000..609caaf --- /dev/null +++ b/home.html @@ -0,0 +1,192 @@ + + + + + Realtionz + + + + + + + + + + +
+
+
+ +
+ + +
+
+ Try it for free + +
+
+
+
+
+
+
+
+

Take your relationships to the next level

+
+
+

The multichannel sales engagement platform which automates + personal email outreach, calls, and tasks, while Sales can focus on what really matters + - closing deals.

+
+ +
+
+ welcome +
+
+
+
+
+ +
+ +
+
+
+ +
+

Our sync remembers everything

+

We build a huge databasse of all your contacts with all the possible details they share with you and you can access it anywhere, anytime. It’s works so well that you will love it like we do.

+
+
+
+ +

Available on devices

+
+
+ +

Seatch details

+
+
+
+
+ +

Can be accesed via phonebook

+
+
+ +

24X7 Support

+
+
+
+
+
+
+
+ +
+
+

Archana Deshmukh

+

Product Design Consultant

+
+
+
17 April, 1994
+
Product Design Consultant
+
Went to Amsterdam with parents to visit her brother.
+
+ +
+
+
+
+
+

Send content around anxiety

+

3 people on the list

+

We all worry and get upset from time to time. It’s a normal part of life, right? But what happens when that anxiety or anger takes over, and you can’t calm down? Being able to calm yourself in the mome...

+
+
+ +

Stay connected in a few clicks

+

The multichannel sales engagement platform which automates personal email outreach, calls, and tasks, while Sales can focus on what really matters - closing

+
+
+
+
+
+
+

Form better relationships with everyone

+

Start your free 14 days trial.

+
+ Try it for free +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/img/3dot.svg b/img/3dot.svg new file mode 100644 index 0000000..ce894ed --- /dev/null +++ b/img/3dot.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/img/Bithday.svg b/img/Bithday.svg new file mode 100644 index 0000000..f70bdf4 --- /dev/null +++ b/img/Bithday.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/Sync.svg b/img/Sync.svg new file mode 100644 index 0000000..c9e6a4c --- /dev/null +++ b/img/Sync.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/Tick Ver.svg b/img/Tick Ver.svg new file mode 100644 index 0000000..3d77bbf --- /dev/null +++ b/img/Tick Ver.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/Tick.svg b/img/Tick.svg new file mode 100644 index 0000000..85e711f --- /dev/null +++ b/img/Tick.svg @@ -0,0 +1,3 @@ + + + diff --git a/img/Work.svg b/img/Work.svg new file mode 100644 index 0000000..39bf251 --- /dev/null +++ b/img/Work.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/img/ava.png b/img/ava.png new file mode 100644 index 0000000..c3089b9 Binary files /dev/null and b/img/ava.png differ diff --git a/img/ava.webp b/img/ava.webp new file mode 100644 index 0000000..1e0c4f7 Binary files /dev/null and b/img/ava.webp differ diff --git a/img/ava1.jpeg b/img/ava1.jpeg new file mode 100644 index 0000000..4cedb35 Binary files /dev/null and b/img/ava1.jpeg differ diff --git a/img/ava1.webp b/img/ava1.webp new file mode 100644 index 0000000..1080e5a Binary files /dev/null and b/img/ava1.webp differ diff --git a/img/ava2.jpeg b/img/ava2.jpeg new file mode 100644 index 0000000..0f85964 Binary files /dev/null and b/img/ava2.jpeg differ diff --git a/img/ava2.webp b/img/ava2.webp new file mode 100644 index 0000000..2dc6b61 Binary files /dev/null and b/img/ava2.webp differ diff --git a/img/ava3.jpeg b/img/ava3.jpeg new file mode 100644 index 0000000..81d9a28 Binary files /dev/null and b/img/ava3.jpeg differ diff --git a/img/ava3.webp b/img/ava3.webp new file mode 100644 index 0000000..8ad8774 Binary files /dev/null and b/img/ava3.webp differ diff --git a/img/connect.svg b/img/connect.svg new file mode 100644 index 0000000..a5508b0 --- /dev/null +++ b/img/connect.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/img/images.png b/img/images.png new file mode 100644 index 0000000..bc5323c Binary files /dev/null and b/img/images.png differ diff --git a/img/images.webp b/img/images.webp new file mode 100644 index 0000000..8d05b5a Binary files /dev/null and b/img/images.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..202bae9 --- /dev/null +++ b/index.html @@ -0,0 +1,179 @@ + + + + + + + Верстка «web_lab» + + + +
+

Верстка «web_lab»

+
+ Опис проєкту +
+

Готові сторінки:

+
    +
  1. Головна
    2. +
+

Попапи:

+
    +
    2. +
+
+

Дякую за замовлення!

+

Буду радий (да) гарному відгуку.

+

Звертайтесь ще!

+
+
+

Мої контакти:

+

Пошта: email@gmail.com

+

Телефон: 8 800 800 800

+

Соц. мережі: посилання

+
+
+ + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..daef5a0 --- /dev/null +++ b/js/app.js @@ -0,0 +1,74 @@ +(() => { + "use strict"; + function isWebp() { + function testWebP(callback) { + let webP = new Image; + webP.onload = webP.onerror = function() { + callback(webP.height == 2); + }; + webP.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"; + } + testWebP((function(support) { + let className = support === true ? "webp" : "no-webp"; + document.documentElement.classList.add(className); + })); + } + let bodyLockStatus = true; + let bodyLockToggle = (delay = 500) => { + if (document.documentElement.classList.contains("lock")) bodyUnlock(delay); else bodyLock(delay); + }; + let bodyUnlock = (delay = 500) => { + let body = document.querySelector("body"); + if (bodyLockStatus) { + let lock_padding = document.querySelectorAll("[data-lp]"); + setTimeout((() => { + for (let index = 0; index < lock_padding.length; index++) { + const el = lock_padding[index]; + el.style.paddingRight = "0px"; + } + body.style.paddingRight = "0px"; + document.documentElement.classList.remove("lock"); + }), delay); + bodyLockStatus = false; + setTimeout((function() { + bodyLockStatus = true; + }), delay); + } + }; + let bodyLock = (delay = 500) => { + let body = document.querySelector("body"); + if (bodyLockStatus) { + let lock_padding = document.querySelectorAll("[data-lp]"); + for (let index = 0; index < lock_padding.length; index++) { + const el = lock_padding[index]; + el.style.paddingRight = window.innerWidth - document.querySelector(".wrapper").offsetWidth + "px"; + } + body.style.paddingRight = window.innerWidth - document.querySelector(".wrapper").offsetWidth + "px"; + document.documentElement.classList.add("lock"); + bodyLockStatus = false; + setTimeout((function() { + bodyLockStatus = true; + }), delay); + } + }; + function menuInit() { + if (document.querySelector(".icon-menu")) document.addEventListener("click", (function(e) { + if (bodyLockStatus && e.target.closest(".icon-menu")) { + bodyLockToggle(); + document.documentElement.classList.toggle("menu-open"); + } + })); + } + let addWindowScrollEvent = false; + setTimeout((() => { + if (addWindowScrollEvent) { + let windowScroll = new Event("windowScroll"); + window.addEventListener("scroll", (function(e) { + document.dispatchEvent(windowScroll); + })); + } + }), 0); + window["FLS"] = true; + isWebp(); + menuInit(); +})(); \ No newline at end of file diff --git a/js/app.min.js b/js/app.min.js new file mode 100644 index 0000000..a689288 --- /dev/null +++ b/js/app.min.js @@ -0,0 +1 @@ +(()=>{"use strict";let e=!0,t=(t=500)=>{let n=document.querySelector("body");if(e){let o=document.querySelectorAll("[data-lp]");setTimeout((()=>{for(let e=0;e{let n=document.querySelector("body");if(e){let o=document.querySelectorAll("[data-lp]");for(let e=0;e{if(o){let e=new Event("windowScroll");window.addEventListener("scroll",(function(t){document.dispatchEvent(e)}))}}),0),window.FLS=!0,function(e){let t=new Image;t.onload=t.onerror=function(){e(2==t.height)},t.src="data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA"}((function(e){let t=!0===e?"webp":"no-webp";document.documentElement.classList.add(t)})),document.querySelector(".icon-menu")&&document.addEventListener("click",(function(o){e&&o.target.closest(".icon-menu")&&(((e=500)=>{document.documentElement.classList.contains("lock")?t(e):n(e)})(),document.documentElement.classList.toggle("menu-open"))}))})(); \ No newline at end of file