From 2e5a02c6237b97df61201780b46d23c6224857c3 Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Thu, 19 Jan 2023 18:18:38 -0300 Subject: [PATCH] feat : criando o style do footer e ajustando os tamanhos --- public/assets/footer-img/vtex-certified.png | Bin 0 -> 3645 bytes src/components/footer/footer.scss | 56 ++++++++++++++++++++ src/components/footer/index.tsx | 44 ++++++++------- src/components/search/search.scss | 6 ++- src/global.scss | 3 ++ 5 files changed, 88 insertions(+), 21 deletions(-) create mode 100644 public/assets/footer-img/vtex-certified.png diff --git a/public/assets/footer-img/vtex-certified.png b/public/assets/footer-img/vtex-certified.png new file mode 100644 index 0000000000000000000000000000000000000000..fe8fe8d5c5b0a01a8b4e77864ba8a8cdf22c4410 GIT binary patch literal 3645 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 P00000NkvXXu0mjfL8kS? literal 0 HcmV?d00001 diff --git a/src/components/footer/footer.scss b/src/components/footer/footer.scss index e69de29..c4932ab 100644 --- a/src/components/footer/footer.scss +++ b/src/components/footer/footer.scss @@ -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; + } +} diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index 5b4fb1f..921207d 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -5,17 +5,13 @@ const Footer = () => { return <>

Assine nossa Newsletter

- - +
+ + +
- { { label: 'Seja um Revendedor', highlight: true } ]} /> - + -
-
    +
    +
      • @@ -44,6 +46,8 @@ const Footer = () => { www.loremipsum.com
    + +
@@ -54,28 +58,28 @@ const Footer = () => {
  • - + Cartao masterCard
  • - + Cartao Visa
  • - + American Express
  • - + Cartao ELO
  • - + Cartao Hipercard
  • - + PayPal
  • - + BOLETO DE PAGAMENTO
  • - Aqui: vtex pci icon +
@@ -94,6 +98,8 @@ const Footer = () => { + +
diff --git a/src/components/search/search.scss b/src/components/search/search.scss index 4affca3..924f973 100644 --- a/src/components/search/search.scss +++ b/src/components/search/search.scss @@ -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; } diff --git a/src/global.scss b/src/global.scss index c4af452..9a84ab8 100644 --- a/src/global.scss +++ b/src/global.scss @@ -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; }