From b73390f6c61b809502ef7331a99b892792d599af Mon Sep 17 00:00:00 2001 From: Thiago Bronisio <86695254+ThiagoBronisio@users.noreply.github.com> Date: Fri, 30 Dec 2022 15:31:20 -0300 Subject: [PATCH] feat: adiciona header desktop e telas superiores --- public/index.html | 8 +- src/assets/cart.svg | 12 ++ src/assets/logo-m3.png | Bin 0 -> 6330 bytes src/assets/search.svg | 10 ++ src/components/Footer.tsx | 9 - src/components/Footer/Footer.module.scss | 13 ++ src/components/Footer/Footer.tsx | 80 +++++++++ src/components/Header.tsx | 9 - src/components/Header/Header.module.scss | 168 ++++++++++++++++++ src/components/Header/Header.tsx | 47 +++++ .../LinksFotter.scss} | 0 src/components/LinksFotter/LinksFotter.tsx | 1 + .../Newsletter.module.scss} | 0 src/components/Newsletter/Newsletter.tsx | 1 + src/global.scss | 8 + src/index.d.ts | 3 + src/pages/Home.tsx | 6 +- 17 files changed, 350 insertions(+), 25 deletions(-) create mode 100644 src/assets/cart.svg create mode 100644 src/assets/logo-m3.png create mode 100644 src/assets/search.svg delete mode 100644 src/components/Footer.tsx create mode 100644 src/components/Footer/Footer.module.scss create mode 100644 src/components/Footer/Footer.tsx delete mode 100644 src/components/Header.tsx create mode 100644 src/components/Header/Header.module.scss create mode 100644 src/components/Header/Header.tsx rename src/components/{Footer.module.scss => LinksFotter/LinksFotter.scss} (100%) create mode 100644 src/components/LinksFotter/LinksFotter.tsx rename src/components/{Header.module.scss => Newsletter/Newsletter.module.scss} (100%) create mode 100644 src/components/Newsletter/Newsletter.tsx create mode 100644 src/index.d.ts diff --git a/public/index.html b/public/index.html index 8c6cf53..6a5dc2a 100644 --- a/public/index.html +++ b/public/index.html @@ -8,10 +8,12 @@ name="description" content="Web site created using create-react-app" /> - - + + + + - React App + M3 Academy diff --git a/src/assets/cart.svg b/src/assets/cart.svg new file mode 100644 index 0000000..e756ffb --- /dev/null +++ b/src/assets/cart.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/logo-m3.png b/src/assets/logo-m3.png new file mode 100644 index 0000000000000000000000000000000000000000..779015ff89aa40faf9ea29afcf0d3c6b28ee3436 GIT binary patch literal 6330 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 literal 0 HcmV?d00001 diff --git a/src/assets/search.svg b/src/assets/search.svg new file mode 100644 index 0000000..add8204 --- /dev/null +++ b/src/assets/search.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx deleted file mode 100644 index bb26b4d..0000000 --- a/src/components/Footer.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react" - -export function Footer() { - return ( - <> -

Footer

- - ) -} \ No newline at end of file diff --git a/src/components/Footer/Footer.module.scss b/src/components/Footer/Footer.module.scss new file mode 100644 index 0000000..fee9005 --- /dev/null +++ b/src/components/Footer/Footer.module.scss @@ -0,0 +1,13 @@ +.container-footer { + position: relative; + min-height: 100vh; + + .footer-wrapper { + position: absolute; + bottom: 0; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + } +} diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..2fda10c --- /dev/null +++ b/src/components/Footer/Footer.tsx @@ -0,0 +1,80 @@ +import React from "react" +import styleFooter from "./Footer.module.scss" + +export function Footer() { + return ( +
+
+ + +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor

+
+ +
+
    +
  • +
    + # +
    +
    • + +
  • +
    + # +
    +
    • + +
  • +
    + # +
    +
    • + +
  • +
    + # +
    +
    • + +
  • +
    + # +
    +
    • + +
  • +
    + # +
    +
    • + +
  • +
    + # +
    +
    • + +
  • +
    + # +
    +
    • +
+
+ +
+
+

+ # +
+ +
+

+ # +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index 0ee7156..0000000 --- a/src/components/Header.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -export function Header() { - return ( - <> -

Header

- - ) -} \ No newline at end of file diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss new file mode 100644 index 0000000..88ca56f --- /dev/null +++ b/src/components/Header/Header.module.scss @@ -0,0 +1,168 @@ +.container-header { + .header-wrapper { + display: flex; + align-items: center; + justify-content: space-between; + padding: 22px 100.32px 22px 100px; + background-color: var(--black); + border-bottom: 1px solid var(--gray-100); + + &__container-logo { + width: 12.597%; + height: 25.86px; + + @media screen and (min-width: 2500px) { + width: 11.55%; + height: 50.5px; + } + + a { + display: flex; + align-items: center; + .logo-m3 { + width: 100%; + + @media screen and (min-width: 2500px) { + height: 50.5px; + } + } + } + } + + &__container-input-busca { + position: relative; + width: 24.452%; + + @media screen and (min-width: 2500px) { + width: 22.421%; + } + + .input-busca { + width: 100%; + height: 32px; + padding: 8px 44px 8px 16px; + background: var(--white); + border: 2px solid var(--white-100); + border-radius: 5px; + + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16.41px; + font-family: var(--font-roboto); + + //font-family: roboto; + + @media screen and (min-width: 2500px) { + height: 57px; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + + &::placeholder { + color: var(--gray-100); + } + } + + .button-search { + position: absolute; + z-index: 10; + border: none; + background: transparent; + outline: none; + top: 7px; + right: 17px; + cursor: pointer; + + @media screen and (min-width: 2500px) { + width: 35.15px; + height: 35.15px; + top: 10px; + right: 17px; + } + + img { + height: 18px; + width: 18px; + @media screen and (min-width: 2500px) { + width: 35.15px; + height: 35.15px; + } + } + } + } + + &__container-login-cart { + display: flex; + + p { + display: flex; + margin-right: 55px; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + align-items: center; + color: var(--white); + font-family: var(--font-roboto); + cursor: pointer; + + @media screen and (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + } + + img { + width: 28px; + height: 28px; + + @media screen and (min-width: 2500px) { + width: 54.68px; + height: 54.68px; + } + } + } + } + + .container-nav { + background-color: var(--black); + padding: 14px 100.32px 14px 100px; + + ul { + display: flex; + list-style: none; + + li { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: var(--white); + font-family: var(--font-roboto); + + @media screen and (min-width: 2500px) { + font-weight: 500; + font-size: 28px; + line-height: 33px; + } + + a { + text-decoration: none; + color: var(--white); + } + } + + li:nth-child(2) { + margin: 0 55px; + + @media screen and (min-width: 2500px) { + margin: 0 55.92px 0 55.71px; + } + } + } + } +} diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..69ed786 --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,47 @@ +import React from "react"; +import styleHeader from "./Header.module.scss" + +import logo from "../assets/logo-m3.png" +import cart from "../assets/cart.svg" +import search from "../assets/search.svg" + + + +export function Header() { + return ( +
+ +
+
+ + Logo M3 Academy + +
+ +
+ + + +
+ +
+

ENTRAR

+ Carrinho +
+ +
+ + +
+ ) +} \ No newline at end of file diff --git a/src/components/Footer.module.scss b/src/components/LinksFotter/LinksFotter.scss similarity index 100% rename from src/components/Footer.module.scss rename to src/components/LinksFotter/LinksFotter.scss diff --git a/src/components/LinksFotter/LinksFotter.tsx b/src/components/LinksFotter/LinksFotter.tsx new file mode 100644 index 0000000..097bf92 --- /dev/null +++ b/src/components/LinksFotter/LinksFotter.tsx @@ -0,0 +1 @@ +import react from "react" \ No newline at end of file diff --git a/src/components/Header.module.scss b/src/components/Newsletter/Newsletter.module.scss similarity index 100% rename from src/components/Header.module.scss rename to src/components/Newsletter/Newsletter.module.scss diff --git a/src/components/Newsletter/Newsletter.tsx b/src/components/Newsletter/Newsletter.tsx new file mode 100644 index 0000000..097bf92 --- /dev/null +++ b/src/components/Newsletter/Newsletter.tsx @@ -0,0 +1 @@ +import react from "react" \ No newline at end of file diff --git a/src/global.scss b/src/global.scss index 6f6f0d2..70c20f0 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,5 +1,13 @@ //VARIABLES :root { + --font-roboto: "Roboto", sans-serif; + + --black: #000000; + + --white: #ffffff; + --white-100: #f0f0f0; + + --gray-100: #c4c4c4; } * { diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000..7b8ccd4 --- /dev/null +++ b/src/index.d.ts @@ -0,0 +1,3 @@ +declare module '*.png' +declare module '*.jpg' +declare module '*.svg' \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 507fdd9..2208f9a 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,8 +1,6 @@ import React from "react"; -import { Footer } from "../components/Footer"; -import { Header } from "../components/Header" - - +import { Footer } from "../components/Footer/Footer"; +import { Header } from "../components/Header/Header" const Home = () => { return (