Aydogdy
/
hhm-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

social medias moved to the footer

This commit is contained in:
Kakabay 2023-02-14 14:52:36 +05:00
parent 82954a0f4d
commit e56744595e
2 changed files with 49 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/footer/Footer.tsx
View File

@ -4,6 +4,9 @@ import { Link } from 'react-router-dom';
import phone from '../../assets/icons/phone.svg';
import mail from '../../assets/icons/mail.svg';
import location from '../../assets/icons/location.svg';
import { ReactComponent as Instagram } from '../../assets/icons/insta-black.svg';
import { ReactComponent as Facebook } from '../../assets/icons/fb-black.svg';
import { ReactComponent as TikTok } from '../../assets/icons/tiktok-black.svg';
const Footer = () => {
return (
@ -74,6 +77,28 @@ const Footer = () => {
115184, Ашхабад, Битарап шаелы, 25 (Центр телерадиовещания Туркменистана)
</h3>
</div>
<div className="footer-info-item">
<div className="footer-info-item-icon">
<Instagram />
</div>
<h3 className="footer-info-item-title">hhm@inst.com</h3>
</div>
<div className="footer-info-item">
<div className="footer-info-item-icon">
<Facebook />
</div>
<h3 className="footer-info-item-title">hhm@face.com</h3>
</div>
<div className="footer-info-item">
<div className="footer-info-item-icon">
<TikTok />
</div>
<h3 className="footer-info-item-title">@hhm</h3>
</div>
<div className="footer-info-item">
<h3 className="footer-info-item-title">Реклама на ТВ и радио: (993) 12 78-13-99</h3>
</div>

28
src/styles/_footer.scss
View File

@ -41,15 +41,26 @@
gap: 2.4rem;
align-items: center;
&:nth-child(3) {
align-items: flex-start;
}
// &:nth-child(3) {
// align-items: flex-start;
// }
&:nth-child(4),
&:nth-child(5) {
&:nth-child(5),
&:nth-child(6) {
display: none;
}
&:nth-child(7),
&:nth-child(8) {
padding-left: 4.8rem;
}
}
.footer-info-item-icon {
svg {
fill: $white;
}
}
.footer-info-item-title {
font-size: 1.8rem;
color: $white;
@ -69,6 +80,15 @@
}
}
@media (max-width: 850px) {
.footer-info-item {
&:nth-child(4),
&:nth-child(5),
&:nth-child(6) {
display: flex;
}
}
}
@media (max-width: 700px) {
.footer-nav-list {
grid-template-columns: repeat(2, auto);