diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js index acfec754..947c4e88 100644 --- a/src/components/Footer/Footer.js +++ b/src/components/Footer/Footer.js @@ -1,52 +1,49 @@ import React from 'react' -import align from '../../images/align-left.png' -import phone from '../../images/phone.png' -import telegram from '../../images/telegram.png' +import logo from '../../images/logoGuild.png' +import vk from '../../images/vkLogo.svg' +import tg from '../../images/tgLogo.svg' +import email from '../../images/emailLogo.svg' import './footer.scss' export const Footer = () => { return ( -
-
) } diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss index 5b46f629..86b09463 100644 --- a/src/components/Footer/footer.scss +++ b/src/components/Footer/footer.scss @@ -1,99 +1,215 @@ -.footer { - margin-top: -3rem; +footer { + border-top: 1px solid #EBEBEB; + padding: 35px 0 50px; +} - &__left { +.footer { + + &__top { + display: flex; + align-items: start; + + @media (max-width: 620px) { + flex-direction: column; + align-items: center; + row-gap: 15px; + } + + p { + max-width: 620px; + margin-left: 33px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #5B6871; + + @media (max-width: 620px) { + margin-left: 0; + text-align: center; + } + } + } + + &__bottom { + display: flex; + align-items: center; + margin-top: 22px; + justify-content: space-between; + + @media (max-width: 590px) { + flex-direction: column; + } + } + + &__social { + display: flex; + align-items: center; + + @media (max-width: 590px) { + flex-direction: column; + justify-content: center; + } + + &__icons { + display: flex; + column-gap: 10px; + } + + p { + cursor: pointer; + margin-left: 60px; + font-weight: 500; + font-size: 14px; + line-height: 33px; + + @media (max-width: 590px) { + margin-left: 0; + } + } + } + + &__info { display: flex; align-items: center; } - &__description { - padding: 0 100px 0 34px; - - span { - color: #18586e; - font-family: 'GT Eesti Pro Display'; - font-size: 1.6em; - font-weight: 400; - font-style: normal; - letter-spacing: normal; - line-height: 16.81px; - text-align: left; - } - } - - &__icon { - text-align: end; - - img { - margin-left: 20px; - } - } - - &__right { + &__mail { display: flex; - flex-direction: column; - align-items: left; + align-items: center; + column-gap: 13px; + + p { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #5B6871; + } } - &__phone { - color: #003b65; - font-family: 'CeraPro'; - font-size: 2.1em; - letter-spacing: normal; - line-height: 25px; - text-align: left; - } - - &__working-hours { - color: #003b65; - font-family: 'CeraPro'; - font-size: 1.2em; + &__policy { font-weight: 400; - font-style: normal; - letter-spacing: normal; - line-height: normal; - margin-left: 24px; + font-size: 10px; + line-height: 16px; + color: #5B6871; + margin-left: 150px; + + @media (max-width: 720px) { + margin-left: 30px; + } + + &:hover { + color: #5B6871; + text-decoration: none; + } } &__copyright { - padding: 1rem 1rem 1rem 5.6rem; - font-family: 'Muller'; - font-weight: 300; - font-size: 1.2em; - } -} + margin-left: auto; -@media (max-width: 1199px) { - .footer { - &__left { - margin-bottom: 20px; + @media (max-width: 910px) { + min-width: 142px; + margin-left: 15px; + } + + @media (max-width: 620px) { + margin-left: 0; } } + //margin-top: -3rem; + // + //&__left { + // display: flex; + // align-items: center; + //} + // + //&__description { + // padding: 0 100px 0 34px; + // + // span { + // color: #18586e; + // font-family: 'GT Eesti Pro Display'; + // font-size: 1.6em; + // font-weight: 400; + // font-style: normal; + // letter-spacing: normal; + // line-height: 16.81px; + // text-align: left; + // } + //} + // + //&__icon { + // text-align: end; + // + // img { + // margin-left: 20px; + // } + //} + // + //&__right { + // display: flex; + // flex-direction: column; + // align-items: left; + //} + // + //&__phone { + // color: #003b65; + // font-family: 'CeraPro'; + // font-size: 2.1em; + // letter-spacing: normal; + // line-height: 25px; + // text-align: left; + //} + // + //&__working-hours { + // color: #003b65; + // font-family: 'CeraPro'; + // font-size: 1.2em; + // font-weight: 400; + // font-style: normal; + // letter-spacing: normal; + // line-height: normal; + // margin-left: 24px; + //} + // + //&__copyright { + // padding: 1rem 1rem 1rem 5.6rem; + // font-family: 'Muller'; + // font-weight: 300; + // font-size: 1.2em; + //} } -@media (max-width: 575.98px) { - .footer { - &__left { - margin-top: 80px; - } - - &__description { - padding: 0; - margin-left: 10px; - - span { - font-size: 1.2em; - } - } - - &__icon { - img { - margin-left: 10px; - } - } - - &__right { - margin-bottom: 20px; - } - } -} +//@media (max-width: 1199px) { +// .footer { +// &__left { +// margin-bottom: 20px; +// } +// } +//} +// +//@media (max-width: 575.98px) { +// .footer { +// &__left { +// margin-top: 80px; +// } +// +// &__description { +// padding: 0; +// margin-left: 10px; +// +// span { +// font-size: 1.2em; +// } +// } +// +// &__icon { +// img { +// margin-left: 10px; +// } +// } +// +// &__right { +// margin-bottom: 20px; +// } +// } +//} diff --git a/src/images/emailLogo.svg b/src/images/emailLogo.svg new file mode 100644 index 00000000..9d8eac36 --- /dev/null +++ b/src/images/emailLogo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/images/logoGuild.png b/src/images/logoGuild.png new file mode 100644 index 00000000..c8fd34ad Binary files /dev/null and b/src/images/logoGuild.png differ diff --git a/src/images/tgLogo.svg b/src/images/tgLogo.svg new file mode 100644 index 00000000..c414d9b7 --- /dev/null +++ b/src/images/tgLogo.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/images/vkLogo.svg b/src/images/vkLogo.svg new file mode 100644 index 00000000..2ccb8ab1 --- /dev/null +++ b/src/images/vkLogo.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +