Rafael_Sampaio_de_Oliveira/desafio-react-e-typescript-rafael-sampaio
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: cria footer top 1280px

Browse Source
This commit is contained in:
Rafael Sampaio de Oliveira 2023-01-03 08:58:14 -03:00
parent 6e2b2d632d
commit 69aa562b16
9 changed files with 167 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/facebook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/instagram.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/images/linkedIn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/twitter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/youTube.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

2
src/components/FooterBottom/styles.module.scss
View File

@ -118,7 +118,7 @@
}
}
@media (min-width: 1025px) and (max-width: 1128px) {
@media (min-width: 1025px) and (max-width: 1145px) {
.poweredBy,
.developedBy {
font-size: 8px;

92
src/components/FooterTop/index.tsx
View File

@ -1,8 +1,98 @@
import React from "react";
import styles from "./styles.module.scss";
import facebook from "../../assets/images/facebook.png";
import instagram from "../../assets/images/instagram.png";
import twitter from "../../assets/images/twitter.png";
import youTube from "../../assets/images/youTube.png";
import linkedIn from "../../assets/images/linkedIn.png";
const FooterTop = () => {
return <div className={styles["footerTop"]}></div>;
return (
<div className={styles["footerTop"]}>
<div className={styles["footerTop__content"]}>
<div className={styles["footerTop__menuList"]}>
<div>
<div className={styles["menuLists-title"]}>
<h1>Institucional</h1>
<button></button>
</div>
<ul>
<li>
<a href="#">Quem Somos</a>
</li>
<li>
<a href="#">Política de Privacidade</a>
</li>
<li>
<a href="#">Segurança</a>
</li>
<li>
<a href="#">Seja um Revendedor</a>
</li>
</ul>
</div>
<div>
<div className={styles["menuLists-title"]}>
<h1>Dúvidas</h1>
<button></button>
</div>
<ul>
<li>
<a href="#">Entrega</a>
</li>
<li>
<a href="#">Pagamento</a>
</li>
<li>
<a href="#">Troca e Devoluções</a>
</li>
<li>
<a href="#">Dúvidas Frquentes</a>
</li>
</ul>
</div>
<div>
<div className={styles["menuLists-title"]}>
<h1>Fale Conosco</h1>
<button></button>
</div>
<ul>
<h2>Atendimento Ao Consumidor</h2>
<li>
<p>&#40;11&#41; 4159 9504</p>
</li>
<h2>Atendimento Online</h2>
<li>
<p>&#40;11&#41; 99433-8825</p>
</li>
</ul>
</div>
</div>
<div className={styles["footerTop__socialMedia"]}>
<div className={styles["socialMedia-icons"]}>
<a href="#">
<img src={facebook} alt="" />
</a>
<a href="#">
<img src={instagram} alt="" />
</a>
<a href="#">
<img src={twitter} alt="" />
</a>
<a href="#">
<img src={youTube} alt="" />
</a>
<a href="#">
<img src={linkedIn} alt="" />
</a>
</div>
<div className={styles["socialMeida-site"]}>
<a href="#">www.loremipsum.com</a>
</div>
</div>
</div>
</div>
);
};
export { FooterTop };

74
src/components/FooterTop/styles.module.scss
View File

@ -1,6 +1,80 @@
.footerTop {
display: flex;
justify-content: center;
border-width: 0px 0px 1px 1px;
border-style: solid;
border-color: var(--black-500);
height: 239px;
padding: 50px 0;
&__content {
display: flex;
justify-content: space-between;
width: 84.442%;
}
&__menuList {
display: flex;
justify-content: space-between;
width: 707px;
height: 100%;
.menuLists-title {
height: 14px;
margin-bottom: 12px;
}
h1 {
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
text-transform: uppercase;
color: var(--black-400);
}
h2 {
font-style: normal;
font-weight: 500;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: var(--black-400);
margin-bottom: 12px;
}
li {
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: capitalize;
color: var(--black-400);
margin-bottom: 12px;
}
}
&__socialMedia {
width: 215px;
height: 63px;
.socialMedia-icons {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
img {
width: 35px;
height: 35px;
}
}
.socialMeida-site {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: var(--black-400);
}
}
}

1
src/styles/global.scss
View File

@ -18,6 +18,7 @@
a {
all: unset;
cursor: pointer;
}
ul {