|
|
@@ -1,618 +0,0 @@
|
|
|
-* {
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-body {
|
|
|
- margin: 0;
|
|
|
- font-family: 'Roboto', sans-serif;
|
|
|
-}
|
|
|
-li {
|
|
|
- list-style: none;
|
|
|
-}
|
|
|
-a {
|
|
|
- text-decoration: none;
|
|
|
-}
|
|
|
-.header {
|
|
|
- position: relative;
|
|
|
- max-width: 1920px;
|
|
|
-}
|
|
|
-.header-container {
|
|
|
- width: 100%;
|
|
|
- height: 92px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- position: absolute;
|
|
|
- padding: 62px 61px 0 61px;
|
|
|
- z-index: 10;
|
|
|
- /* display: none; */
|
|
|
-}
|
|
|
-.header__logo {
|
|
|
- /* width: 480px; */
|
|
|
- height: 100%;
|
|
|
-
|
|
|
-}
|
|
|
-.header__info {
|
|
|
- /* width: 960px; */
|
|
|
- height: 100%;
|
|
|
-
|
|
|
-
|
|
|
-}
|
|
|
-.header__nav {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.info__list {
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
-.info__list a {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-.info__list li {
|
|
|
- margin-right: 59px;
|
|
|
- height: 20px;
|
|
|
-}
|
|
|
-.info__list li:last-child a {
|
|
|
- color: rgba(255, 202, 0, 1);
|
|
|
-}
|
|
|
-.info__list li:last-child {
|
|
|
- margin-right: 0;
|
|
|
- width: 105px;
|
|
|
-}
|
|
|
-.info__list li:nth-child(4) {
|
|
|
- border-right: 1px solid rgba(240, 240, 240, 1);
|
|
|
- width: 80px;
|
|
|
- margin-right: 41px;
|
|
|
-}
|
|
|
-.nav__email {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.nav__email a{
|
|
|
- color: white;
|
|
|
-}
|
|
|
-.nav__menu {
|
|
|
- margin-left: 0px;
|
|
|
- margin-right: 25px;
|
|
|
-}
|
|
|
-.nav__menu a {
|
|
|
- color: white;
|
|
|
-}
|
|
|
-.menu__btn {
|
|
|
- display: block;
|
|
|
- position: relative;
|
|
|
-}
|
|
|
-.menu__btn span {
|
|
|
- margin-top: 5px;
|
|
|
-}
|
|
|
-.menu__btn span,
|
|
|
-.menu__btn span::before {
|
|
|
- position: absolute;
|
|
|
- width: 50px;
|
|
|
- height: 1px;
|
|
|
- background-color: #ffffff;
|
|
|
-}
|
|
|
-.menu__btn span::before {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- transform: translateY(10px);
|
|
|
-}
|
|
|
-.asd {
|
|
|
- height: 600px;
|
|
|
- width: 100%;
|
|
|
- background-color: black;
|
|
|
-}
|
|
|
-.main {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.main-header {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- width: 100%;
|
|
|
- min-height: 100vh;
|
|
|
- position: relative;
|
|
|
- margin-bottom: 41px;
|
|
|
- background-color: black;
|
|
|
- z-index: 3;
|
|
|
-}
|
|
|
-.video__media {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- top: 100px;
|
|
|
- left: calc(50% - 600px);
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
-.main-header__title {
|
|
|
- padding-top: 282px;
|
|
|
- width: 50%;
|
|
|
-}
|
|
|
-.welcome {
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 18px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 300;
|
|
|
- line-height: 21px;
|
|
|
- margin-bottom: 23px;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
-}
|
|
|
-.web-production {
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 64px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 700;
|
|
|
- line-height: 75px;
|
|
|
- margin-bottom: 100px;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
-}
|
|
|
-.discus-btn {
|
|
|
- width: 240px;
|
|
|
- height: 68px;
|
|
|
- display: flex;
|
|
|
- background-color: #FFCA00;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- overflow: hidden;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.discus-btn:hover div:first-child {
|
|
|
- transition: 2s;
|
|
|
- transition-delay: 0.5s;
|
|
|
- transition-property: color;
|
|
|
- color: yellow;
|
|
|
-}
|
|
|
-.discus-btn__text {
|
|
|
- color: rgba(32, 32, 32, 1);
|
|
|
- position: relative;
|
|
|
- z-index: 5;
|
|
|
-}
|
|
|
-.dott {
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background-color: #202020;
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-.discus-btn:hover div:last-child {
|
|
|
- transform: scale(70);
|
|
|
- transition: 1.5s;
|
|
|
-}
|
|
|
-.arrow {
|
|
|
- color: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- bottom: 174px;
|
|
|
- left: 10px;
|
|
|
- transform: rotate(-90deg);
|
|
|
-}
|
|
|
-.arrow svg {
|
|
|
- transform: rotate(90deg);
|
|
|
- margin-right: 40px;
|
|
|
-}
|
|
|
-.chat {
|
|
|
- height: 76px;
|
|
|
- width: 76px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: rgba(255, 204, 0, 1);
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- right: 68px;
|
|
|
- bottom: 109px;
|
|
|
- box-shadow: 0 0 0 24px rgba(255, 204, 0, 0.1);
|
|
|
- cursor: pointer;
|
|
|
- transition: 2s;
|
|
|
-}
|
|
|
-.chat:hover {
|
|
|
- background-color: white;
|
|
|
- transform: scale(1.8);
|
|
|
- box-shadow: 0 0 0 0;
|
|
|
-}
|
|
|
-.chat:hover svg{
|
|
|
- transform: scale(1.4);
|
|
|
- transition: 1s;
|
|
|
- color: green;
|
|
|
-}
|
|
|
-.main-content {
|
|
|
- margin-bottom: 123px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- width: 50%;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.main-content__services {
|
|
|
- margin-bottom: 50px;
|
|
|
- height: 21px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.services {
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 18px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 300;
|
|
|
- line-height: 21px;
|
|
|
- margin-left: 10px;
|
|
|
-}
|
|
|
-.main-content__wrap {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-content: flex-start;
|
|
|
-}
|
|
|
-.main-content__blocks {
|
|
|
- width: 50%;
|
|
|
- height: 179px;
|
|
|
- display: flex;
|
|
|
- margin-bottom: 110px;
|
|
|
-}
|
|
|
-.main-content__blocks:last-child {
|
|
|
- margin-bottom: 181px;
|
|
|
-}
|
|
|
-.main-content__blocks__img {
|
|
|
- width: 130px;
|
|
|
- height: 130px;
|
|
|
- margin-right: 17px;
|
|
|
-}
|
|
|
-.main-content__blocks__text {
|
|
|
- width: 332px;
|
|
|
- height: 179px;
|
|
|
- border-bottom: 1px solid rgba(240, 240, 240, 1);
|
|
|
-}
|
|
|
-.blocks-name {
|
|
|
- width: 100%;
|
|
|
- height: 26px;
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 22px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 26px;
|
|
|
- color: rgba(32, 32, 32, 1);
|
|
|
-
|
|
|
-}
|
|
|
-.blocks-text {
|
|
|
- height: 88px;
|
|
|
- width: 100%;
|
|
|
- padding-top: 28px;
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 14px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 20px;
|
|
|
- color: rgba(126, 126, 126, 1);
|
|
|
-}
|
|
|
-.blocks-arrow {
|
|
|
- width: 100%;
|
|
|
- height: 65px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-#learn-more {
|
|
|
- display: flex;
|
|
|
-}
|
|
|
-.learn-more__text {
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 14px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 16px;
|
|
|
- margin-right: 22px;
|
|
|
-}
|
|
|
-.main-content__portfolio {
|
|
|
- height: 21px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 45px;
|
|
|
-}
|
|
|
-.main-content__portfolio-1 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.Portfolio {
|
|
|
- margin-left: 10px;
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 18px;
|
|
|
- color: rgba(32, 32, 32, 1);
|
|
|
- margin: 0 0 0 10px;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-.main-content__portfolio-2 {
|
|
|
- color: rgba(126, 126, 126, 1);
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-.main-content__projects {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 40px;
|
|
|
-}
|
|
|
-.projects__block {
|
|
|
- width: calc(33.33333% - 10px);
|
|
|
- height: 484px;
|
|
|
-}
|
|
|
-/* .projects__block:first-child div {
|
|
|
- height: 314px;
|
|
|
-} */
|
|
|
-.projects__picture1 {
|
|
|
- height: 314px;
|
|
|
- background-image: url(../img/Rectangle\ Copy\ 22.png);
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding: 226px 145px 33px 30px;
|
|
|
-}
|
|
|
-
|
|
|
-.picture__text1 {
|
|
|
- color: rgba(152, 152, 152, 1);
|
|
|
- font-size: 14px;
|
|
|
- margin: 0 0 9px 0;
|
|
|
-}
|
|
|
-.picture__text2 {
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- font-size: 22px;
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-.projects__text {
|
|
|
- padding: 20px 26px 40px 30px;
|
|
|
- height: 170px;
|
|
|
-}
|
|
|
-.text__text {
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(126, 126, 126, 1);
|
|
|
- margin: 0 0 31px 0;
|
|
|
-}
|
|
|
-.arrow__border {
|
|
|
- width: 100%;
|
|
|
- height: 38px;
|
|
|
- border-bottom: 1px solid rgba(240, 240, 240, 1);
|
|
|
- padding-left: 21px;
|
|
|
-}
|
|
|
-.projects__picture2 {
|
|
|
- height: 396px;
|
|
|
- background-image: url(../img/Rectangle\ Copy\ 24.jpg);
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding: 308px 28px 28px 28px;
|
|
|
-}
|
|
|
-.projects__picture3 {
|
|
|
- height: 396px;
|
|
|
- background-image: url(../img/Rectangle\ Copy\ 30.jpg);
|
|
|
- background-repeat: no-repeat;
|
|
|
- padding: 308px 30px 28px 26px;
|
|
|
-}
|
|
|
-.btn-projects {
|
|
|
- width: 100%;
|
|
|
- height: 68px;
|
|
|
- border: 2px solid rgba(255, 202, 0, 1);
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- background-color: #E5E5E5;
|
|
|
- margin-bottom: 150px;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.btn-projects:hover {
|
|
|
- transition: 1s;
|
|
|
- width: 70%;
|
|
|
- border-radius: 70%;
|
|
|
-}
|
|
|
-.btn-projects:hover span {
|
|
|
- animation-name: button;
|
|
|
- animation-duration: 3s;
|
|
|
- animation-iteration-count: infinite;
|
|
|
- animation-direction: normal;
|
|
|
-}
|
|
|
-@keyframes button {
|
|
|
- 0% {
|
|
|
- font-size: 14px;
|
|
|
- color: black;
|
|
|
- }
|
|
|
- 25% {
|
|
|
- font-size: 16px;
|
|
|
- color: blue;
|
|
|
- }
|
|
|
- 50% {
|
|
|
- font-size: 18px;
|
|
|
- color: red;
|
|
|
- }
|
|
|
- 75% {
|
|
|
- font-size: 20px;
|
|
|
- color: green;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- font-size: 22px;
|
|
|
- color: yellow;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-.main-content__info {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- height: 355px;
|
|
|
- flex-wrap: wrap;
|
|
|
- margin-bottom: 180px;
|
|
|
-}
|
|
|
-@media (max-width: 1000px) {
|
|
|
- .main-content__info {
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .info-block {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
-.info-block {
|
|
|
- width: calc(50% - 8px);
|
|
|
- height: calc(50% - 15px);
|
|
|
- background-color: rgba(245, 247, 247, 1);
|
|
|
- padding: 0 19px 0 40px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.info-block__img {
|
|
|
- width: 109px;
|
|
|
- height: 75px;
|
|
|
-}
|
|
|
-#info-block-img1 {
|
|
|
- width: 72px;
|
|
|
- height: 75px;
|
|
|
- margin-left: 22px;
|
|
|
-}
|
|
|
-.info-block__text {
|
|
|
- padding-left: 65px;
|
|
|
- padding-top: 11px;
|
|
|
-}
|
|
|
-.info__text1 {
|
|
|
- height: 26px;
|
|
|
- width: 100%;
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 22px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 500;
|
|
|
- margin-bottom: 10px;
|
|
|
-}
|
|
|
-.info__text2 {
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 14px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- color: rgba(126, 126, 126, 1);
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-.main-content__clients {
|
|
|
- height: 21px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 23px;
|
|
|
-}
|
|
|
-.main-content__clients__blocks {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 158px;
|
|
|
-}
|
|
|
-.clients__blocks__block {
|
|
|
- height: 150px;
|
|
|
- width: 25%;
|
|
|
- margin-right: 16px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background-color: rgba(245, 247, 247, 1);
|
|
|
-}
|
|
|
-.clients__blocks__block:last-child {
|
|
|
- margin-right: 0;
|
|
|
-}
|
|
|
-.main-content__seo-text {
|
|
|
- width: 100%;
|
|
|
-}
|
|
|
-.seo-text__top {
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 22px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 26px;
|
|
|
- margin-bottom: 23px;
|
|
|
-}
|
|
|
-.seo-text__text {
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 14px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 400;
|
|
|
- line-height: 24px;
|
|
|
- color: rgba(126, 126, 126, 1);
|
|
|
- margin-bottom: 20px;
|
|
|
-}
|
|
|
-.seo-text__read-more {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.seo-text__read-more p {
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 14px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 16px;
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-.footer {
|
|
|
- max-width: 1920px;
|
|
|
- height: 110px;
|
|
|
- background: rgba(18, 18, 18, 1);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin: 0 auto;
|
|
|
- border-top: 4px solid rgba(255, 202, 0, 1);
|
|
|
-}
|
|
|
-.footer-container {
|
|
|
- width: 50%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.footer__logo {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.footer__copyright {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: rgba(126, 126, 126, 1);
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 400;
|
|
|
-}
|
|
|
-.footer__contact {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.footer__contact a {
|
|
|
- font-family: Roboto;
|
|
|
- font-size: 16px;
|
|
|
- font-style: normal;
|
|
|
- font-weight: 500;
|
|
|
- line-height: 19px;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- margin-left: 16px;
|
|
|
-}
|
|
|
-.social-box {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background-color: rgba(255, 255, 255, 0.05);
|
|
|
- border-radius: 50%;
|
|
|
-}
|
|
|
-.social-box:hover {
|
|
|
- background-color: white;
|
|
|
-}
|
|
|
-.social-box:hover svg {
|
|
|
- fill: blue;
|
|
|
-}
|
|
|
-.social-box svg {
|
|
|
- margin: 0;
|
|
|
- fill: white;
|
|
|
-}
|
|
|
-.footer__social {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.footer__social {
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.footer__social:last-child div {
|
|
|
- margin-left: 15px;
|
|
|
-}
|
