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

feat : criando o style do footer e ajustando os tamanhos

Browse Source
This commit is contained in:
PatrickSouza 2023-01-19 18:18:38 -03:00
parent 753cc656d6
commit 2e5a02c623
5 changed files with 88 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/footer-img/vtex-certified.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

56
src/components/footer/footer.scss
View File

@ -0,0 +1,56 @@
.footer-form {
//margin-top: 84px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 16px;
&__title {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
font-size: 36px;
line-height: 42px;
letter-spacing: 0.05em;
color: #303030;
display: flex;
justify-content: center;
}
&__input {
width: 100%;
max-width: 668px;
padding: 16px;
}
&__wrapper {
width: 100%;
max-width: 922px;
display: flex;
margin: auto;
}
&__button {
padding: 14px 20px;
gap: 10px;
width: 100%;
max-width: 246px;
background: #000000;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
}
}
.footer-wrapper {
width: 100%;
&__links {
display: flex;
justify-content: space-between;
width: 100%;
}
&__list-img {
display: flex;
list-style: none;
}
}

44
src/components/footer/index.tsx
View File

@ -5,17 +5,13 @@ const Footer = () => {
return <>
<div className='footer-form'>
<h1 className="footer-form__title">Assine nossa Newsletter</h1>
<input type="text" placeholder="E-mail" className="footer-form__input" />
<button className="footer-form__button">ENVIAR</button>
<div className="footer-form__wrapper">
<input type="email" placeholder="E-mail" className="footer-form__input" />
<button className="footer-form__button">ENVIAR</button>
</div>
</div>
<div className="footer__wrapper">
<div className="footer-wrapper__links">
<FooterLinks title='Institucional' linkList={[
{ label: 'Quem Somos', highlight: false },
{ label: 'Política de Privacidade', highlight: false },
{ label: 'Segurança', highlight: false },
{ label: 'Seja um Revendedor', highlight: true }
]} />
<FooterLinks title='Institucional' linkList={[
{ label: 'Quem Somos', highlight: false },
@ -24,16 +20,22 @@ const Footer = () => {
{ label: 'Seja um Revendedor', highlight: true }
]} />
<FooterLinks title='Institucional' linkList={[
<FooterLinks title='DÚVIDAS' linkList={[
{ label: 'Quem Somos', highlight: false },
{ label: 'Política de Privacidade', highlight: false },
{ label: 'Segurança', highlight: false },
{ label: 'Seja um Revendedor', highlight: true }
]} />
<FooterLinks title='Fale Conosco' linkList={[
{ label: 'Quem Somos', highlight: false },
{ label: 'Política de Privacidade', highlight: false },
{ label: 'Segurança', highlight: false },
{ label: 'Seja um Revendedor', highlight: true }
]} />
<div className="footer-wrapper__img-link">
<ul>
<div className="footer-wrapper__list">
<ul className='footer-wrapper__list-img'>
<li><img src="./assets/footer-img/facebook-icon.svg" alt="" /></li>
<li><img src="./assets/footer-img/instagram-icon.svg" alt="" /></li>
<li><img src="./assets/footer-img/twitter-icon.svg" alt="" /></li>
@ -44,6 +46,8 @@ const Footer = () => {
<span>www.loremipsum.com</span>
</div>
</div>
<div className="footerCheckout__wrapper">
@ -54,28 +58,28 @@ const Footer = () => {
<ul className="footerCheckout__stamps">
<li>
<img src="./assets/footer-img/masterCardM3Academy.png" alt="" />
<img src="./assets/footer-img/masterCardM3Academy.png" alt="Cartao masterCard" />
</li>
<li>
<img src="./assets/footer-img/visaM3Academy.png" alt="" />
<img src="./assets/footer-img/visaM3Academy.png" alt="Cartao Visa" />
</li>
<li>
<img src="./assets/footer-img/amexM3Academy.png" alt="" />
<img src="./assets/footer-img/amexM3Academy.png" alt="American Express" />
</li>
<li>
<img src="./assets/footer-img/eloM3Academy.png" alt="" />
<img src="./assets/footer-img/eloM3Academy.png" alt="Cartao ELO" />
</li>
<li>
<img src="./assets/footer-img/hiperCardM3Academy.png" alt="" />
<img src="./assets/footer-img/hiperCardM3Academy.png" alt="Cartao Hipercard" />
</li>
<li>
<img src="./assets/footer-img/mpayPalM3Academy.png" alt="" />
<img src="./assets/footer-img/mpayPalM3Academy.png" alt="PayPal" />
</li>
<li>
<img src="./assets/footer-img/boletoM3Academy.png" alt="" />
<img src="./assets/footer-img/boletoM3Academy.png" alt="BOLETO DE PAGAMENTO" />
</li>
<li>
<span className="footerCheckout__payments">Aqui: vtex pci icon</span>
<span className="footerCheckout__payments"><img src="./assets/footer-img/vtex-certified.png" alt="" /></span>
</li>
</ul>
@ -94,6 +98,8 @@ const Footer = () => {
</a>
</li>
</ul>
</div>
</div>

6
src/components/search/search.scss
View File

@ -6,14 +6,16 @@
.header-menu__input {
width: 100%;
height: 57px;
padding: 10px;
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-size: 28px;
line-height: 33px;
/* identical to box height */
background: #ffffff;
border: 2px solid #f0f0f0;
border-radius: 5px;
color: #c4c4c4;
}

3
src/global.scss
View File

@ -1,8 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Poppins:wght@400;700&family=Roboto:wght@400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#root {
padding: 0 100px 0 100px;
}