apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout pages outstaffing and main page, refactor

Browse Source 
footer and adaptive footer, add font BebasNeue
This commit is contained in:
Никита Губарь
2024-05-14 06:14:04 +03:00
parent 65b716fa27
commit ec1e2a8a7f
16 changed files with 900 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/Common/Footer/Footer.jsx
View File

@ -1,10 +1,10 @@
import React from "react";
import email from "assets/icons/emailLogo.svg";
// import email from "assets/icons/emailLogo.svg";
import tg from "assets/icons/tgFooter.svg";
import vk from "assets/icons/vkLogo.svg";
import logo from "assets/images/logo/ITguild.svg";
// import logo from "assets/images/logo/ITguild.svg";
import "./footer.scss";
export const Footer = () => {
@ -12,7 +12,7 @@ export const Footer = () => {
<footer>
<div className="container">
<div className="footer">
<div className="footer__top">
{/* <div className="footer__top">
<img src={logo} alt="logo" className="logo" />
<p>
Подберем и документально оформим IT-специалистов, после чего
@ -20,10 +20,7 @@ export const Footer = () => {
управление над сотрудниками, имея возможность контролировать и
заменять IT штат.
</p>
<div className="footer__copyright">
© {new Date().getFullYear()} - Все права защищены
</div>
</div>
</div> */}
<div className="footer__bottom">
<div className="footer__social">
<div className="footer__social__icons">
@ -34,14 +31,16 @@ export const Footer = () => {
<img src={tg} alt="tg" width={24} />
</a>
</div>
<p>Присоединиться к команде</p>
<a href="mailto:office@itguild.info">office@itguild.info</a>
</div>
<div className="footer__info">
<div className="footer__mail">
<img src={email} alt="email" />
<a href="mailto:office@itguild.info">office@itguild.info</a>
{/* <img src={email} alt="email" /> */}
<a href="#">Присоединиться к команде</a>
</div>
<a className="footer__policy">Политика конфиденциальности</a>
<p>
© {new Date().getFullYear()} - Outstaffing. Все права защищены
</p>
</div>
</div>
</div>

116
src/components/Common/Footer/footer.scss
View File

@ -1,14 +1,35 @@
footer {
border-top: 1px solid #ebebeb;
padding: 35px 0 50px;
@media (max-width: 772px) {
padding: 56px 0 35px;
background: #1e1e1e;
}
}
.footer {
p,
a {
max-width: 620px;
text-decoration: underline;
color: #838383;
font-family: GT Eesti Pro Display;
font-size: 12px;
font-weight: 400;
line-height: 13.92px;
letter-spacing: 0.01em;
@media (max-width: 772px) {
margin-left: 0;
text-align: center;
}
}
&__top {
display: flex;
align-items: start;
@media (max-width: 620px) {
@media (max-width: 772px) {
flex-direction: column;
align-items: center;
row-gap: 15px;
@ -17,29 +38,14 @@ footer {
.logo {
width: 83px;
}
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) {
@media (max-width: 772px) {
flex-direction: column;
}
}
@ -47,9 +53,10 @@ footer {
&__social {
display: flex;
align-items: center;
column-gap: 23px;
@media (max-width: 590px) {
flex-direction: column;
@media (max-width: 772px) {
margin: 0 0 60px 0;
justify-content: center;
}
@ -58,15 +65,10 @@ footer {
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;
a {
@media (max-width: 772px) {
font-size: 16px;
line-height: 18.56px;
}
}
}
@ -74,6 +76,22 @@ footer {
&__info {
display: flex;
align-items: center;
column-gap: 104px;
@media (max-width: 772px) {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 76px;
}
p {
@media (max-width: 772px) {
font-size: 14px;
line-height: 16.24px;
text-decoration: none;
}
}
}
&__mail {
@ -82,41 +100,11 @@ footer {
column-gap: 5px;
a {
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #5b6871;
}
}
&__policy {
font-weight: 400;
font-size: 13px;
line-height: 16px;
color: #5b6871;
margin-left: 150px;
@media (max-width: 720px) {
margin-left: 30px;
}
&:hover {
color: #5b6871;
text-decoration: none;
}
}
&__copyright {
margin-left: auto;
font-size: 13px;
@media (max-width: 910px) {
min-width: 142px;
margin-left: 15px;
}
@media (max-width: 620px) {
margin-left: 0;
@media (max-width: 772px) {
color: #a7ca60;
font-size: 17px;
line-height: 19.72px;
}
}
}
}