DmitriyB
551 lines
9.8 KiB
CSS
551 lines
9.8 KiB
CSS
/*
|
|
* Prefixed by https://autoprefixer.github.io
|
|
* PostCSS: v8.4.14,
|
|
* Autoprefixer: v10.4.7
|
|
* Browsers: last 4 version
|
|
*/
|
|
|
|
.footer__container {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
background-color: transparent;
|
|
background: #141414;
|
|
border-radius: 32px 32px 0px 0px;
|
|
color: #EBEBEB;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center
|
|
}
|
|
|
|
.link {
|
|
color: #EBEBEB;
|
|
|
|
}
|
|
|
|
.footer__main-block {
|
|
width: 1200px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding: 120px 120px;
|
|
gap: 186px;
|
|
-webkit-box-pack: justify;
|
|
-ms-flex-pack: justify;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.footer__block_copyright_mobile_margin {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.footer__column_mobile {
|
|
display: none;
|
|
}
|
|
|
|
.footer__block_1 {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
gap: 70px;
|
|
}
|
|
|
|
.footer__name {
|
|
margin: 0;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 40px;
|
|
line-height: 100%;
|
|
}
|
|
|
|
.footer__name_color {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 40px;
|
|
line-height: 100%;
|
|
margin: 0;
|
|
background-image: -webkit-gradient(linear, left top, right top, from(#D375FF), color-stop(45%, #798FFF));
|
|
background-image: -o-linear-gradient(left, #D375FF 0%, #798FFF 45%);
|
|
background-image: linear-gradient(to right, #D375FF 0%, #798FFF 45%);
|
|
background-size: 100%;
|
|
background-repeat: repeat;
|
|
background-color: transparent;
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.footer__block_contacts {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.contacts__title {
|
|
margin: 0;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 120%;
|
|
/* identical to box height, or 17px */
|
|
|
|
|
|
/* Landing/White */
|
|
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
|
|
|
.footer__container_social {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: 74px 16px 74px;
|
|
grid-template-columns: 74px 74px;
|
|
gap: 16px;
|
|
grid-row-gap: 8px;
|
|
}
|
|
|
|
.footer__social {
|
|
color: #EBEBEB;
|
|
margin: 0;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 125%;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer__block_copyright {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: auto 29px 1fr;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 29px;
|
|
}
|
|
|
|
.footer__logo {
|
|
width: 50px;
|
|
height: 80px;
|
|
}
|
|
|
|
.copyright__caption {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
line-height: 120%;
|
|
-webkit-box-pack: end;
|
|
-ms-flex-pack: end;
|
|
justify-content: flex-end
|
|
}
|
|
|
|
.copyright {
|
|
margin: 0;
|
|
color: #EBEBEB;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer__block_2 {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: 380px 30px 380px;
|
|
grid-template-columns: 380px 380px;
|
|
gap: 30px;
|
|
}
|
|
|
|
.footer__card_l {
|
|
background: #1E1E1E;
|
|
border-radius: 16px;
|
|
padding: 32px;
|
|
margin-bottom: 30px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
gap: 26px;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.footer__card_2 {
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
padding: 32px;
|
|
position: relative;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 140%;
|
|
/* or 25px */
|
|
text-decoration: none;
|
|
|
|
|
|
/* Gray */
|
|
|
|
color: #E3DDE5;
|
|
border: 1px solid #454545;
|
|
border-radius: 16px;
|
|
|
|
}
|
|
|
|
.card__contacts {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 140%;
|
|
/* or 25px */
|
|
|
|
|
|
/* Landing/White */
|
|
|
|
color: #EBEBEB;
|
|
}
|
|
|
|
.card__email {
|
|
margin: 0 0 8px 0
|
|
}
|
|
|
|
.card__tel {
|
|
margin: 0;
|
|
}
|
|
|
|
.card__adress {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 18px;
|
|
line-height: 140%;
|
|
/* or 25px */
|
|
/* Landing/White */
|
|
color: #EBEBEB;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.card__street {
|
|
margin: 0;
|
|
}
|
|
|
|
.card_city {
|
|
margin: 0;
|
|
}
|
|
|
|
.card_country {
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
.card__icon {
|
|
margin-bottom: 15px;
|
|
width: 24px;
|
|
}
|
|
|
|
.card__caption {
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
.card__adress_uae {
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.ellipse__container {
|
|
position: absolute;
|
|
right: 32px;
|
|
bottom: 33px;
|
|
}
|
|
|
|
.footer__card_2:hover {
|
|
border: 1px solid #E3DDE5;
|
|
-webkit-transition: border ease-out 0.2s;
|
|
-o-transition: border ease-out 0.2s;
|
|
transition: border ease-out 0.2s;
|
|
}
|
|
|
|
.footer__card_2:hover>a>div>div>img {
|
|
-webkit-transition: opacity ease-out 0.2s;
|
|
-o-transition: opacity ease-out 0.2s;
|
|
transition: opacity ease-out 0.2s;
|
|
opacity: 1;
|
|
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 1600px) {
|
|
.footer__container {
|
|
padding: 144px 0;
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
.footer__main-block {
|
|
width: 1600px;
|
|
gap: 0;
|
|
|
|
}
|
|
|
|
.footer__block_1 {
|
|
gap: 84px;
|
|
}
|
|
|
|
.footer__name {
|
|
font-weight: 400;
|
|
font-size: 48px;
|
|
line-height: 100%;
|
|
}
|
|
|
|
.footer__name_color {
|
|
font-weight: 400;
|
|
font-size: 48px;
|
|
line-height: 100%;
|
|
}
|
|
|
|
.footer__block_contacts {
|
|
gap: 25px;
|
|
}
|
|
|
|
.contacts__title {
|
|
font-weight: 600;
|
|
font-size: 17px;
|
|
line-height: 120%;
|
|
}
|
|
|
|
.footer__container_social {
|
|
gap: 25px;
|
|
-ms-grid-columns: 94px 25px 94px;
|
|
grid-template-columns: 94px 94px;
|
|
}
|
|
|
|
.footer__social {
|
|
font-weight: 400;
|
|
font-size: 20px;
|
|
line-height: 125%;
|
|
}
|
|
|
|
.footer__logo {
|
|
width: 60px;
|
|
height: 96px;
|
|
}
|
|
|
|
.footer__block_copyright {
|
|
gap: 35px;
|
|
}
|
|
|
|
.copyright__caption {
|
|
gap: 20px;
|
|
font-weight: 600;
|
|
font-size: 17px;
|
|
line-height: 120%;
|
|
|
|
}
|
|
|
|
.footer__block_2 {
|
|
gap: 35px;
|
|
-ms-grid-columns: 456px 35px 456px;
|
|
grid-template-columns: 456px 456px
|
|
}
|
|
|
|
.footer__card_l {
|
|
padding: 40px;
|
|
gap: 30px;
|
|
margin-bottom: 36px;
|
|
}
|
|
|
|
.card__contacts {
|
|
font-weight: 400;
|
|
font-size: 22px;
|
|
line-height: 140%;
|
|
}
|
|
|
|
.card__adress {
|
|
font-weight: 400;
|
|
font-size: 21.6px;
|
|
line-height: 140%;
|
|
}
|
|
|
|
.footer__card_2 {
|
|
padding: 40px 36px;
|
|
}
|
|
|
|
.card__write {
|
|
font-weight: 400;
|
|
font-size: 22px;
|
|
line-height: 140%;
|
|
}
|
|
|
|
.card__icon {
|
|
width: 28px;
|
|
margin-bottom: 17px;
|
|
}
|
|
|
|
.card__adress_uae {
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1279px) {
|
|
.footer__block_2 {
|
|
-ms-grid-columns: 311px 311px;
|
|
grid-template-columns: 311px 311px;
|
|
}
|
|
|
|
|
|
.footer__container {
|
|
padding: 120px 12px;
|
|
gap: 124px;
|
|
}
|
|
|
|
}
|
|
|
|
.footer__block_copyright_mobile {
|
|
display: none;
|
|
-ms-grid-columns: auto 29px 1fr;
|
|
grid-template-columns: auto 1fr;
|
|
gap: 29px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
line-height: 150%;
|
|
/* identical to box height, or 21px */
|
|
|
|
letter-spacing: 0.02em;
|
|
|
|
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 1060px) {
|
|
|
|
.footer__main-block {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
gap: 53px;
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
|
|
|
|
.footer__block_copyright {
|
|
display: none;
|
|
}
|
|
|
|
.footer__block_1 {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: row;
|
|
flex-direction: row;
|
|
gap: 121px;
|
|
}
|
|
|
|
.footer__block_2 {
|
|
-ms-grid-columns: 1fr 1fr;
|
|
grid-template-columns: 1fr 1fr
|
|
}
|
|
|
|
.footer__card_l {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.footer__block_copyright_mobile {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 639px) {
|
|
|
|
|
|
.footer__main-block {
|
|
gap: 42px;
|
|
|
|
|
|
}
|
|
|
|
.footer__block_1 {
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.footer__block_copyright {
|
|
display: none;
|
|
}
|
|
|
|
.footer__block_2 {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.footer__col2_mobile {
|
|
display: none;
|
|
}
|
|
|
|
.footer__col1_mobile {
|
|
display: none;
|
|
}
|
|
|
|
.footer__column_mobile {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.footer__card_l {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.footer__block_contacts {
|
|
gap: 16px;
|
|
}
|
|
|
|
.footer__block_copyright_mobile {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
|
|
} |