From 911d095120ecceec7fe5b1ede12170bc79ff607f Mon Sep 17 00:00:00 2001 From: M1kola Date: Wed, 5 Apr 2023 20:13:38 +0300 Subject: [PATCH] new footer --- src/components/Footer/Footer.js | 69 ++++---- src/components/Footer/footer.scss | 280 +++++++++++++++++++++--------- src/images/emailLogo.svg | 11 ++ src/images/logoGuild.png | Bin 0 -> 2181 bytes src/images/tgLogo.svg | 3 + src/images/vkLogo.svg | 11 ++ 6 files changed, 256 insertions(+), 118 deletions(-) create mode 100644 src/images/emailLogo.svg create mode 100644 src/images/logoGuild.png create mode 100644 src/images/tgLogo.svg create mode 100644 src/images/vkLogo.svg 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 ( -
-
-
-
-
- +
+
+
+ logo +

Подберем и документально оформим IT-специалистов, после чего передадим исполнителей под ваше руководство. + Вы получаете полное управление над сотрудниками, имея возможность контролировать и заменять IT штат.

+
+ © {new Date().getFullYear()} - Все права защищены
-
- - Подберем и документально оформим IT-специалистов, после чего - передадим исполнителей под ваше руководство. Вы получаете - полное управление над сотрудниками, имея возможность - контролировать и заменять IT штат.{' '} - +
+
+
+ +

Войти в команду

+
+
- -
-
- - -
-
- -
-
- - +7 495 156 78 98 - -

Будни с 9:00 до 21:00

-
-
-
-
- {new Date().getFullYear()} © Outstaffing
-
) } 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 0000000000000000000000000000000000000000..c8fd34adcdbd9c7ae4779b110ab15d2332d6a410 GIT binary patch literal 2181 zcmV;02zvL4P)=FGWEbOl#%1s`$+&yXT6D7~o91lq$jIqz#LG~mzKCd}lU6F9A2xo#X=_>~m7*<3UPYGyL(+bF zUtq7oRBrVojOo|DG>^5%l?L&%C^9X}zERU?t0$Xggxk(ax`K)!ao@Cqh1ci)?l6mmw1LKIkR-S+BZ&q$> zYO5)cY0O#AJ@fS=i+Wwc#OUbg9z=U+32{*}D}kP#o=7Hh{If!68z8n~8CzJ}eM*UE zbGclmt?indgoq}%tgh?FCnhFFIo;OQwnhk1+N)7^zrWqi&d!8k%&qb23SpcY8X9|p z)6LDzE%A7Kl~>lXtT#qRMo!V9bbj+TA>^ka)?$@UW3~UczP|p&$;t7+I-!%<)z#9R z$@D)AMQ*>)pJznaJ6l^@zXie`7D73sDP?>fkwd1G^h@OQ6w5jX#kKyn^Z9&BGP!Jz zSJ$@XugE=2G)>%r{D-`-O$Ly z4A-FZA9*u~Xi`dJT{c@ZoEdn<|Ag1^5RxgX0zjX&(DPPLhVDm+W^T#lrl-6-82nq1 z|9d30^7^6Knb@PQMW-zn6tkc36Ui7J9v(uOpHY=SO8GgzY+33)Kaq@VHuo32>iYug zQ%C?w*Ugu$e+HFQ`&B@pPvHG29?9Tygw*EG%{^lO#5Znf`JE(VZ?X^$EhkHtWruWe4Yql z1s*`5k%`mq1ivbttZDMzpmI`*ZFHH4#gs-B1a!=JY3!e=rlzL$;F5AfU@nCOT<5Zg z4tp|YdQ&>xwvBHVEcf>I%5*w?5AwfyDed8uP2%>^Tvs^2C5k3D}JfAHt~Hb zGmtwvQnm77k7e&y;!AAKOp20+$`>gdGX5Qk3aTt5V7XH8bJA+XE&pb zRDFGNcVlDYPoq&j8)!9F{!dUwP=yeQME1a7A3<`3+vg7G3fovdialS)IRM+3et}C! zOHln#U2rE)p8Piy>MhIe0tuTvB0bjIpzBUpB7M;182Z}>z2QJtMo|6G{h9D$@5aElLy;kWK9s~}ul{Nn=8lEx#^bgB zfbxgRve~KOdHsiR>b^>q)%Op)`uzJn6%WWdPk?jyyFqnJuenfk5XRnlCoO4KTV4Zm zB~J@MGsOhTm;8l_?4t`5wXs6sG@#$Y3)GF(wSqnQrfCg~jg5`NWAtTzVLUGlB9qBX zr&6h&L?ZEk5cb`8+RQqG;4_$lFln5LLc6bDXh(a?@6XgU!#|jPtb?0A z6`=3;IyzbpppRYX>w1J3wyat7a};{)l5!S@YqE4xibmC((`Wy zy!}ZGY>O)v;6}Tl{HDaSaQn!zRCRXlUdBeLzuBqt}nAsVS?Wp>7;|%_@+$!uN;? zTm~ZjedkbadoDM;q@NiojnMZ@UZHi}YO9RWgEMcN(l~27ZVjd~S|_PtWpsMBztDN) zMCL^M_FPe(?M!pe|h&XduXP?tkM_wk6%+DbF{}P+8r{aP* zLsft!`Jg5vGU<8Qn832vK@`rB=Qv<;*df9u+9VbK_|SzghQLk;_Ua5GTP6N{+h@G`3OQc!oLtcMn#hOuFnMF zdgl<%`8+5l`bH{}%Le^NsW@~0qasmk&M;Bex%oG^b(-BiJE=&vaNDnS%d*phiDc55 zIQ}FVar^P)8n?WI(DzISy(I7IUj4Md7sK*LmZ`q^_q$$u)D_ujamI~rLfA{i6{5Sb zM<@^G92M`-JfP!LTv2>WVS?kXthsIR>b%OW!-UMZdAj@Dqzkv45x1Tf$nBerd&_N? zCuiC%&#`05Ee)B#rWd;6Nh7&k`TnznyH5Y#?mYZw`jFrqR8=hB+?${R00000NkvXX Hu0mjflAS}6 literal 0 HcmV?d00001 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 @@ + + + + + + + + + + +